【超初心者向け】第4回： Unityで画像切り替えボタンを作ってみよう！

• 2019.02.16
• Unity
• android, game, unity, アプリ, アンドロイド, ユニティ, 解説

さて前回は画像を並べて配置するところまでやりましたね。今回は画像切り替えボタンを作る方法について解説します。

イエモン「勉強させていただきます！」

目次

• 1. 切り替えボタンを配置
• 2. 左右に切り替えるプログラムを作成
• 3. スクリプトの紐づけ

切り替えボタンを配置

まずはCreateからUl→Canvasをクリックし、ファイル名を「CanvasUl」に変更します。

続いてCanvasUlを選択し右クリックでUl→Buttonをクリックし、ファイル名を「ButtonLeft」に変更します。

ButtonLeftを選択して、Inspectorの[Pos X:-320、Width:100、Helght:200]に設定します。次にColorをクリックし、[R:200、G:200、B:255、A:200]と設定します。

ButtonLeftの「▼」をクリックしてTextを選択します。InspectorのTextを「＜」と記入し、Font Styleを「Bold」、Font Sizeを「50」に設定します。これで左ボタンが出来ました。

続いて右ボタンを作りましょう。先ほど作成したButtonLeftをコピーしましょう。ButtonLeftを選択し右クリックでDuplicateでコピー出来ます。コピーしたらファイル名を「ButtonRight」に変更します。

右ボタンの位置を移動しましょう。ButtonRightを選択しInspectorの[Pos X:320、Width:100、Helght:200]に設定します。これで右ボタンが出来ました。

イエモン「ぼたんちゃーん！」

左右に切り替えるプログラムを作成

次は左右に切り替えるプログラムを作成しましょう。前回作成したスクリプト「GameManager.cs」を開きます。そしてコードを下記のように記述します。

using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.SceneManagement; public class GameManager : MonoBehaviour { //定数定義：パネル public const int WALL_f1 = 1; public const int WALL_f2 = 2; public const int WALL_f3 = 3; public const int WALL_f4 = 4; public const int WALL_f5 = 5; public const int WALL_f6 = 6; public const int WALL_f7 = 7; public const int WALL_f8 = 8; public const int WALL_f9 = 9; public const int WALL_f10 = 10; public GameObject panelWalls; private int wallNo; // Use this for initialization void Start() { wallNo = WALL_f1; } // Update is called once per frame void Update() { } //右（>）ボタンを押した public void PushButtonRight() { wallNo++; //方向を1つ右に switch (wallNo) { case WALL_f1: //次へ panelWalls.transform.localPosition = new Vector3(0.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f2: //次へ panelWalls.transform.localPosition = new Vector3(-1000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f3: //次へ panelWalls.transform.localPosition = new Vector3(-2000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f4: //次へ panelWalls.transform.localPosition = new Vector3(-3000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f5: //次へ panelWalls.transform.localPosition = new Vector3(-4000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f6: //次へ panelWalls.transform.localPosition = new Vector3(-5000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f7: //次へ panelWalls.transform.localPosition = new Vector3(-6000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f8: //次へ panelWalls.transform.localPosition = new Vector3(-7000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f9: //次へ panelWalls.transform.localPosition = new Vector3(-8000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f10: //次へ panelWalls.transform.localPosition = new Vector3(-9000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; } } //左（<）ボタンを押した public void PushButtonLeft() { wallNo--; //方向を1つ左に switch (wallNo) { case WALL_f1: //次へ panelWalls.transform.localPosition = new Vector3(0.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f2: //次へ panelWalls.transform.localPosition = new Vector3(-1000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f3: //次へ panelWalls.transform.localPosition = new Vector3(-2000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f4: //次へ panelWalls.transform.localPosition = new Vector3(-3000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f5: //次へ panelWalls.transform.localPosition = new Vector3(-4000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f6: //次へ panelWalls.transform.localPosition = new Vector3(-5000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f7: //次へ panelWalls.transform.localPosition = new Vector3(-6000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f8: //次へ panelWalls.transform.localPosition = new Vector3(-7000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f9: //次へ panelWalls.transform.localPosition = new Vector3(-8000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; case WALL_f10: //次へ panelWalls.transform.localPosition = new Vector3(-9000.0f, 0.0f, 0.0f); buttonMessage.SetActive(false); break; } } }

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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133

using UnityEngine; using System.Collections;   using UnityEngine.UI; using UnityEngine.SceneManagement;   public class GameManager : MonoBehaviour {       //定数定義：パネル     public const int WALL_f1 = 1;     public const int WALL_f2 = 2;     public const int WALL_f3 = 3;     public const int WALL_f4 = 4;     public const int WALL_f5 = 5;     public const int WALL_f6 = 6;     public const int WALL_f7 = 7;     public const int WALL_f8 = 8;     public const int WALL_f9 = 9;     public const int WALL_f10 = 10;       public GameObject panelWalls;     private int wallNo;     // Use this for initialization     void Start()     {         wallNo = WALL_f1;     }       // Update is called once per frame     void Update()     {     }      //右（>）ボタンを押した     public void PushButtonRight()     {         wallNo++; //方向を1つ右に         switch (wallNo)         {             case WALL_f1: //次へ                 panelWalls.transform.localPosition = new Vector3(0.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f2: //次へ                 panelWalls.transform.localPosition = new Vector3(-1000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f3: //次へ                 panelWalls.transform.localPosition = new Vector3(-2000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f4: //次へ                 panelWalls.transform.localPosition = new Vector3(-3000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f5: //次へ                 panelWalls.transform.localPosition = new Vector3(-4000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f6: //次へ                 panelWalls.transform.localPosition = new Vector3(-5000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f7: //次へ                 panelWalls.transform.localPosition = new Vector3(-6000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f8: //次へ                 panelWalls.transform.localPosition = new Vector3(-7000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f9: //次へ                 panelWalls.transform.localPosition = new Vector3(-8000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f10: //次へ                 panelWalls.transform.localPosition = new Vector3(-9000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;         }     }       //左（<）ボタンを押した     public void PushButtonLeft()     {         wallNo--; //方向を1つ左に         switch (wallNo)         {             case WALL_f1: //次へ                 panelWalls.transform.localPosition = new Vector3(0.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f2: //次へ                 panelWalls.transform.localPosition = new Vector3(-1000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f3: //次へ                 panelWalls.transform.localPosition = new Vector3(-2000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f4: //次へ                 panelWalls.transform.localPosition = new Vector3(-3000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f5: //次へ                 panelWalls.transform.localPosition = new Vector3(-4000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f6: //次へ                 panelWalls.transform.localPosition = new Vector3(-5000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f7: //次へ                 panelWalls.transform.localPosition = new Vector3(-6000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f8: //次へ                 panelWalls.transform.localPosition = new Vector3(-7000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f9: //次へ                 panelWalls.transform.localPosition = new Vector3(-8000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;             case WALL_f10: //次へ                 panelWalls.transform.localPosition = new Vector3(-9000.0f, 0.0f, 0.0f);                 buttonMessage.SetActive(false);                 break;         }     }   }

イエモン「なげぇーす…」

スクリプトの紐づけ

続いて作成したスクリプトとの紐づけ作業です。HierarchyのGameManagerを選択し、Inspectorの「Panel Walls」の箇所にHierarchyの「panelWalls」をドラッグ&ドロップします。

これで右ボタンを押せば右に、左ボタンを押せば左に切り替わることが出来たと思います。さて本日はここまでにしましょう。次回はボタンを押したらセリフが出てくる制作方法を解説します。家田君ここまで分かったかな？

イエモン「人生右も左もどちらでも行けるとゆう事ですな！」

• 第1回： Unityでフリップ芸を作ってみよう！
• 第2回： Unityでタイトル画面を作ってみよう！
• 第3回： Unityで画像を並べて配置してみよう！
• 第4回： Unityで画像切り替えボタンを作ってみよう！
• 第5回： Unityでメッセージボタンを作ってみよう！

アプリ名：フリップ芸（めくり芸） 内容：芸人がよくやるフリップネタのやつです。 対象：Android アプリダウンロードはこちら(androidのみ)： https://play.google.com/store/apps/details?id=com.hide.flip_show

• 前の記事
  

  【超初心者向け】第3回： Unityで同じシーンに画像を並べて配置してみよう！ 2019.02.16

• 次の記事
  

  【超初心者向け】第5回： Unityでメッセージボタンを作ってみよう！ 2019.02.16