libro
www.tuyano.com
JavaScriptではじめるUnityプログラミング入門

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

作成:2014-08-25 08:19
更新:2014-08-25 08:19

■ButttonのOnClickイベントでGUI部品を操作する

では、Buttonをクリックして、InputFieldのテキストを取り出し、messageTextに表示する、といった処理を作成してみましょう。まずは、Buttonに「ボタンをクリックしたらOnClickButton関数を実行する」という設定を組み込みます。

Buttonを選択し、インスペクターを見ると、「Button (Script)」というところに「On Click()」という項目があることがわかります。これは、OnClickイベント(クリックした時に発生するイベント)で実行する処理を設定するためのものです。

この部分の右下にある「」マークをクリックすると、項目が新たに追加され、そこに2つの設定項目が用意されます。1つ目が「None(Object)」と表示され、右側にある2つ目のものは「No Function」と表示されています(ただし、2つ目は選択できない状態です)。この2つの項目は、1つ目が「ゲームオブジェクト」、2つ目が「実行する関数」を指定するためのものになります。

では、1つ目(左側)の項目から、実行したい処理があるスクリプトが組み込まれているゲームオブジェクトを選択しましょう。ここではCanvasにスクリプトを組み込んでいますから、項目のすぐ右にあるマークをクリックして、現れたウインドウから「Canvas」を選択しましょう。

これで2つ目のポップアップメニューが選択できるようになります。ここから、<ui-script>内にある<OnClickButton>を選んで下さい。これで、OnClickイベントが発生したら、Canvasに設定してあるui-scriptのOnClickButton関数が実行される、という設定が用意できました。


■OnClickButton関数を書こう

では、スクリプトを完成させましょう。ui-scriptに用意しておいたOnClickButton関数を、下のリスト欄のように変更して下さい。1行追記しているだけですね。

これで完成です。シーンを実行し、現れたGUIの入力フィールドに何か書いてから、ボタンをクリックして下さい。その上に入力したテキストが表示されます。

ここでは、inputFieldに入力された値を、messageTextに表示する、ということをしています。やっていることはとても単純ですね。

messageText.text――messageTextに表示されているテキスト
inputField.value――InputFieldに入力された値

このように「text」プロパティで表示テキストを、「value」プロパティで設定された値をそれぞれ指定しています。この2つがわかれば、入力した値を表示する、といったことはすぐにできるようになるのです。

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

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

●プログラム・リスト●

function OnClickButton() {
    messageText.text = inputField.value;
}

※関連コンテンツ

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