パズルゲームの設計を考える
最終更新：
orika_ex_miyako 2022年03月24日(木) 15:19:04履歴
２Ｄパズルゲームの設計を考える 
Unityのバージョンは2020.3.xf1、あるいは2021.1.xf1にて製作を行う前提です。
ゲームのジャンルは２Ｄゲーム、スマホで遊ぶパズルゲームです。
基礎設計が出来上がれば、あとはイラストを自由に差し替えたり(干支以外のものに変更)、スキルを追加したりすることで
オリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。
少なくても以下の内容について、詳細な設計を考えていく必要があります。
・ゲーム性（Canvasのみでゲームを製作。タップのみでゲーム進行。スワイプでパズルゲーム内の操作。制限時間内にハイスコアを目指すための仕組み作り、など） ・画面のデザイン（UIの配置。ゲームの世界観に沿ったUIのデザイン、など） ・必要なシステム・機能（スワイプをしてゲーム画面内のゲームオブジェクトを操作する方法。干支を並べて一覧表示しタップすることで選択する方法。ゲーム内のボタンをタップすることでスキルやシャッフルといった機能を実行できるようにする方法、など） ・ゲームシーンは１つだけ用意して、その中ですべてのゲーム内の処理を行う方法 ・１つプレファブからの異なる干支を作成する方法（プレファブとListデータの利用方法、など） ・演出（DoTweenによるアニメーション。画面のエフェクト、など） ・ゲームのサイクル（制限時間内を設定し終了と同時にリザルトを表示する。リザルトからまた干支の選択に戻る、など）
それでは１つずつ設計を行っていきましょう。
・ゲーム性
１．Canvasのみでゲームを製作する
２Ｄのパズルゲームということですので、今回はゲームシーンの製作については、Canvas内のみでゲームを製作するようにします。
そのため、ヒエラルキー上にはまずCanvasを用意し、その中に必要なゲームオブジェクトを配置していく手法でゲームを製作していきます。
多くのスマホゲームで利用させているデザイン手法ですので、UIの設置や画面の作り方などを学ぶことも出来ます。
２．基本動作はタップのみでゲームを進行する
干支の選択やゲームのスタートなど、パズル以外の場面においては、すべて1回の画面タップでゲームが進行するような設計にします。
・干支の選択（1体を選択してタップ1回 => タップした干支が使用する干支に設定される） ↓ ・ゲームスタート（スタートボタンをタップ1回 => 干支の選択を終了し、パズルゲームが始まる） ↓ ・パズル（パズル操作はスワイプだが、スキルの使用やシャッフルの使用はタップ1回で行える） ↓ ・リザルト表示（リザルト表示後、タップ1回 => 干支の選択に戻る）
上記のような挙動でゲームが進行していくように実装手順を考えます。
３．パズルゲームはスワイプで操作を行う
ゲームのパズル画面には大量の干支が並んでいますので、同じ絵柄の干支を隣合う干支通しでスワイプしてつなげていくことで
パズル画面から消す干支を選択するようにします。
１つ前の干支に戻した場合には選択していた干支は選択されていない状態に戻るようにし、スワイプの途中でも別の干支へとつなげられるようにします。
選択中の干支は色を変化させて、他の干支と違う状態であることをユーザーに伝えるようにします。
４．制限時間内にハイスコアを目指すための仕組み作り
1回のゲームプレイは60秒(設定可能)とし、その時間内でどれだけたくさんの干支を消せるかを競います。
１つ消すごとに点数が加算されていき、選択している干支を消した場合にはより多くの点数が入ります(設定可能ですが、基本値は通常の3倍の設定)
またスキルを使用することによって、画面内にある最も数の多い干支が1種類すべて消せるため、これを上手く使ってもらうように設計します。
まとめて一気に消せるため爽快感が非常にありますが、使用できる回数が多すぎても大味になりますし、少なすぎても物足りなさが残ります。
ゲーム終了後にはリザルト(挑戦結果)が表示され、今回の獲得した点数と消した干支の数を表示することで、この値が次に向けての指針作りにもなっています。
(リザルトへの表示内容は自由に追加しましょう。スキルを使用した回数や、最も多く消した種類の干支、など)
この辺りのバランスを調整して（レベルデザインを行って）何回も遊んでもらえるような仕組みを作ります。
・画面のデザイン
１．UIの配置
Canvas内にてゲームを製作するようになりますので、各画面に表示・設置するゲームオブジェクトについて設定をしておく必要があります。
・干支の選択時 : １つのプレファブから12個分のボタンを用意して、それを自動で生成して順番に並べて表示する。配置をバランスよく考える。 スタートボタンの配置場所、スキルの説明場所などを、背景のイメージは目立ちすぎないものにする、などわかりやすい配置を心がける ・パズルゲーム時 : 干支が配置されるメインの部分(スワイプできる部分)、とそれ以外の上下のUIの部分(スコアや点数表示、スキルなどのボタン配置)とを分けて考える。 ・リザルト表示時 : スコアなどの表示部分と、背景部分、タップ表示など
基本的にはこれらのUIがあれば問題ないでしょう。
２．ゲームの世界観に沿ったUIのデザイン
各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。
必要なシステム・機能
１．スワイプをしてゲーム画面内のゲームオブジェクトを操作する
パズルゲームですので素早い操作が求められます。スワイプの反応速度やつながりやすさはユーザー目線で考えていきましょう。
２．干支を並べて一覧表示しタップすることで選択する
プレファブの機能とクラスの設計とを上手く組み合わせて一覧表示をさせます。またプレファブ自体をボタンにしておくことでタップへの反応も対応できます。
３．ゲーム内のボタンをタップすることでスキルやシャッフルといった機能を実行できるようにする
発展課題として追加する機能です。ゲームをより面白くする機能ですので、これ以外にも考えてみましょう。
シャッフルボタンを押すと一定時間のボタンを押せない時間を設定します。これにより連打を防ぎます。
４．ゲームシーンは１つだけ用意して、その中ですべてのゲーム内の処理を行う
複数のシーンは作成せずに１つのシーンだけですべての処理を行うように設計を行います。
干支の選択、パズルゲーム、リザルト表示の処理を順番に解決していくように実装を行います。
これはあとで別シーンに分割も可能ですし、各部分をプレファブして分割することも可能です。
５．１つプレファブからの異なる干支を作成する（プレファブとListデータの利用方法、など）
干支の選択時には、12個の干支を表示する必要がありますが、すべて個別に作成するのではなく、元となるプレファブを１つ用意しておいて
それらを生成しながら、各干支としての役割を与えられて画面に配置されるような設計にします。
パズル画面で生成される干支も同様です。１つのプレファブを用意して、それを5種類の干支のふるまいをさせるようにしていきます。
演出（エフェクト）
１．DoTweenを使用してアニメーション演出をする
DoTween（ドットゥイーン）とは無料アセットの１つで、広く使われているTween（トゥイーン）系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。
またDoTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。
特に今回は文字送りの部分にDoTweenの持つ機能の１つであるDoTextという機能を使って、1文字ずつ表示したり、一気に表示したりする表現を実装していきます。
２．画面のエフェクト
画面をフラッシュさせたり、暗転させたりといったものだけではなく、キャラクターを揺らしたり、文字を一部だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらはシナリオに応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。
ゲームのサイクル
１．ゲームの流れ
何回も繰り返し遊んでもらうような設計になっているため、明確なエンディングはありません。
干支の選択からはじまって、最後にはまた、干支の選択に戻るようなサイクルを作成します。
設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にもシナリオによって用意するべきものがあるのであれば、それらも考えておきましょう。
以上でこの手順は終了です。
次は 実装手順を考える です。
コメントをかく