Unityでステージ選択からキャラクター選択をし、ゲームを開始する機能を作成する

記事内に広告が含まれています。

今回はUnityでゲームステージの選択→操作キャラクターの選択→ゲーム開始という流れを作ってみたいと思います。

ステージ1とステージ2を選択出来るようにし、キャラクターは3人から選んでその後ゲームを開始し、選んだゲームステージに選んだキャラクターを登場させるようにします。

今回の機能を作成すると以下のようなものが出来上がります。

シンプルな作りになっています。

スポンサーリンク

機能作成の流れ

今回の機能を作る流れを確認しておきます。

作成するシーンは

ステージ選択をするシーン
キャラクター選択をするシーン
ステージ1シーン
ステージ2シーン

の4つを作成します。

ステージ選択シーン→キャラクター選択シーン→ステージシーン

というシーンの移動がありますので、シーンを移動しても選択したステージ、キャラクターを保持しておく必要があります。

シーン間でのデータ共有をするにはそれらのデータを持つスクリプトを設定したゲームオブジェクトをシーンを移動しても残すか、ScriptableObjectを使ってデータを見えるかしてシーンごとにそのデータを取得出来るようにするなど色々な方法があります。

今回の場合はScriptableObjectを使ってゲームで使用するデータを保持して置くファイルを作成し、そのファイルを使ってシーン間でデータを確認出来るようにします。

そのデータを使用するスクリプトのフィールドにそのファイルを設定出来るようにし個々でアクセスしてもいいんですが、スクリプト毎に設定をするのも大変なので、そのデータを保持しているスクリプトを別途作成し、それをゲームオブジェクトに取り付け、そのゲームオブジェクトをシーンを移動しても残るようにしておいて、そのスクリプトが持つデータを確認したい時は必ずそのデータを持つスクリプトを介して取得するようにします。

長ったらしい説明で分かり辛いですが、要はデータを持つスクリプトはひとつだけにして、それを介してどのステージか?どのキャラクターか?を確認するということになります。

なお今回のUIの操作はマウスで選択するようにしていますので、ゲームパッドなどを使用してUIを操作する場合はそれ用に改造する必要が出てきます。

ステージ選択とキャラクター選択機能を作成

ステージ選択とキャラクター選択をする機能を作成していきます。

シーンの作成

まずは4つのシーンを作成します。

Assetsフォルダ内で右クリックからCreate→Sceneを選択し名前をSelectCharacterTitleとします。

同じように他3つのシーンを作成し、SelectCharacter、SelectCharacterStage1、SelectCharacterStage2とします。

シーンの名前は適当に付けてください。

Scenes In Buildにシーンを登録する

4つのシーンが出来たのでScenes In Buildにそれらのシーンを登録します。

Unityメニュー→Build Settingsを選択し開いたウインドウのScenes In Buildに4つのシーンをドラッグ&ドロップして登録します。

ステージとキャラクター選択シーンをScenes In Buildに登録する

SelectCharacterTitleシーンを一番初めに実行したいので一番上にドラッグしておきます。

全てのシーンで使用するデータの作成

全てのシーンで使用するデータをScriptableObjectを使って作成しておきます。

ScriptableObjectに関しては以下の記事を参照してください。

UnityのScriptableObjectを使う
UnityのScriptableObjectを使うと、メモリの節約が出来たり、シーン間の移動でデータを共有するのが簡単になります。この記事では基本だけを記述しています。

新しくMyGameManagerDataスクリプトを作成し、ScriptableObjectを継承するようにします。

UnityのAssetメニューからMyGameManagerDataファイルが作成出来るようにCreateAssetMenuアトリビュートを付けます。

今回データとして使用するのはステージとキャラクターのプレハブなのでそれらをフィールドで用意し、SetterとGetterでデータにアクセス出来るようにしておきます。

フィールドにはSerializeFieldアトリビュートを取り付けてインスペクタで設定出来るようにしていますが、これはデータの書き換えがインスペクタで確認出来るようにしているだけで付けなくても構いません。

OnEnableメソッドではSceneManager.GetActiveScene()で現在アクティブなシーンを取得し、その名前がSelectCharacterTitleシーンだった時だけデータの初期化をしています。

これはSelectCharacterTitleシーンが開始された時にデータを初期化したい為です。

他のシーンで初期化していないのは他のシーンだけで動きを確認したい時にデータがリセットされているとセットし直さないといけない為です。

これでファイルを作る準備が出来たので、Assetsフォルダ内で右クリックからCreate→MyGameManagerDataを選択します。

ステージ選択キャラクター選択機能全般で使うScriptableObjectのデータ作成

これでMyGameManagerDataファイルが出来ました。

ステージ選択キャラクター選択で使用するデータファイル

ステージ選択機能を作成する

次はステージ選択をする機能をSelectCharacterTitleシーン内に作成していきます。

SelectCharacterTitleシーンを開きます。

ヒエラルキー上で右クリックしCreate Emptyを選択し、名前をMyGameManagerとします。

新しくスクリプトを作成し名前をMyGameManagerとし、MyGameManagerゲームオブジェクトに取り付けます。

MyGameManagerスクリプトはシーン全体で使用するMyGameManagerスクリプトを保持します。

staticでmyGameManagerを宣言しているので、このスクリプトは共有されます。

myGameManagerDataはMyGameManagerDataファイルをインスペクタで設定出来るようにします。

AwakeメソッドでmyGameManagerがnullの時に自身のスクリプトをmyGameManagerに入れ、DontDestroyOnLoadを使って他のシーンに遷移してもこのスクリプトが設定されたゲームオブジェクトMyGameManagerゲームオブジェクトは残るようにします。

既にmyGameManagerが設定されていれば自身のスクリプトが設定されたゲームオブジェクトを削除します。

これは全てのシーンにこのシーンで作成したMyGameManagerスクリプトが設定されたMyGameManagerゲームオブジェクトを配置しますが、他のシーンから遷移してきたときにこのシーンのMyGameManagerゲームオブジェクトを削除し、MyGameManagerゲームオブジェクトは常に一つしか存在しないようにする為です。

全てのシーンにMyGameManagerゲームオブジェクトを配置するのはそれぞれのシーン個別で機能を確認する時の為です。

GetMyGameManagerDataメソッドは自身が持つMyGameManagerDataを返します。

これでMyGameManagerDataのデータを確認するには必ずMyGameManagerゲームオブジェクトのMyGameManagerスクリプトのGetMyGameManagerメソッドを介す必要があります。

MyGameManagerゲームオブジェクトのMyGameManagerスクリプトのMyGameManagerDataに先ほど作成したMyGameManagerDataファイルを設定しておきます。

シーン遷移スクリプトの作成

シーン遷移処理を行うSceneTransitionスクリプトを作成します。

新しくスクリプトを作成し、SceneTransitionという名前にし、MyGameManagerゲームオブジェクトに取り付けます。

フィールドでMyGameManagerDataを保持出来るようにします。

StartメソッドでFindObjectOfTypeを使用してMyGameManagerスクリプトを取得し、GetMyGameManagerDataメソッドを使ってMyGameManagerDataを取得します。

GoToOtherSceneメソッドは個々のステージ選択ボタンを押した時に引数でどのステージなのか?という文字列を受け取りそのシーン名をMyGameManagerDataのSetNextSceneNameメソッドでデータを設定しています。

その後にキャラクター選択のシーンであるSelectCharacterシーンに遷移させます。

ステージ選択ボタンの作成

次にステージ選択ボタンを作成します。

ヒエラルキー上で右クリックからUI→Buttonを選択し、名前をStage1とします。

Stage1の子要素のTextを選択し、インスペクタのTextにStage1と入力します。

Stage1を選択した状態でCtrl+Dキーを押し複製したら名前をStage2とします。

Stage2の子要素のTextを選択し、インスペクタのTextにStage2と入力します。

ボタンの位置は適当に移動させます。

Stage1ゲームオブジェクトを選択し、インスペクタのOnClickの+を押しボタンがクリックされた時に実行するメソッドを設定出来るようにします。

None(Object)となっている部分にMyGameManagerゲームオブジェクトをドラッグ&ドロップし、No Functionとなっている部分をSceneTransitionスクリプトのGoToOtherSceneメソッドに設定します。

GoToOtherSceneメソッドに渡す引数にはSelectCharacterStage1を入力します。

ステージ選択ボタンを押した時に呼び出すメソッド設定

同じようにStage2ゲームオブジェクトを選択し同様に設定をして引数の部分だけSelectCharacterStage2とします。

これでSelectCharacterTitleシーンの作成が完了しました。

キャラクター選択機能を作成する

次はキャラクターを選択するSelectCharacterシーンを作成していきます。

キャラクタープレハブの作成

選択をするキャラクターはAnimatorControllerの設定やキャラクター操作スクリプト等を施し、Assetsフォルダにドラッグ&ドロップしてプレハブにしておきます。

キャラクターのアニメーションの操作やキャラクター移動スクリプト等は今回の記事とはまた別なので

Unityのアニメーションの切り替えシステムとスクリプト
Unityのアニメーションの切り替えシステムであるAnimatorControllerの設定とスクリプトからアニメーションを制御していきます。

Unityでキャラクターの移動をプログラミングしてみる
Unityで3Dキャラクターモデルを配置し、キャラクターをCharacterControllerの機能を使って移動させるようなプログラミングをしてみます。

等を参照し作成してください。

今回はスタンダードアセットのEthanを使ってAnimatorControllerの設定と移動スクリプトを取り付け、それをプレハブにしました。

違うキャラクターであることをわかりやすくする為Ethanのモデルのマテリアルを別にした他二人のキャラクターを作成しそれもプレハブにしました。

キャラクター選択で使用するキャラクタープレハブ

Ethan1は初期のマテリアルで、Ethan2はモデルに設定したマテリアルの色を赤にし、Ethan3はマテリアルの色を青にして作成しました。

それ以外のアニメーションとキャラクター移動スクリプトは同じものが設定されています。

今回の場合は選んだキャラクタープレハブがインスタンス化され登場されるのを確認するだけなので、キャラクターに見立てて適当なCube等をプレハブにしておくだけでもいいです。

キャラクター選択用ボタンの作成

次はキャラクター選択用ボタンを作成します。

ヒエラルキー上で右クリックからUI→Panelを選択し、名前をSelectCharacterPanelとします。

SelectCharacterPanelのインスペクタのAdd ComponentからLayout→Horizontal Layout Groupを選択し、取り付けます。

Horizontal Layout Groupコンポーネントは子要素のゲームオブジェクトを横に整列させる時に使用します。

Child AlignmentをMiddle Centerにします。

キャラクター選択ボタンを整列させるHorizontal Layout Group

キャラクター選択ボタンを押した時の処理を行うChooseCharacterスクリプトを作成しSelectCharacterPanelゲームオブジェクトに取り付けます。

gameStartButtonはゲーム開始ボタンを入れます。

StartメソッドではMyGameManagerDataを取得します。

また階層を辿ってGameStartボタンのゲームオブジェクトを取得します(GameStartボタンは後で作成します)。

GameStartボタンはキャラクターを選択するまで表示したくないので、SetActiveを使って非アクティブにしておきます。

OnSelectCharacterメソッドは個々のキャラクターボタンを押した時に呼び出し、そのキャラクターに対応したキャラクタープレハブを受け取りそれをMyGameManagerDataにセットします。

を実行しているのは以下のように選択したキャラクターのボタンが選択状態になったままになり一度何もない所でクリックしないと改めて選択状態に出来ない為、EventSystemのSetSelectedGameObjectでnullを設定し、選択しているUIをリセットしています。

選択したキャラクターボタンがおかしくなる

只これはボタンをマウスで選択するという前提の処理で、ゲームパッド等でボタンを選択する時は必ずどれかのUIが選択状態にないと出来ないので、ゲームパッドにも対応する場合はこの処理は削除してください。

ボタンの状態の遷移に関しては今回はあまり気にしていなかったのでいい加減な作りになっております・・・・((+_+))

一度どれかのキャラクターボタンを押したらゲームを開始出来る状態になるので、GameStartボタンをアクティブにします。

SwitchButtonBackgroundメソッドも個々のキャラクターボタンを押した時に呼び出し、押したボタンのBackgroundだけをアクティブにし、それ以外のボタンのBackgroundは非アクティブにし、選択したキャラクターがどれであるかをわかりやすくします。

SelectCharacterPanelを選択した状態で右クリックからUI→Panelを選択し、名前をCharacter1とします。

Character1のWidthとHeightを128にします(適当な数値を設定してください)。

キャラクター選択ボタンのサイズ設定

Character1を選択した状態で右クリックからUI→Panelを選択し、名前をBackgroundとします。

BackgroundのRectTransformのWidthとHeightを135とします。

Anchor PresetsでMiddle Centerを選択します。

ImageのColorを赤色にしておきます。

Backgroundはそのキャラクターを選択した時にそのボタンの回りに選択した事がわかるように表示する背景に使用します。

なので、最初は見えない状態にしておく為、名前の横のチェックを外しておきます。

キャラクター選択ボタンの背景

Character1を選択した状態で右クリックからUI→Buttonを選択し、名前をCharacterButtonとします。

CharacterButtonの子要素のTextは使わないので選択した状態でDelキーを押し削除します。

キャラクター選択ボタン用のスプライト作成

キャラクター選択ボタンに表示するスプライトを用意します。

今回は以下のような128×128画像を用意しました。

以下の画像は自由に使ってください。

キャラクター選択ボタン用のサンプルキャラクター画像1

キャラクター選択ボタン用のサンプルキャラクター画像2

キャラクター選択ボタン用のサンプルキャラクター画像3

上の3つの画像をUnityに取り込んだらインスペクタでTexture TypeをSprite(2D and UI)にします。

取り込んだ画像をスプライトにする

CharacterButtonのImageのSource ImageにEthan1を設定します。

またButtonのHighlighted ColorとSelected Colorを赤色にします。

これはマウスポインタがボタンの上に来た時と、ボタンを選択した時に赤色にする為ですが、ここら辺は適当に設定しております。

キャラクター選択ボタンのインスペクタの設定

ここまで出来たらCharacter1ゲームオブジェクトを選択した状態でCtrl+Dキーを2回押し、同じボタンを2つ複製します。

複製したものをCharacter2とCharacter3とします。

Character2とCharacter3の子要素のCharacterButtonのImageのSource Imageをそれぞれ該当するキャラクターのスプライトに変更します。

次にSelectCharacterPanelを選択した状態で右クリックからUI→Panelを選択し、名前をButtonPanelとします。

シーンビューでSelectCharacterPanelとButtonPanelのサイズを調整し、パネルが重ならないようにしておきます。

SelectCharacterPanelとButtonPanelが重ならないようにする

ButtonPanelを選択した状態で右クリックからUI→Buttonを選択し、名前をGameStartとします。

GameStartの子要素のTextを選択し、インスペクタのTextにゲームスタートを入力します。

GameStartボタンは最初は表示させないのでインスペクタで名前の横のチェックを外し最初は非アクティブにしておきます。

GameStartボタンに新しくGameStartButtonスクリプトを作成し取り付けます。

OnGameStartはGameStartボタンを押した時に呼び出すようにします。

シーンの遷移はSceneTransitionスクリプトに任せているので、SceneTransitionのGameStartメソッドを呼び出します。

SceneTransitionスクリプトにGameStartメソッドを作ります。

ここまでのUIの階層は以下のようになっています。

キャラクター選択のUIの階層

記事内では記載していませんが、別途説明文を表示するTextも表示されています。

ボタンを押した時に実行する処理を設定する

キャラクター選択ボタンとゲームスタートボタンが出来たので次はそれらのボタンを押した時に実行する処理を設定します。

まずはCharacter1の子要素のCharacterButtonのOnClickに設定をします。

設定の手順はステージ選択のボタンを押した時と同じように行っていきます。

OnClickの+を2回押し、None(Object)の所にSelectCharacterPanelをドラッグ&ドロップします。

No FunctionではChooseCharacterスクリプトのOnSelectCharacterメソッドとSwitchButtonBackgroundメソッドを指定します。

OnSelectCharacterメソッドに渡す引数にはキャラクター1用のプレハブ、SwitchButtonBackgroundメソッドに渡す引数はキャラクター1だとわかるように1の値を渡します。

キャラクター選択ボタンを押した時に実行する処理を設定

Character2とCharacter3の子要素のCharacterButtonも同じように設定し、個々のキャラクタープレハブとそのキャラクターの番号を渡すようにします。

次にGameStartゲームオブジェクトを選択しインスペクタのButtonのOnClickを設定します。

+を押してNone(Object)に自身に取り付けているGameStartスクリプトをドラッグ&ドロップし、No FunctionにOnGameStartメソッドを設定します。

SelectCharacterTitleシーンのMyGameManagerゲームオブジェクトをCtrl+Cキーでコピーし、SelectCharacterシーンのヒエラルキーでCtrl+Vキーを押して貼り付けます。

これでキャラクター選択機能が出来ました。

ステージ1とステージ2のシーンの作成

SelectCharacterStage1とSelectCharacterStage2はとりあえずキャラクターのプレハブをインスタンス化したときに乗れる床を作成しておきます。

それぞれのシーンのMain Camera等のそのシーンでしか存在しないゲームオブジェクトに新しくGameStartスクリプトを作成し取り付けます。

StartメソッドでMyGameManagerゲームオブジェクトで保持しているMyGameManagerDataを取得し、登場させるキャラクタープレハブをインスタンス化させています。

これで機能が出来上がりました。

終わりに

今回はMyGameManagerゲームオブジェクトをシーン遷移時に引き継ぐようにし、必ずMyGameManagerゲームオブジェクトに取り付けているMyGameManagerスクリプトからMyGameManagerDataを取得していますが、個々のスクリプトでMyGameManagerData型のフィールドを用意し個々のスクリプトのインスペクタで設定出来るようにすることも出来ます。

例えばGameStartスクリプトだと以下のような感じです。

個人的にはこちらの方がわかりやすいです(設定をする必要がありますが)。

でもたまに別のやり方もやっておかないとやり方を忘れてしまうので・・・・。

タイトルとURLをコピーしました