PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

JavaScriptではじめるUnityプログラミング入門:

Unity 4.6の新GUIを利用する (1/5)

作成:2014-08-25 08:13
更新:2014-09-24 14:48
■InputFieldとButtonを用意する
Unity 4.6では、新しいGUI機能が用意されました。これを利用すると、スクリーン上だけでなく、シーンのワールド座標の中にGUIを構築することができます。またシーンのデザインと同じように、マウスで部品を配置してGUIを設計することもできます。

これをスクリプトから利用する場合には、GUI部品とスクリプトをうまく連携して利用することを考える必要があります。これは実際にサンプルを作成しながら説明していったほうがいいでしょう。


(※Unity 4.6の新GUIの使い方については、 http://libro.tuyano.com/index3?id=3266003 を御覧ください)


ここでは、InputFieldButtonを配置してみましょう。シーンを新たに用意し、<GameObject>メニューの<UI>から<Canvas>を選んでCanvasを追加してください。そしてインスペクターで、以下のように表示を整えておきます。

・Canvasの設定
Render Mode――「World Space」に切り替える
Event Camera――「Main Camera」を選択
PosX, PosY, PosZ――すべてゼロ
Width――640
Height――480
Pivot――x: 0.5, y:0.5
(※他はデフォルトのまま)


●Main Cameraを調整する
Main Cameraの表示を調整し、Canvasが表示されるようにしておきます。

Position――x:0, y:0, z:-500
Rotation――x:0, y:0, z:0
Scale――x:1, y:1, z:1
Field of View――60


●GUI部品を配置する
そGUI部品を追加していきます。それぞれ以下のように追加して下さい。Text, Font Style, Font Size, Colorなどは、それぞれで見やすいものに設定しておきましょう。

・Panel
そのまま追加するだけです。設定などは不要です。

・Text
わかりやすいよう、名前を「msgText」と変更しておきます。
PosX:0, PosY:150, PosZ:0
Width――600
Height――70

・InputField
PosX:0, PosY:50, PosZ:0
Width――300
Height――50

・Button
PosX:0, PosY:-150, PosZ:0
Width――300
Height――50

フォントサイズやテキスト色などは、それぞれで自由に調整下さい。これで基本的な部品はできました。これに、プログラムを組み込んでいくことにします。



 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

※作成したGUI画面。Text、InputField、Buttonを用意する。



 


「JavaScriptではじめるUnityプログラミング入門」に戻る



※その他のコンテンツ