読者です 読者をやめる 読者になる 読者になる

Redhuのゲーム開発Fragments

UnityやUEでゲームを作る際に学んだことを、これからなにか作りたい人に向けて。あるいは復習する自分に向けて記す。

Unity4.6のuGUIについてのお勉強

 

Unity4.6からGUIのシステムとしてuGUIが導入されております。

自作のMachineCladCavalryの制作はuGUI導入前で、かつ有料アセットも使わないと決め手作っていたのでNGUIも無く、並行カメラにスプライトを置いていく感じで無理やり導入しました。ゲーム作るとなるとGUIを避けては通れないというのにこの不便さ。

 

が、uGUIでそんな煩わしい作業ともおさらば!

・・・できるといいなということで、uGUIを勉強していきたいと思います。

 

 

f:id:redhu:20141208060722p:plain

まずは左上をチェック。今までの操作系列に加えて右端に新たな操作系が追加されています。

これがuGUIを操作する時のツールになります。

 

f:id:redhu:20141208061248p:plain

CreateからUIを選べば作れるUI一覧みたいなのが出てきます。

 

f:id:redhu:20141208061613p:plain

ためしにimageを選んでみました。するとCanvasとEventSystemが作られ、Canvasの中に今選んだimageが出来ました。

このCanvasというのが、uGUIが書かれている一枚の紙みたいなものですね。

Canvasがひとつも作られていない状況でなにかuGUIを作ろうとするとCanvasも一緒に作られます。

EventSystemってのは・・・ボタンで何か起動したりするときに使うのかな?ひとまず>そっとしておこう

 

f:id:redhu:20141208062314p:plain 

Source Imageから表示させる画像を変えることができます。

 

Colorで色を変更。上の画像ではもとから緑色の画像を使っちゃってますが、それだとカラーがプラスされちゃうのでここで決めた色にバッチリ決まってくれません。

あとから色を変える予定のある画像は、白黒に変換しておいたほうがよろしいかと。

Preserve Aspectにチェックを入れると元画像のアスペクト比が保持されるようになります。

 

 Image Typeは画像の表示方法みたいな感じ。

Simpleはズバリそのものシンプルに表示するのみ。

Slicedは境界線を決めてスケール変更される場所とされない場所を決めるみたいな感じ。ステータス表示の背景とかで、枠線の部分はスケール掛けたくない時とかに。境界線の設定は別途必要。

Tiledは範囲内に画像を敷き詰める感じ。背景に使えばいいのかな?

Filledは割合を決めて画像を表示させる。実際に見たほうがわかりやすいので

f:id:redhu:20141208063538p:plain

ご覧のように、Fill Amountの割合分だけ画像が表示されています。

Fill Methodは現れ方の手法について。縦に、横に、円形に90度、180度、360度と選べます。

Fill Originは出現の開始位置。加えて円形だと時計回りかどうか選べます。

 

Filledを使えば、真四角ではないHPバーの表示とか簡単にできそうですね。アーマードコアV系の円形ゲージとかも簡単です。

 

ただしAmountは0~1までしか設定できないので、Fill Amount = 現在HP/最大HPとかを渡して上げる必要ありっぽいかな。

 

あとCanvasコンポーネントについてひとつ

 

f:id:redhu:20141208064609p:plain

Canvas ScalerというコンポーネントのUi Scale Modeについて。

最近まではReferenceResolutionという名前だったようで。

これをScale With Screen Sizeに設定しておかないと、画面サイズを変えた時にUI配置が画面外に行っちゃったり、想定外のものになったりします

 

今回はここまで。

うに部屋さんに置かせて頂いているリメイク対象の旧作

unityroom.com