CalendarUnityこんにちは!ガレージスタジオ部の岩間です。2014』8日目の記事を書かせていただくのですが、実は私はエンジニアではありません!12/1の記事で紹介していますが、私の所属するガレージスタジオ部では3ヶ月でNativeタイトルをリリースをするというプログラムを社内で行っています。『Lv.2』は、プランナーとエンジニアがチームを組んで2か月でオリジナルタイトルをリリースするというプログラムなのですが、私の場合はタイミングなどの都合上、企画から実装までプランナーの私1人でチャレンジすることになりました。今回の記事は、その2か月間に躓いた部分を中心にUnity4.6で実装された新UIエディタのことを書かせていただきます。新UIエディタを使った具体的な実装方法Canvas制御によるUIの出し分けボタンを押した時に関数を呼び出すUIのテキストをScriptで変更する端末に合わせたサイズにUIを自動調整するUI内の画像をScriptで制御する◇Unity4.6で実装された新UIエディタとは?UnityでUIを簡単に作れる機能。Unity4.6から実装されている。2014年夏にβ版が公開され、11/26正式リリース。開発当時はβ版だったのですが、せっかくなので新しいUnity4.6の『新UIエディタ』を使ってみることにしました。解説しているページがまだ少なく、開発途中で後悔しそうになりましたが、なんとか最後まで『新UIエディタ』を使って作りきりことが出来ました。ギミックを解きながらゴールを目指すアクションパズルゲームです。近日リリース予定ですので、是非遊んでみてください。こちらのゲームを題材に新UIエディタの具体的な実装方法について説明したいと思います。◇開発環境Unity4.6.0f3Windows7ScriptはC#で記載しました。◇新UIエディタを使った具体的な実装方法(1)Canvas制御によるUIの出し分け新UIエディタは、基本的にはCanvasという単位で管理します。Canvasを配置して、その子要素として画像やテキストやボタンなどを配置していきます。一時停止したときに表示するウィンドウは、こんな感じに配置してます。ToolWindowというCanvasの中に各種ボタンや画像などを設置しました。▼このようになりました。▼ゲーム画面上だと、このように最前面に表示されます。このようなウィンドウは、Canvasのenabledを変更することで必要なタイミングに出したり消したりを簡単に制御できます。複数のCanvasを状況に合わせて出し分けることも可能です。▼具体的には、このように制御しています。UnityEngine.UI;を書き加える必要がありますので、ご注意ください。(2)ボタンを押した時に関数を呼び出す新UIエディタでは、ボタンを押した際の処理を簡単に制御することが出来ます。先ほどのウィンドウの右上にあるクローズボタンを例に説明します。ボタンのInspectorを見ると、下部にOnClick()というエリアがあり、そこに記載した処理がクリック時に実行されます。上記の場合は、UIというゲームオブジェクトに付けられたUIControlというScriptに対してSendMessageを行い、CloseToolWindowという関数を実行しています。CloseToolWindowは、Canvasのenabledをfalseに変更する関数なので、ウィンドウの表示が消えることになります。(3)UIのテキストをScriptで変更する多くのゲームでは、スコアなどの動的に変わる文字を画面上に表示する必要があるかと思います。そのような時は、スクリプトで数値を制御する必要があります。今回のゲームでは、OPのスタッフクレジットの文字を動的に変えています。▼具体的には、このように制御しています。Director";}}(4)端末に合わせたサイズにUIを自動調整するゲームのUIは多くの場合、端末の解像度に関わらず同じように表示されるのが望ましいと思いますが、何も設定をしていないと端末の解像度に応じて表示が崩れることがあります。▼UIサイズが小さくなったり▼UIサイズが大きくなったり新UIエディタでは、解像度に合せて自動的にUIのサイズを調整する機能が付いています。▼具体的な使用法は下記のようになっています。Scalerを追加します。Sizeを選択します。ResolutionのXとYの値で基準の解像度を設定し、基準の解像度でUIのレイアウトを行います。各端末で表示する際には、自動的にその端末に合わせて表示されます。Heightを選択すると、縦の比率を優先して合わせるか、横の比率を優先して合わせるかが調整可能です。(5)UI内の画像をScriptで制御する(1)でCanvasを制御することでUIの表示を切り替える方法を記載しましたが、一部の画像のみの表示を消したり、または画像の差し替えが必要になる場面もあるかと思います。今回のゲームでは、ステージ進捗状況に合わせて、ステージ選択画面で鍵の表示やコインの表示状況が変わるように作っています。▲状況に合わせて鍵が開錠されて、獲得したコインが表示されます。▼例えば、ステージ5のUIはこのように制御しています。true;}}}}今回のゲームでは、画像の差し替えは行っていませんが下記のように記載することで状況に合わせて画像の表示を変えることも出来ます。lightItemSprite;}}上記の場合は、Inspectorで必要なスプライトを別途指定する必要があります。◇さいごにさて、Unity4.6の新UIエディタの簡単な使い方をご紹介させていただきましたが、いかがだったでしょうか?今回ご紹介したのは、新UIエディタの機能のほんの一部になります。新UIエディタを使うことで他にも色々な事が簡単に出来ます。私もまだまだ使い始めたばかりですので、引き続き勉強していきたいと思います。数か月前までUnityにも触ったことが無かった私が、一人で簡単なゲームを作れるようになりました。非エンジニアの方がこの記事をキッカケにUnityに触っていただければ嬉しく思います。明日は森田さんによる記事です。