カテゴリ: ClickGame作成 Unityゲーム開発

2022年3月31日

Unityで簡単なクリックゲーム作成【最終回：UIとGameManager】

Unity初心者の方向けに簡単なクリック連打ゲームの作り方を紹介しています。
シンプルなミニゲームですので色々改造できると思います。

今回で5回目、最終回となります。
前回まででゲームの基本的な部分が出来ましたので、UI周り、タイマー処理、ゲームオーバー処理等を実装していきます。

このようなゲームを想定しています。PCのみとなりますがプレイできます。

Paint it black

このゲームは白い地面を黒く塗りつぶすのが目的のゲームです。操作はマウスのみです。

UIの配置

ではまずゲーム画面に必要なものを置いていきましょう。
ゲーム中必要なものは何％塗りつぶしたかがわかるTextと残り時間を示すタイマー的なもの。
ゲームオーバー時に必要なものはゲームオーバーの用のパネルとリトライ用のボタンでしょうか。
それらを配置していきます。

パーセント用テキスト作成

Hierarcy上で右クリックしUI->Textと選択し名前をRateTextとします。

自動的にCanvasとEventSystemが生成されます。
このタイミングでCanvasの設定もしておきます。
Render ModeをScene Space -CameraにUI Scale ModeをScale With Screen Sizeに変更しXを960、Yを540にします。

つづいて先程つくったRateTextの調整をしていきましょう。
今回はPosXが-300、PosYが200、カラーは白、BestFitにチェックを入れTextを000％として完了です。
画像はColorが見切れていますが一番下の赤枠のところで設定しています。

GameViewではこのように見えてると思います。

ゲームオーバ用パネルの作成

次にGameOver用のPanelを作りましょう。
先程のCanvasの子要素にPanelを作ります。名前はGameOverPanelにします。

さらにGameOverPanelの下にゲームオーバーと表示するTextとリトライ用のボタンを設置します。
GameOverTextとRetryButtonとしました。

それぞれのInspectorは下のようになっています。
【GameOverPanel】

【RetryButton】

【GameOverText】

注意点としてGameOverPanelのRectTransformでLeft,Top,Right,Bottomが-2となっていますが、これをしておくことで画面の端で切れる事なく全体を覆ってくれます。

GameViewではこのようになりました。
GameOverPanelはゲームオーバーの時に表示させますのでInspectorの一番上にあるチェックを外し非アクティブにしておきましょう。

タイマーUIの作成

ゲームの制限時間用のUIを忘れていました。
これも準備していきます。
Canvasの子要素にImageを追加します。
TimerBaseとし、PosYを200、Widthを300，Heightを30にしました。
続いてTimerBaseの子要素にタイマーの動く部分となるImageを設置します。
TimerInnerとしました。
色は解りやすく赤にし、大きさを親要素であるTimerBaseと同じにします。
Altキーを押しながらAnchorPresetsの右下をクリックすると親と同じ大きさになります。

次に親要素のTimerBaseにSliderコンポーネントを追加します。
追加したらInteractiveのチェックを外しTransitionはNoneにしておきます。
そしてFillRectに子要素のTimerInnerをアタッチしましょう。
これでValueを操作するとバーが伸び縮みします。
今回はValueの値は0から1までの範囲とします。

GameManagerの作成

これでUIの準備が整いましたのでこのゲームの進行を管理するGameManagerを作成していきます。
Hierarcyで空のゲームオブジェクトを作成し、名前をGameManagerとします。
これにスクリプトを追加しましょう。
ScriptsフォルダにGameManagerというC#スクリプトを作成しHierarcy上のGameManagerに追加します。

つづいてこのGameManagerの関数や変数には他のゲームオブジェクトからアクセスさせたいのでstatic化しておきます。

こうすることで今後GameManager内のpublic変数やpublic関数にアクセスする際に「GameManager.I.変数名」や「GameManager.I.関数名」で呼び出すことができます。

ここまで出来たらGameManagerにどんな機能をもたせるか考えます。
下のような機能があれば良いでしょうか。

黒く塗った比率の計算
タイマーの処理
ゲームオーバーの処理

これらの機能を順番に実装していきたいと思います。

白黒の比率の計算

まずRateTextをGameManagerで書き換えていきますのでUIが使えるようにします。
Text型の変数を用意し、SerializeFieldにしておきます。
HierarchyのGameManagerを選択し、InspectorからRateTextをアタッチしておきましょう。

次に比率を求めるために必要なものを考えます。
全体のwhiteChipの数が必要です。
そして黒く塗られた数をカウントしておく必要があります。
全体の数を保持しておく変数をmapChipsCount、黒く塗られた数用の変数をturnCountとしました。

それらを使い計算する関数も作成しておきます。
UpdateRateという関数をつくりました。
ソースコードはこのような感じになりました。

ちなみにUpdateRateの中身で比率を出していますがToStringで”P”とパラメーターを渡すことでパーセントの表示になります。

ではまず全体のwhiteChipの数を取得しておきましょう。
MapControllerのStart関数内でwhiteChipを敷き詰めるループをさせていますが、その後が良さそうです。

次にturnCountの方も取得していきます。
こちらは黒く塗られたタイミングで増えていきます。
どのタイミングで増やすか。
BlackChipControllerのTurnColor関数内で処理を追加すれば良さそうです。

これで全体の盤面の数とひっくり返って黒くなった数を取得できたのでUpdateRateを呼び出しRateTextを更新していきましょう。
再びMapControllerに戻りUpdate関数内のクリックされた処理内に記述してみます。

では実際にゲームを起動して確認してみます。

このような感じで比率が変わっていきました。

タイマー処理

続いてタイマーの処理を行っていきます。
このゲームでは制限時間を設定しますのでそれ用のfloat型の変数が必要です。
これはGameManagerのInspectorから設定したいのでSerializeFieldにします。
TimerBaseをアタッチしておきましょう。

またTimerBaseのSliderの値を変化させていきたいのでSlider型の変数を用意します。こちらもSerializeFieldにします。
今回は30秒としました。

経過時間用のfloat型の変数も用意しましょう。
最後にタイマーを計算する関数を用意し、Update関数内で呼び出してSliderの値を変化させていきます。
ここまででこのようなソースコードになりました。

_updateTimer関数ではフレーム毎の経過時間を足していき、制限時間で割って進捗を取得しています。
それをUpdate関数内で呼び出し、スライダーの値に代入しています。

では実行してみたいと思います。

タイマー用のバーが動いていくのがわかるかと思います。

ただこのままだとバーが制限時間いっぱいになっても黒い点は動くし、クリックもできてしまいます。
なのでゲームオーバーの処理を加えていきたいと思います。

ゲームオーバー処理

まずゲームのモードを設定します。
今回はゲーム中かゲームオーバーの2つあれば良いと思います。
これを列挙型で定義します。

そしてゲームオーバーになるタイミングはスライダーの値が1になった時です。
その時にゲームオーバーパネルを表示させ、gameModeをGAMEOVERにしてあげます。
GameOverPanelをアタッチするためにGameObject型の変数を用意、SerializeFieldにしてInspectorからアタッチしておきます。

GameManagerのUpdate関数内に処理を加えます。
更にゲームオーバーになったら黒い点とターゲットは動かないようにしたいです。
TargetControllerとMapControllerのUpdate関数内にも処理を加えます。
それぞれこのような感じになりました。

【GameManager】

【TargetController】

【MapController】

これで実験してみましょう。
30秒では長いので5秒にして実行してみます。

ゲームオーバーになったにも関わらず黒い点が最後移動中だったので目的地まで動いてました。
これを直します。
BlackChipControllerのコルーチンを修正します。

これでgameModeがGAMEOVERになったら黒い点も同時に止まります。

リトライボタンの実装

最後にゲームを再度プレイ出来るようにリトライボタンを作り込んで完成となります。
GameManagerに再度シーンを読み込む関数を作ります。
シンプルにRetryと命名します。
またシーンを扱うのでusingでSceneManagementを使えるようにしておきます。
最後にRetryButtonのInspectorからOnClick時に呼ばれる関数を設定して完了です。

GameManagerは下のようなソースコードになります。

RetryButtonのInpectorでOnClick時の処理を呼び出します。

このように再度ゲームを遊べるようになりました。

これでシンプルなクリック連打ゲームが完成しました。
もっと効率的な処理の書き方や、負荷対策、諸々なおしたほうが良い点があるかも知れません。
githubにこのゲームの内容を公開しておきますので、よかったらどんどん改良して面白いゲームを作ってみてください。
例えば黒い点をコバエにしてターゲットをハエたたきに変え、ハエたたきゲームでも良いですし、マウスホイールを使ってターゲットの拡大縮小して小さい時にクリックできたらハイスコアとか変化させていっても面白そうな気がします。