i-school - パズルゲーム 学習内容

製作物の概要


 指定時間内に同じ絵柄の干支を繋げて消して、より高い点数の獲得を目指す、2Dパズルゲームを製作することが出来ます。
スマホ画面で動作します。干支を繋げる操作はスワイプ操作です。このゲームは Canvas ゲームオブジェクト内で作成を行います。

 この教材をすべて完成させると、以下のような画面構成を持つゲームになります。

干支の選択画面(発展編で製作します)


パズルゲーム画面(基礎編で製作します)


リザルト画面(基礎編で製作します)



 このゲームの素材にはイラストAC様の素材を利用させていただいております。
イラストAC様
https://www.ac-illust.com/


 またスクリプトの一部については、ひよこのたまごさまの記事を参考にさせていただいております。
ひよこのたまご様
【Unity6】Unityで本格パズルゲームに挑戦!
https://hiyotama.hatenablog.com/entry/2015/05/18/0...


1.干支の選択


 ゲームを起動すると、白い画面から徐々にフェイドインします。干支が順番に生成されて、1つを選択することができます
ゲームスタートボタンを押すとゲームが開始されます
https://gyazo.com/553806dcc6d6ba8a7798c9d8f4cc36fe

2.ゲーム開始


 5種類の干支が大量に生成されます。1つは選択した干支、残る4つはランダムな干支です。
同じ絵柄の干支を3つ以上つなげると消えます。最初に選択していた干支を消す点数が高くなります。
https://gyazo.com/a6b94dc25e8284a83c2ab6cbb5ceb18a

シャッフルボタンで、干支がシャッフルされます。
https://gyazo.com/a69ccb76f4821e09623ff022346c72e9

(中級者以上 発展編)
干支を消すとスキルのポイントがたまり、ポイントが満タンになるとスキルボタンがおせるようになります。
スキルを使うと、画面内の最も多い絵柄の干支がすべて消えます。
https://gyazo.com/f96f6165597bd0b124684b2af1a8877c

3.リザルト表示


残り時間が0になるとゲーム終了し、リザルト(結果発表)が表示されます
https://gyazo.com/722b03e4550bb487a7f6a062036fb503

4.初期状態へ戻る(ゲームサイクル化)


リザルト表示後に、画面タップを誘導するメッセージが表示され、タップすると徐々に白い画面へとフェイドアウトし、最初の【1】の画面に戻ります。
https://gyazo.com/5321d7da08e959dc2ef31b26f3329da2


学習内容


 2Dパズルゲームを製作していくことで、習得することを目標とする技術を記載しておきます。

・Canvasのみでゲーム製作を行う方法について。
・MonoBehaviourを継承していないEnumについて。
・シングルトンのデザインパターンを利用したクラスの作成方法と利点、使い方について。
・シーン遷移を行わずにゲームサイクルを生成する方法について。
・DoTweenの使用方法について。SequenceやOnComplete、AppendCallBack、Ease、Loopsなどの使用方法について。
・Tweenerの説明と使用方法(主にKill)について。
・コルーチンの使用方法について。yield return と while文を利用した待機処理について。
・IEnumerator型変数を使用したコルーチン処理の使用方法について。
・Dictionaryの説明と使い方について。
・Listの説明と使い方について。
・foreach文の使い方とコレクションの検索方法について。
・キャストの説明と使い方について。
・1つのプレファブから複数の同じ種類のゲームオブジェクトを生成して、その値を変更する方法について。
・Textプレファブの利用方法について。
・GridLauoutGroupの使い方について。



発展・応用編として、以下の技術についても学習します。

・ネスト・クラスとコンストラクタ・メソッドの実装例
・Linqの説明と使用方法の実装例。ラムダ式の記述方法について。
・Dictionaryとforeachを組み合わせた検索を行い、特定の値を抽出する方法の実装例
・UnityEventの登録方法と使用方法の実装例
・幕間のトランジション処理(フェイドイン/フェイドアウト)の実装例
・SoundManagerによる音源管理の方法

自由な設計を


 今回はゲームの素材として干支のイメージを利用していますが 他に使用したい画像があればそれを使って自由に作成してください。

 例えば、フルーツを使ってもいいと思います。


https://gyazo.com/e339ff08dcf622b9c60028c40e1e8897


https://gyazo.com/db5a12a0599a1c83988680d4485e093f


https://gyazo.com/31e4a378c6b04ce2e6e818a5f9b31efc



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

 次は 設計を考える です。