今回はゲームのオプション設定を切り替えるボタンを作成していきます。
複数の設定がある場合は選択式で選ぶ必要がありますが、設定が有効か無効かを切り替えるだけの場合はボタンを押すたびに設定を切り替えた方が楽です。
というわけで、自身のタイピングゲームで使ったオプション設定を切り替えるボタンに似たものを作成していきたいと思います。
今回の機能を作成すると、以下のようにボタンを押すたびに設定を切り替える機能が出来ます。
BGMとSE用のオブジェクトを作成する
今回はBGMとSEの設定を切り替えるようにする為、BGM用とSE用のゲームオブジェクトを作成し、それぞれにAudioSourceを取り付けて再生させるようにします。
ヒエラルキー上で右クリックからCreate Emptyを選択し、名前をBGMとします。
同じようにSEも作成します。
BGMとSEゲームオブジェクトのインスペクタのAdd ComponentからAudio→Audio Sourceコンポーネントを取り付けます。
BGMゲームオブジェクトのAudio Sourceの設定は以下のようにBGMに使用するAudio Clipの設定をし、Play On Awakeにチェックを入れて（これはチェックを入れても入れなくてもいいです）スタート時に音声が流れるようにし、Loopにチェックを入れてループ再生するようにします。
SEゲームオブジェクトのAudio Sourceの設定は以下のようにSE用のAudio Clipを設定します。効果音なのでPlay On Awakeのチェックを外し、ループ再生もしないのでLoopのチェックを外しています。
AudioSourceの設定については以下の記事を参照してください。
UIを作成する
設定項目のタイトルのテキスト、設定を切り替えるボタンのUIを作成していきます。
今回はテキストをTextMeshProで作成していきますが、旧UGUIのTextを使っても構いません。
旧Textの方が簡単に話が進むんでそちらで作ろうとも思うんですが、既にLegacyになっているので記事で紹介するのは少し抵抗があるのでTextMeshProを使っています。(^_^;)
TextMeshProに関しては以下の記事を参照してください。
ヒエラルキーで右クリックからUI→Text – TextMeshProを選択し、名前をBGMTitleとします。
BGMTitleゲームオブジェクトのインスペクタでText InputにBGMと入力します。
ヒエラルキーでBGMTitleを選択した状態でCtrl＋Dキーを押して複製し、名前をSETitleとします。
SETitleのText InputにはSEと入力します。
次にヒエラルキーのCanvasを選択した状態で右クリックからUI→Button – TextMeshProを選択し、名前をBGMButtonとします。
BGMButtonの子のText(TMP)を選択し、インスペクタのText InputのONと入力します。
ヒエラルキーのBGMButtonを選択し、Ctrl＋Dキーを押して複製し、名前をSEButtonとします。
現時点では設定タイトルとボタンの位置がバラバラになっていますので、これを整理して表示したいと思います。
ヒエラルキーのCanvasを選択し、インスペクタのAdd ComponentからLayout→Grid Layoutコンポーネントを取り付けます。
Grid Layoutコンポーネントは取り付けたゲームオブジェクトの子の並びをグリッド上に整列させることが出来ます。
CanvasのインスペクタのGrid Layoutの設定を以下のように変更します。
Cell Sizeで子のUIのセルのサイズを設定し、Spacingでセル間のXとYの幅を設定し、Child Alignmentで子の配置位置を設定し、ConstraintをFixed Column Countにし列の数に応じてUIの要素を次の行に表示するようにします。
今回の場合はタイトルとボタンを1組として1行にしたいので、Constraint Countを2にします。
現時点では以下のような配置になります。
BGMタイトルの右にBGMの設定を切り替えるボタンがきて、SEタイトルの右にSEの設定を切り替えるボタンがきてほしいのでヒエラルキーでUIの順番を変更します。
ヒエラルキーでBGMButtonゲームオブジェクトを選択し、BGMTitleゲームオブジェクトの下にドラッグします。
BGMTitleとSETitle自体の配置位置の為にボタンと少しずれています。
Ctrlキーを押しながらBGMTitleとSETitleゲームオブジェクトの２つを選択し、TextMeshProのMain SettingsのAlignmentを変更します。
これでタイトル位置がボタンの並びと合うようになりました。
これでUIが出来ました。
オプション切り替えスクリプトの作成
オプションを切り替えるスクリプトを作成します。
新しくOptionSettingスクリプトを作成し、Canvasゲームオブジェクトに取り付けます。
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 | using System.Collections; using System.Collections.Generic; using TMPro; using UnityEngine; public class OptionSetting : MonoBehaviour { // BGMボタンのテキスト [SerializeField] private TextMeshProUGUI bgmButtonText; // SEボタンのテキスト [SerializeField] private TextMeshProUGUI seButtonText; // BGM設定 public bool BGMSettings { get; set; } // SE設定 public bool SESettings { get; set; } // BGMAudioSource [SerializeField] private AudioSource bgmAudioSource; // SEAudioSource [SerializeField] private AudioSource seAudioSource; // Start is called before the first frame update void Start() { InitializeOptionSettings(); } // 初期状態をボタンのテキストに反映する public void InitializeOptionSettings() { if(BGMSettings) { bgmAudioSource.Play(); bgmButtonText.text = "ON"; } else { bgmAudioSource.Stop(); bgmButtonText.text = "OFF"; } if(SESettings) { seButtonText.text = "ON"; } else { seButtonText.text = "OFF"; } } // BGMボタンが押された public void OnPushBGMButton() { // ボタンを押した時の効果音を鳴らす if(SESettings) { seAudioSource.Play(); } // 設定を反転させる BGMSettings = !BGMSettings; if(BGMSettings) { bgmAudioSource.Play(); bgmButtonText.text = "ON"; } else { bgmAudioSource.Stop(); bgmButtonText.text = "OFF"; } } // SEボタンが押された public void OnPushSEButton() { // 設定を反転させる SESettings = !SESettings; if (SESettings) { seAudioSource.Play(); seButtonText.text = "ON"; } else { seAudioSource.Stop(); seButtonText.text = "OFF"; } } } |
bgmButtonTextとseButtonTextは各ボタンの子のテキストをインスペクタで設定します。
BGMとSEの設定のプロパティを用意します。
BGMとSEのAudioSourceを操作する必要があるので設定を出来るようにします。
StartメソッドではInitializeOptionSettingsメソッドを呼んで初期設定を反映させるメソッドを実行します。
InitializeOptionSettingsメソッドではBGMが有効な設定の場合はbgmAudioSourceを再生し、BGMButtonの子のテキストをONに書き換えます。
BGMSettingsが無効の場合はBGMを止め、テキストをOFFにします。
同様にSESettingsの状態に応じてボタンの子のテキストを変更します。
OnPushBGMButtonメソッドはBGMの切り替えボタンを押した時に呼び出すようにします。
BGMボタンを押した時はSESettingsが有効な場合は効果音を鳴らします。
その後BGMSettingsの設定を!を使って反転し、trueならfalse、falseならtrueへと変更しそれを再度BGMSettingsに入れます。
その後はInitializeOptionSettingsメソッドとやっていることは同じです。
OnPushSEButtonメソッドはSEボタンを押した時に呼び出すようにします。
こちらの場合はSESettingsを反転し、SESettingsが有効な場合は効果音を鳴らし、無効な場合は効果音を止めます。
OptionSettingのBGMButtonTextにはBGMButtonの子のテキスト、SEButtonTextにはSEButtonの子のテキスト、BGMAudioSourceにはBGMゲームオブジェクト、SEAudioSourceにはSEゲームオブジェクトをドラッグ＆ドロップして設定します。
ボタンを押した時にメソッドを実行する
最後にボタンを押した時にOptionSettingスクリプトのメソッドを実行するようにします。
ヒエラルキーでBGMButtonゲームオブジェクトを選択し、ButtonのOnClickの＋を押し、オブジェクトを設定する部分にヒエラルキーのCanvasをドラッグ＆ドロップし、OptionSettingスクリプトのOnPushBGMButtonメソッドを実行するようにします。
同様にSEButtonのButtonのOnClickのゲームオブジェクトにCanvasをドラッグ＆ドロップし、OptionSettingのOnPushSEButtonメソッドを実行するようにします。
今回はボタンのOnClickにボタンをクリックした時に実行するメソッドを設定していますが、スクリプトから実行するメソッドを設定することも出来るのでそちらにしたい場合は以下の記事を参照してください。
音声を鳴らす場合はスクリプトから該当するAudioClipを設定したAudioSourceコンポーネントのPlayメソッドやPlayOneShotメソッド等を鳴らしたい場面で呼び出すことになりますが、その際にif文でOptionSettingスクリプトのBGMSettingsやSESettingsプロパティの値を確認し、trueであれば音声を鳴らすという感じにすると設定によって鳴らすか鳴らさないかということが出来ます。
終わりに
今回はOptionSettingスクリプトで設定値を持っているのでシーンをまたいだ時に面倒なことになります。
シーンをまたいで音声の設定値を使う場合は設置値をScriptableObjectで作ったファイルデータとして持っておいて、OptionSettingsではそのファイルをインスペクタで設定出来るようにしておくか、OptionSettingスクリプトを取り付けたゲームオブジェクトがシーンを移動した後も残るようにしておくなどのやり方があります。
この辺のことは
等を参考にしてください。
