ゲームでスタート、リトライなどのユーザーからのインターフェースとしてボタンは欠かせません。UI の中にはText, Imageと同じようにButtonもありますので設定してみたいと思います
ボタンを押すとImageがCanvas上の四隅を移動する例です
Button
画面に画像を設置する方法はこのようにできます。
同様にボタンも重要なUIの一つであり、クリックすることでアクションをおこさせたいときに有効です。
Buttonを設定
「UI」から「Button」を選択するとButton が生成されます。
Sceneの初期設定では見えにくいかもしれません、ハンドツールで調整して見やすくしてもいいかもしれません。
Canvas, EventSystem, そしてButtonの下にはTextがあります。
Button Click
ボタンのクリックアクションを確認します
Project の Create から
「C# Script」でスクリプトファイルを作ります。
BTonClick()をPublicで設定してクリックイベントでデバッグログを出してみましょう。
ButtonClick.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using System.Collections; using System.Collections.Generic; using UnityEngine; public class ButtonClick : MonoBehaviour { private int counter = 0; void Start () { } public void BTonClick() { // debug log output Debug.Log("Button Click: "+counter); counter++; } } |
このスクリプトファイルをHierarchyのButtonにドラッグ&ドロップします。
Button の Inspector を見るとButton Click(Script)が追加されています。
On Click() と List is Empty がその上のButton (Script)にあるのでその下の「+」ボタンをクリックします。
List is EmptyのところにNone (Object)というのが表示されるので、その右の◉をクリックして、出てきたダイアログの「Scene」タブから「Button」を選択します。
次に、その隣にある「No Function」をクリックして、作成したスクリプト(ButtonClick.cs) の名前のButtonClick からスクリプト内のメソッドBTonClick() を選択します。
これで実行すると
Button Click : 2
のようにクリックでのカウントアップがログに出力されるのがわかります。
Click Action
もう少しスクリプトに手を加えて、画面上でアクションを起こしてみたいと思います
Imageを生成、画像をSpriteに変換してImageに追加します。
画像の設定については
を参考にしてください。
このImageのアンカー位置を四隅にボタンクリックで変更するスクリプトを書きます
ButtonClick2.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
using UnityEngine; using System.Collections; using UnityEngine; // 忘れずに! using UnityEngine.UI; public class ButtonClick : MonoBehaviour { public GameObject canvas; public Image image; private int counter = 0; void Start () { image.transform.SetParent (canvas.transform, false); // Anchors 位置設定 // top, left: Min: X=0, Y=1, Max: X=0, Y=1 // top, right: Min: X=1, Y=1, Max: X=1, Y=1 // bottom, right: Min: X=1, Y=0, Max: X=1, Y=0 // bottom, left: Min: X=0, Y=0, Max: X=0, Y=0 // middle, center: Min: X=0.5, Y=0.5, Max: X=0.5, Y=0.5 image.rectTransform.anchorMin = new Vector2(0.0f, 1.0f); image.rectTransform.anchorMax = new Vector2(0.0f, 1.0f); // アンカーからの位置 image.rectTransform.anchoredPosition = new Vector2(60.0f, -60.0f); } public void BTonClick2() { Debug.Log("Button Click : "+counter); if (counter % 4 == 0) { topRight (); } else if(counter % 4 == 1){ bottomRight (); } else if(counter % 4 == 2){ bottomLeft (); } else if(counter % 4 == 3){ topLeft (); } counter++; } private void topRight(){ image.rectTransform.anchorMin = new Vector2(1.0f, 1.0f); image.rectTransform.anchorMax = new Vector2(1.0f, 1.0f); image.rectTransform.anchoredPosition = new Vector2(-60.0f, -60.0f); } private void bottomRight(){ image.rectTransform.anchorMin = new Vector2(1.0f, 0.0f); image.rectTransform.anchorMax = new Vector2(1.0f, 0.0f); image.rectTransform.anchoredPosition = new Vector2(-60.0f, 60.0f); } private void bottomLeft(){ image.rectTransform.anchorMin = new Vector2(0.0f, 0.0f); image.rectTransform.anchorMax = new Vector2(0.0f, 0.0f); image.rectTransform.anchoredPosition = new Vector2(60.0f, 60.0f); } private void topLeft(){ image.rectTransform.anchorMin = new Vector2(0.0f, 1.0f); image.rectTransform.anchorMax = new Vector2(0.0f, 1.0f); image.rectTransform.anchoredPosition = new Vector2(60.0f, -60.0f); } } |
Button の Inspector には、ButtonClick2 のcanvasとimageを設定するようになっています。
前のButton Clickはチェックを外して、Button Click 2 へHierarchyからドラッグして設定します。
これでボタンをクリックすると緑のバッグが四隅を移動するようになりました。
References:
UI.Button.onClick – Unity スクリプトリファレンス
Button – Unity マニュアル