Unity 4.6の新GUIを利用する (3/5)
作成:2014-08-25 08:19
更新: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関数が実行される、という設定が用意できました。
では、スクリプトを完成させましょう。ui-scriptに用意しておいたOnClickButton関数を、下のリスト欄のように変更して下さい。1行追記しているだけですね。
これで完成です。シーンを実行し、現れたGUIの入力フィールドに何か書いてから、ボタンをクリックして下さい。その上に入力したテキストが表示されます。
ここでは、inputFieldに入力された値を、messageTextに表示する、ということをしています。やっていることはとても単純ですね。
messageText.text――messageTextに表示されているテキスト
inputField.value――InputFieldに入力された値
このように「text」プロパティで表示テキストを、「value」プロパティで設定された値をそれぞれ指定しています。この2つがわかれば、入力した値を表示する、といったことはすぐにできるようになるのです。
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つがわかれば、入力した値を表示する、といったことはすぐにできるようになるのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function OnClickButton() { messageText.text = inputField.value; }
※関連コンテンツ
「JavaScriptではじめるUnityプログラミング入門」に戻る