2014年09月25日

ゲーム改善の本番 (7) | ユーザーに伝える情報を増やそう(2)

さて、またユーザーに伝える情報を増やしましょうね。

今まだ問題としてあるのは、発射可能なミサイルの数が分からない所なんで、そこの表示を追加しますね。
なんか、3Dモデルをいちいち表示するのもあれなんで、2Dになじむ意味も含めて、2Dスプライトでやってみたいと思う次第。


2Dテクスチャの準備から
さて、テクスチャが必要なんですが、元になる画像、どうしましょう?
という事で、スクリーンショット撮影用のシーンを別に作って、3Dモデルを"よい感じ"で撮影して、それをちょこっと加工して使いましょかね。
PhotoStdio.png
別シーンには、ミサイルのプレファブを持って来ただけですね。
カメラをよい感じの大きさに調整して、"Game" ビューを普通に画面撮影。(Mac や Windows の基本のスクリーン撮影機能です。) 
今回は、アイコンの様なテクスチャが欲しいだけなんで、ディレクショナルライトを置いて、真っ白にして撮影。
ScreenShot.png
これでいいですよね。
で、このファイルを、よくお世話になってる、"GIMP" で加工して、キャンバスサイズ変更して、回りの黒い部分を透明にして、出来たテクスチャがこれ。
UI_Missile.png

これを、ミサイル発射可能な数だけ、画面の両サイドに表示していきますね。
ちなみに、 GIMP のダウンロードは、ここが 公式かな?でも私は ここから ダウンロードしましたよ。


発射可能ミサイルを表示
まず、さっき作ったテクスチャを、アセットとして Unity にインポートしましょう!
ま、ファイルをドラッグしてドロップするだけなんですが。
私の場合は、以前作った、 /Assets/Custom Assets/Textures って所にドロップしてます。
Screen Shot 2014-09-23 at 1.32.34 PM.png
で、ドロップしたファイルを Inspector ビューで見てみると、こんな感じ。
Screen Shot 2014-09-23 at 1.32.07 PM.png
この設定を、ちょっとだけ変えて "Apply" しますね。
2Dスプライト用なんで、タイプは "Sprite(2D \ uGUI)" で、
Screen Shot 2014-09-23 at 1.34.01 PM.png
変な圧縮して欲しくないんで、Format は "16 bits" としてます。
Screen Shot 2014-09-23 at 1.34.14 PM.png
これで、テクスチャの準備は終了!

では、このテクスチャを "Sprite Renderer" コンポーネントを使って表示していきますね。
発射可能なミサイル数を表現する Object を "UI_Missile" として obj を作成。で、"Sprite Renderer" コンポーネントをくっ付けます。
Screen Shot 2014-09-23 at 1.35.55 PM.png
で、Inspector ビューの Sprite Renderer の中の "Sprite" に、さっきインポートした、"UI_Missile" テクスチャをドラッグ&ドロップ!
Renderer.png
これでどうかな....?
あれ、出てない。
あれ〜....なんでだろ?
あっ、レイヤーかっ!

そうですね。レイヤーが "Default" のままだとカメラのカリング設定を変えた関係で表示されませんね。
なんで、ちゃんと "UI" レイヤーに変えましょう。
LayerChangedd.png
これで表示はされましたね!

じゃ、これを画面 UI としてちゃんと設置しましょうか。
こんな感じ!
UI_Missile_Comp.png
また仕様変更ですが、画面が広くなったんで、発射可能数を6発までに増やして、左右に3発ずつ表示する形にしましたよ!


発射可能ミサイルを表示を制御
じゃ、さっき表示したミサイルを、ゲームの状態に合わせてコントロールしてみましょう!
また、ミサイル表示のハンドラを持っておくんですが、今回は配列になりますね。
なんで、スクリプト側はこんな感じで。今回も、HUDManagerに入れて行きますよ。
Screen Shot 2014-09-23 at 1.48.10 PM.png
すると、Inspector ビューではこんな感じになります。
Screen Shot 2014-09-23 at 1.49.18 PM.png
ここで、Sizeをセットして、GameObject を設定して行きましょうね。
Screen Shot 2014-09-23 at 1.49.07 PM.png
さて、ちょっとだけトリックですが、ミサイル表示の配列への置き方ですが、見た目を良くする為に、配列の頭(Element0)が、一番最初に隠したい右下。配列の最後(Element5)が一番最後に隠したい左上の obj になってます。
Screen Shot 2014-09-23 at 1.55.52 PM.png
これで、ミサイル発射でUIが消える順番は、右下、左下、右中、左中、右上、左上、の順番に簡単に設定できるはず!かな?

で、管理する側のスクリプトはこんな感じ。これは、HUDManager の中の Update() でやってます。
Screen Shot 2014-09-23 at 2.15.45 PM.png
そんなに複雑じゃないでしょ。
ミサイルの数を GameManager から取得して、存在してるミサイル数の分は、配列の下側からグレーで表示する様に色を設定。
それ以外で、配列のMaxまでは白で表示。(配列は0から始まるんで、Missile-1 とかなってるけど...)

で、実行すると.......


大丈夫みたい!!

        にほんブログ村 ゲームブログ×PlayNCBlogへ
 初めてみました。よかったらクリックお願いね ♪

こういうのも読まなきゃなぁ〜
posted by やまけん at 09:57| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: