今回はUnity標準についてるGUIの機能をつかってボタンやスライダーを作ってみましょう
Unityで標準でついてくるGUIクラスの使い方を説明していきます。
今回作るものは↓です。
ボタンとかスライダーがいじれます。
実際のゲームではゲームのスタート時や音量の調節などにつかえるかと思います。
準備
とりあえずいつものように新しいプロジェクトを作りましょう。
ボタンを作る
では早速ボタンを作っていきます。
空のゲームオブジェクトを作る
GameObject -> Create Empty から空のゲームオブジェクトを作ってください。
なまえはMenuに変更しておいてください。
スクリプトを作成
次に
Projectパネル右クリック -> Create -> JavaScript から新しいスクリプトファイルを作りましょう。
なまえはMenuとしておきましょう。
スクリプトを作成したら忘れないうちにGameObjectの「Menu」に適応しておきましょう。
適応するにはProjectパネルのMenuをHierarchyパネルのMenuにドラッグ＆ドロップしましょう。
スクリプトを編集
では作成したスクリプトMenuをダブルクリックしてMonoDevelopを開きスクリプトを編集していきましょう。
以下の様に作成してください。
#pragma strict
function OnGUI()
{
if ( GUI.Button( Rect(100, 100, 100, 20), "ぼたん" ) )
{
Debug.Log("ぼたんがおされました");
}
}
最初の状態だと Start()や Update()が記載されていますが、今回は不要なので削除してしまって問題ありません。
コンパイルエラー
編集が終わったらUnityに戻りましょう。
コンパイルエラーはありませんでしたでしょうか。
コンパイルエラーを確認するにはWindow -> Console を選択してConsoleパネルを表示しましょう。
Consoleパネルに何も表示されていなければOKです。
上記の画像は赤いビックリマークとメッセージが表示されていますね。
Assets/Menu.js(5,58): BCE0044: unexpected char: 0x3000.
ちょうポカミスなのですが…
Menu.jsの5行目の58文字目らへんにunexpected char(変な文字がある)と言われてしまいました。
実はコードに全角スペースが入ってしまっていました…
なんという初歩的ミス…(||´ﾛ｀)ｏ=3
全角スペースを半角スペースに変更するだけで修正OKです。
（上に載せたコードは修正済みのものを載せてます）
再生してみる
コンパイルエラーも直せた所でUnityの上の再生ボタンからプログラムを実行してみましょう。
ボタンが表示されていて、そのボタンを押すとConsoleパネルに「ぼたんがおされました」と表示されればOKです！
簡単ですね！
スクリプト内容の解説
スクリプトを一行づつ解説していきます。
function OnGUI()
OnGUI関数はGUIの描画時にUnityから自動的に呼ばれ実行されます。
GUIクラスの命令はこのOnGUI関数の中に書くことになります。
if ( GUI.Button( Rect(100, 100, 100, 20), "ぼたん" ) )
なんかちょっと複雑に見えますけど一個づつ細切れにして見ていきましょう。
GUI.Button( )
上記はボタンを表示するための関数です。
ボタン関数の引数は以下の２つになっていますね。
( Rect(100, 100, 100, 20), "ぼたん" )
1つ目のRect()は四角形の座標を指定するためのクラスです。
Rect()の引数は（左上のX座標, 左上のY座標, 幅のサイズ, 高さのサイズ）になっています。
ボタンの位置やサイズを変更する場合はここの数値を変更しましょう。
2つめの"ぼたん"という文字列はボタンの上に表示される文字を指定しています。
if ( GUI.Button( ) )
そしてこのボタン関数がif文の条件になっています。
普段はボタン関数の返り値はFALSEですが、ボタンが押された瞬間だけTRUEになります。
なのでボタンが押された瞬間だけ以下が実行されるわけです。
Debug.Log("ぼたんがおされました");Debug.Log()は文字列をConsoleパネルに表示するための命令です。
ラベルを使う
次は画面上に文字列を簡単に表示することのできるラベルという機能を使ってみましょう。
Menu.jsを以下の様に変更してください。
#pragma strict
function OnGUI()
{
if ( GUI.Button( Rect(100, 100, 100, 20), "ぼたん" ) )
{
Debug.Log("ぼたんがおされました");
}
//追加
GUI.Label( Rect(0, 0, 100, 100), "らべる" );
}
追加したのは
GUI.Label( Rect(0, 0, 100, 100), "らべる" );
の一行です。
引数は先ほどのボタンと同じで
Rect()で位置とサイズを指定して
"ラベル"の部分に表示する文字を指定してあげます。
それではUnityに戻ってゲームを再生してみてください。
右上に「らべる」と表示されていればOKです。
一行書くだけで画面上に文字を表示できるのでなかなか使い勝手がいいですね。
スライダーを作る
#pragma strict
//追加
var num:int = 0;
function OnGUI()
{
if ( GUI.Button( Rect(100, 100, 100, 20), "ぼたん" ) )
{
Debug.Log("ぼたんがおされました");
}
GUI.Label( Rect(0, 0, 100, 100), "らべる" );
//追加
num = GUI.HorizontalSlider(Rect(100, 200, 100, 20), num, 0, 10);
GUI.Label( Rect(220, 200, 100, 20), num.ToString() );
}
追加したのは3行です。
var num:int = 0;
最初の var num:int = 0; で整数の変数を一つ用意しておきます。
この変数をスライダーの数値の保存に使います。
num = GUI.HorizontalSlider(Rect(100, 200, 100, 20), num, 0, 10);
上記がスライダーの処理になります。
Rect()は他のGUIの処理と同じように座標を設定しています。
num の部分は保存していた値を渡してあげます。
0 と 10 の部分がスライダーの左右の値を決めています。今回は0と10なので0〜10の範囲でスライダーの値が変更できるようになっています。
GUI.Label( Rect(220, 200, 100, 20), num.ToString() );
上記は先ほど説明したラベルでスライダーの横にスライダーの現在の値を表示しています。
num.ToString()の処理で整数のnumの値を文字列に変換しています。
ではUnityに戻ってプログラムを再生してみましょう。
スライダーが表示され、スライダーを動かすと右の値が連動して変わればOKです。
まとめ ＆ OnGUIの問題点
いかがでしたでしょうか。なかなか簡単にOnGUI関数を使ったボタンやスライドバーを実装することができたんじゃないでしょうか。
他にもGUIクラスにはテキスト入力やスクロールバーなど色々なUIが用意されています。
以下のリファレンスを参照してみてください。
http://docs-jp.unity3d.com/Documentation/ScriptReference/GUI.html
OnGUIの問題点
Unity標準のUI機能は簡単な反面、なかなか使いづらい面もあります。
■座標を数値で入力しないといけない
数値で座標を入力するのは複雑なUIを作るのにはちょっと面倒です。あとモバイル環境などでは複数の解像度に対応しなければならないため座標の直接入力だけだとちょっと使いづらいです。
■DrawCallが増える
DrawCallってなんぞやって人もいるかと思いますので、個別に記事を書こうと思っているんですが、簡単に言ってしまえば描画にかかる処理の重さです。この数値が大きくなればなるほど描画処理が重くなってしまいます。
Unity標準のGUIクラスは1パーツにつき1DrawCallかかってしまいます。これは実は結構重かったりします。
標準のGUIクラスを使わないGUIの作成方法も今後まとめていきたいと思います。
今回は以上です。
<<他の記事を読む
[スポンサードリンク]
