ゲームやアプリでは、プレイヤーに選択させることがたくさんあります。
メニューとして、一覧から選択するような方法もあれば、
一覧ではなく、「▶︎」などで表示を切り替えさせて選択させる方法もあります。
一覧を表示するまでもない選択の場合、これを使えば、スッキリしたUIとなって便利です。
本記事では、そんなUIの作成方法を超簡単に解説します。
実現できること↓
１．UIオブジェクトの準備
図のように、
まずMainCameraで背景をSolid Colorにして、紺色とし、
2つのButtonの作成、その間にText（TMP）を配置しましょう。
基本の骨格は、これでOK。
（あとは、お好みでデザインやアニメーションをつけて応用すればいいでしょう^^）
これらUIをスクリプトによって、機能するようにしていきます。
２．スクリプトで切り替えて選択するUIへ
早速、UI Mangerと名付けたC#スクリプトを作成します。
内容は以下の通り。
|
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 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using TMPro; public class UIManager : MonoBehaviour { [SerializeField] TextMeshProUGUI modeTMP; public int modeNum; int allModeNum = 3; // Start is called before the first frame update void Start() { } public void OnclickNext() { modeNum += 1; if (modeNum >= allModeNum) //大なりイコール { modeNum = 0; } switch (modeNum) { case 0: modeTMP.text = "MODE 1"; break; case 1: modeTMP.text = "MODE 2"; break; case 2: modeTMP.text = "MODE 3"; break; default: break; } } public void OnclickBack() { modeNum -= 1; if (modeNum < 0) { modeNum = allModeNum - 1; } switch (modeNum) { case 0: modeTMP.text = "MODE 1"; break; case 1: modeTMP.text = "MODE 2"; break; case 2: modeTMP.text = "MODE 3"; break; default: break; } } } |
このスクリプトを、MainCameraにアタッチします。
Inspectorから各種項目を紐付けし、
2つのNextButton、BackButtonのOnClickをそれぞれ設定します。
ここで選択している様子は、
表示されるTextはもちろん、
Inspector上のmodeNum（publicにしたので）の数値
の変化で確認できます。
ゲームを実行して、ボタンを押して変われば実装完了です！
実際のゲーム開発では、
当シーンで選択・設定して、ゲームシーンへ進む構造にします。
ここのmodeNumをPlayerPrefsなどのセーブ機能で保存し、
その値によって、
どんなモードのシーンに遷移するのか、
ゲームのルールが適用されるのか
作っていけば良いでしょう。
ちなみに、PlayerPrefsという保存を使ってキャラクター選択する方法は、
こちらの記事でやり方を解説してるので参考ください。
それでは！
