Unityに関連する記事です

 タイトルシーンにステージ選択機能を追加します。



発展20 ーステージ選択機能ー


<実行動画 .押璽爐鮑能蕕乏始した場合 => 1つだけボタンが生成される>
動画ファイルへのリンク


<実行動画◆.リアしたステージがある場合 => クリアしたステージと、次のステージのボタンが生成される>
動画ファイルへのリンク



設計


 前回の手順でクリアしているステージの情報をステージの番号で管理する機能を追加しました。
この機能を活用することで、この手順では、ゲームの進行に利用するステージ選択の機能を設計して実装します。


大きく分けて、2つの機能が必要になります。

 1.まだステージを1つもクリアしていない状態 => ゲームを開始した際の状態です
 2.1つ以上のステージをクリアしている状態 => ゲーム内でステージを1つ以上クリアしている状態です

 1の機能については、ステージ選択機能として、最初から挑戦するステージについては選択できる状態になっている必要があるためです。
ゲームを開始したら、1番最初のステージは選択できるようにするためです。

 2の機能については、最初のステージをクリアして以降の機能です。この場合、クリアしているステージの他に、次に挑戦するステージを選択できる状態にする必要があります。

 よって、この2つの機能を満たす処理のロジックを考えて、それをプログラムとして組み立てていくことが求められます。

 どのような設計ロジックにすればいいのかを検討してみてください。
なおボタンは最初からゲーム内に設置はしておかないで、選択できるステージの数だけをその都度確認して、必要なものだけを生成をしていくようにします。


Canvas を作成する


 ステージ選択にはボタンの機能を利用します。
そのため、タイトルシーンには新しく Canvas ゲームオブジェクトを配置します。
解像度など、基本的な設定は忘れずに行うようにしてください。

 下記は参考画像です。この通りに製作する必要はありません。
自分のイメージしているタイトルシーンとボタンの表示になるようにレイアウトを検討しましょう。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas で作成します。

 他のゲームオブジェクトの子オブジェクトにならないようにしてください。
一緒に EventSystem ゲームオブジェクトも作成されます。


ヒエラルキー画像



インスペクター画像



 以上でこの手順は完成です。


ボタンの配置位置用のゲームオブジェクトを作成する


 続いて、ボタンの生成位置を設定するためのゲームオブジェクトが必要になります。
設計部分でも説明があったように、ボタンは最初から設置はしておかないで、選択できるステージの数だけ生成をしていくようにします。

 生成するためには生成する位置の情報が必要になりますので、そのためのゲームオブジェクトを作成しておきます。
同時にこのゲームオブジェクトは生成されたボタンの親オブジェクトになるため、ボタンのフォルダ役としても機能します。

 Canvas ゲームオブジェクトの子オブジェクトとして CreateEmpty して作成します。
名前は Content のようにわかりやすい名称にしてください。

 ボタンを等間隔や設定したサイズで並べたい場合には、LayoutGroup コンポーネントを活用することを検討しましょう。
どの種類の LayoutGroup コンポーネントを利用するかも自分で検討してみてください。



 こちらも参考画像です。

ヒエラルキー画像



インスペクター画像



Sceneビュー画像



 以上でこの手順は完成です。


ボタンを作成する


 ボタンの配置位置のゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成します。
名称も分かりやすい名前に変更しておきましょう。

 下記の画像は参考例です。ボタンの色やフレームなどは任意のものに設定してください。


ヒエラルキー画像



インスペクター画像



Sceneビュー画像




 子オブジェクトとして Text ゲームオブジェクトもあります。
ここにはステージの名称が表示されます。フォントやサイズなどは任意ですが。表示したい文字の長さを検討して調整を行ってください。
文字が大きすぎたり、表示する幅が狭すぎたりすると、文字は表示されません。


インスペクター画像


 以上でこの手順は完了です。


 ボタンを複製して、複数のボタンが並んだ際にどのようなレイアウトになるかを確認しておいてください。
その後、最初にあったボタン以外の複製した各ボタンは削除しておいてください。


StageButton スクリプトを作成する


 ボタンのゲームオブジェクトにアタッチし、ボタンの制御を行うためのスクリプトを作成します。
ボタンを押した際の処理、画面に表示するステージの名前などの設定を行います。

 また現在は1つのステージにしか遷移しませんが、stageNo 変数を活用することで、指定したステージへの遷移を行う処理を記述できます。
これも自分で考えて書いてみてください。


StageButton.cs

<= クリックすると開きます


 スクリプトを作成したらセーブします。


ボタンのゲームオブジェクトに StageButton スクリプトをアタッチして設定を行い、プレファブにする


 ボタンに StageButton スクリプトをアタッチして、インスペクターから必要な情報をアサインしてください。


インスペクター画像



 以上で設定は完了です。
設定が完了したら、プレファブにして、ヒエラルキーからは削除 しておいてください。


Title スクリプトを修正する


 ゲームの実行に合わせて、クリアしているステージの情報を元に、ステージ選択用のボタンの生成を行う機能を追加します。

 ボタンの生成にはボタンのプレファブを利用し、そのボタンのプレファブにアタッチされている StageButton スクリプトにステージの番号などを設定して利用します。
このようにすることで、1つのプレファブを異なるボタンとして機能させることが出来るようになります。

 何回か学習している手法ですので、どのような変数や処理があれば、該当するボタンを生成することができるのかを考えてみてください。
また生成する際には、位置の情報も必要になります。全体像をイメージしてから、最初から最後までの処理の流れを考えていくといいでしょう。


Title.cs

<= クリックすると開きます


 スクリプトを修正したらセーブします。


<処理を読み解く>


 Title スクリプトに記述した処理はどのような内容になっていますか?
しっかりと処理を読みなおして、どのような処理によってボタンが生成されるのか、
なぜ、クリアしたステージの情報を使うことで、次のステージの情報の設定されたボタンが生成されるのか、
常に、なぜなのか? という疑問を持って処理の内容を読み解くようにしてください。

 そして処理の内容を日本語にしてコメントを記述してください。
処理が読み解けていればコメントを書くことが出来ます。


Title ゲームオブジェクトの設定を行う


 Title スクリプトに新しい変数を追加しているので、そちらに必要な情報をアサインしてください。


インスペクター画像



 以上で設定は完了です。


ゲームを実行して動作を確認する



タイトルシーンに必要なゲームオブジェクトがあるかを確認してください。
例えば、GameData ゲームオブジェクトがないと、ステージの情報が取得出来ませんので、メインシーンでプレファブにしてこちらのヒエラルキーにも配置してください。
BGM を鳴らしているのであれば、SoundManager ゲームオブジェクトも必要です。


ヒエラルキー画像(参考です。ここには SoundManager ゲームオブジェクトはありませんが、自分のプロジェクトに合わせてください)




 ゲームを実行する前に、どのような処理が実行されて、どういった部分の制御を確認すればいいのかをしっかりと認識しておきます。
その上でゲームを実行してデバッグを行ってください。

 Title スクリプトにはデバッグ用の処理が記述されていますので、クリアしたステージの番号を自由に設定できます。
この機能も活用して、最初にゲームを実行した際に表示されるボタンと、クリアしたステージの番号と次のステージの番号のボタンが表示される機能と
両方の部分のチェックを行ってください。


<実行動画 .押璽爐鮑能蕕乏始した場合 => 1つだけボタンが生成される>
動画ファイルへのリンク


<実行動画◆.リアしたステージがある場合 => クリアしたステージと、次のステージのボタンが生成される>
動画ファイルへのリンク



 これからゲームを作っていく際には、これらのチェックポイントや正誤の判定はすべて製作者に委ねられます
教材がある間はよいですが、自分のオリジナルのゲームにはこういったチェックする内容はすべて自分で考える必要がありますので
今から物事を考える癖をつけるようにしていってください。



 以上でこの手順は終了です。

 次は 発展21 ーセーブ・ロード機能の実装  です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます