2014年11月04日

ゲームのアップグレード (11) | UI CANVAS 導入してUIボタンをグレードアップ!

さ、なんかやるやる詐欺みたいになってますが、今回こそ Unity 4.6 の大きな売り!UI CANVAS を導入してみますね!


UI CANVAS の導入
さて、強力になったUI機能、"UI CANVAS"!!
今回こそ、ホントに導入しましょうね!
ビデオチュートリアルは、英語だけどここから見れますよ!

まずは小手調べというか、今まで OnGUIメソッドで表示してたボタん達を、UI CANVAS を使って、置き換える作業から進めてみたいと思いますね。
OnGUI も便利なんですが、いかんせん2D的な表現しか出来ないんですよね。
なんで、UI CANVAS をつかって、見た目はそのままで3D的に表現が出来る形にして行きたいと思います。

じゃ、まずUIボタンの設置から。
Hierarchy ビューで右クリックした時のメニューが変わってますね。
右クリック -> UI -> Button で、UI Button を新規作成!
Screen Shot 2014-11-02 at 2.50.13 AM.png
すると、Hierarchy ビューに "Canvas" って Game object が作られて、その子供として Button が追加されてますね〜。
Screen Shot 2014-11-03 at 12.27.03 AM.png
一連の UI Object 達は、必ず Canvas の子供になっている必要があるらしいので、Cavas obj が無い場合、勝手に作られるみたいです。
さらに、イベントは捌く為の、EventSystem obj というのも作られるみたいですね。

Create した直後の初期状態ではこんな感じです。
Screen Shot 2014-11-03 at 12.28.11 AM.png
さ、これをちょっと調整して行きますね。
チュートリアルによると自分が思ってる様な仕様、独自カメラを使用して Canvas を表示するには、Canvas 内の Render Mode を "World Space" 変更する必要があるみたい。
Screen Shot 2014-11-03 at 12.30.08 AM.png
なんで、変更してみました!
Screen Shot 2014-11-03 at 12.30.19 AM.png
さらに、Event Camera をこれまでも使ってた、"UI_3D_Camera" にしますね。
EventCameraSet2.png
さらに、Canvas がゲーム画面にフィットする様に Rect Transform を調整。
ここは、Render Mode が World Space になってる時だけ変更可能です。
こんなもんかな?
Screen Shot 2014-11-03 at 12.33.25 AM.png
Scene ビューの白枠が Canvas の Rect Transform

それぞれの調整はこんな感じで、だいぶ今までのイメージに近いかな?
Screen Shot 2014-11-03 at 11.17.09 AM.png

Button の設定
Screen Shot 2014-11-03 at 11.17.05 AM.png
Text の設定
この設定で、こんな画面レイアウト。
Screen Shot 2014-11-03 at 11.16.46 AM.png

じゃ、GameManagerでの OnGUI のコードをコメントアウトして実行してみましょうかね!
Screen Shot 2014-11-03 at 11.04.51 AM.png
う〜ん。でませんね....
あっ、レイヤーの設定かな!
Canvas から子供も含めて、全部カメラと同じ UI_3D_Objects レイヤーに変えてみましょう!
Screen Shot 2014-11-03 at 11.19.54 AM.png
じゃ、改めて実行です!
Screen Shot 2014-11-03 at 11.49.39 AM.png
ちょっと他のテキストとかぶってますが、無事 Game ビューに表示される様になりましたね!


UI Buttonの各ボタンステートイメージの設定
今回のボタンでは、OnGUI のボタンみたいに、各ステートでボタンのテクスチャを切り替える、"SpriteSwap" っていうモードになってます。
なんで、他のボタンステートの時のスプライトも設定してやりましょうね。

Highlighted Sprite が、マウスホバー時のスプライト。
Pressed Sprite が、マウス押されてる間のスプライト。
Disabled Sprite が、ボタン選択不可時のスプライト。(たぶん)
Screen Shot 2014-11-03 at 4.33.28 PM.png
ここで設定してるスプライトは、前回インポートした、Unity の Default イメージから取ってきてますが、こんな感じで設定してみました。
これで動かしてみると....
気持ち分かりにくいんですが、マウスホバー状態でテクスチャが変わってると思います。
後半は、クリックした時にテクスチャが変わってるんですが、クリック、分かりにくいけど...


ボタンプレスイベントを処理
さて、ボタンが押された時のイベント処理の前に!
なんかちょっと問題があって、ボタンのコリジョンがでかいんですよね....
ちょっと調べてみると、子供でくっ付いてる Text のコリジョンが大き過ぎたみたい。
なかなか調整が難しいけど、ボタンより小さいコリジョンになる様に Rect Transform を調整して、変化大きさで反応しない様になりました!
一応、設定はこんな感じ。
Screen Shot 2014-11-03 at 5.49.14 PM.png
数値はもう何がなんだかって感じです。
さ、イベントに戻りましょう!
まず、イベント受け取り側のメソッドから作っておきましょうね。
これは、GameManager の中。
Screen Shot 2014-11-03 at 5.59.46 PM.png
単純にゲームステップを変えるだけの、簡単なメソッドです。元々、OnGUIでスタートボタンが押された時の処理と同じなんですけどね。
さ、このメソッドを、ボタン入力があった時に呼んでやるんですが、Inspector ビューで、ボタン obj を見ると、Button(Script) がありますね。
ここの下の方、On Click() の所で設定出来るみたいですね。
OnClick12.png
じゃ、右下の "+" ボタンを押して処理をリストに追加!
AddedMethod.png
なんか増えましたね。ここで、obj をまず選択するんですけど、さっきのメソッド、OnClickStartButton がある、GameManager コンポーネントを含む、Game_root を選択します。
Screen Shot 2014-11-03 at 4.48.55 PM.png
さらに赤丸の所をクリックして、
Screen Shot 2014-11-03 at 6.17.37 PM2.png
リストが出てくるんで、呼びたいメソッドを選択!
Screen Shot 2014-11-03 at 4.49.19 PM.png
これで設定は完了なはず!
じゃ、動かしてみましょうか。

ボタン押した後ボタン消してないからそのまま表示されちゃってるけど、ボタンイベント、ちゃんと処理されたみたいです!!

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


こっちは違うユニティ!!
posted by やまけん at 10:15| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: