３Ｄダイビングゲーム 設計を考える
最終更新：
orika_ex_miyako 2020年12月21日(月) 10:05:04履歴
３Ｄダイビングアクションゲームの設計を考える 
Unityのバージョンは2019.4.xf1、あるいは2020.1.xf1にて製作を行う前提です。
ゲームのジャンルは３Ｄゲーム、スマホで遊ぶアクションゲームです。
基礎設計が出来上がれば、あとはモデルを自由に差し替えたり(キャラ以外のものに変更)、ステージ用の背景を変えたり、
新しいルールや機能を追加していくことでオリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。
少なくても以下の内容について、詳細な設計を考えていく必要があります。
・ゲーム性（ゲームシーンとCanvasでゲームを製作する、スマホでの快適な操作、ゴールまでにどれだけ花輪をくぐれるか、複数のカメラを切り替える仕掛け作り、など） ・画面のデザイン（UIの配置、ゲームの世界観に沿ったUIのデザイン、など） ・必要なシステム・機能（スワイプをしてゲーム画面内のプレイヤーを操作する、配置したボタンによってプレイヤーの姿勢やカメラを操作する、 ゲームの自動スクロール、など） ・１つのゲームシーンでタイトルなどはポップアップを用意して進行する方法 ・演出（DoTweenによるアニメーション、画面のエフェクト、タイミングに合わせてエフェクトを作成する方法など） ・ゲームのサイクル（ゲームの流れ、追加要素を設計して実装する、ステージ内の花輪の自動生成機能など）
それでは１つずつ設計を行っていきましょう。
・ゲーム性
１．ゲームシーンとCanvasでゲームを製作する
３Ｄアクションゲームですので、今回はゲームシーンとCanvasとを組み合わせて製作するようにします。
プレイヤーは空中からスタートし、地面方向に向かって常に自然落下している状態です。
地面部分には湖があり、そこにダイブするとゲームクリアです。
空中には花輪が設置されており、通過すると得点が入ります。
空中を移動しながらたくさんの花輪をくぐって通過し、多くの得点を獲得するというゲームです。
プレイヤーは姿勢を変更することができ、その際には落下速度が遅くなります。
このアクションを上手く利用して、見逃してしまいそうな花輪も集められるようになっています。
プレイヤーの操作は面白いか、アニメーションと同期しているか、キャラクターのアクションは魅力的か、など、
アクションゲームならではのゲームの要素を考えていく必要があります。
２．スマホでの快適な操作
スマホで遊ぶことを念頭に置き、シンプルな操作で快適に遊べるような設計を考えます。画面は横向き(Landscape)で考えます。
１．画面の左半分をスワイプで左右移動(上下は反応しない) ２．画面の右半分にボタンを２つ設置。１つをタップで姿勢の変更 ３．もう１つのボタンをタップでカメラアングルの切り替え
３のカメラのアングルは補助的な機能であるため、主に１・２の操作だけでゲームを遊べるようにします。
上記のような挙動でゲームが進行していくように実装手順を考えます。
３．ゴールまでにどれだけ花輪を集められるか
ゲームの構成は、縦方向に長いデザインになっています。
カメラはプレイヤーを後方から映している、いわゆる三人称視点でのカメラアングルを用います。
空中のスタート地点からゴールである湖の間の距離は自由に設計します。
また、その道中には等間隔、あるいはランダムに花輪を設置して、落下する際の獲得物、および移動の目標物として利用します。
姿勢の変更を上手く利用して、たくさんの花輪を通過してゴールへと到達するのが目的です。
障害物などはありません。またアイテムなどもありません。この部分は製作後に、自由に設計を改良して追加してください。
４．複数のカメラを切り替える仕掛け作り
基本的にゲーム画面としてのカメラの位置とアングルは、落下するプレイヤーを後方より追尾する、三人称視点になっています。
ここに補助的な機能として位置とアングルと切り替え機能を追加します。
この機能はゲームの進行には必須の機能ではなく、むしろおまけのような位置づけです。
ですが、落下中のプレイヤーの自撮りカメラのアングルなどは、他のゲームでは味わえない面白さを演出します。
機能的なデザインや有効性以外にも、無駄に思える要素がゲームを楽しくするということがありますので、それを学習します。
・画面のデザイン
１．UIの配置
Canvasを利用してUIを表示します。ゲーム中のスコア表示、プレイヤーと湖までの距離、姿勢変更用のゲージ表示、ゲームクリア後のリザルト表示などを制御します。
＜ゲーム時＞ 画面の４角にそれぞれ、スコア表示、ゲージ表示、ボタン表示、距離の表示を設置してメインのゲームの邪魔にならないようにする
＜リザルト表示時＞ クリア表示、リトライ用のタップを促す表示などを考える
他にも必要な場合にはロジックも考えて設計し、画面へ追加していきます。
２．ゲームの世界観に沿ったUIのデザイン
各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。
今回のゲームの世界観は、ペンギンのキャラクターに合わせて、ファンシーでかわいいデザインを採用しています。
そのためゲーム中に使用しているフォントもそのスタイルに沿ったフォントを採用しています。このフォントはゲーム製作に使用するアセットに含まれています。
＜フォント例＞
必要なシステム・機能
１．スワイプをしてゲーム画面内のプレイヤーを操作する
画面の左半分側をスワイプに反応するようにし、スワイプした距離に合わせて空中のプレイヤーを上下左右に移動させます。
プレイヤーは画面の中央にいますので、スワイプ時にプレイヤーが指で隠れてしまうという部分は心配しなくて大丈夫です。
こういったユーザービリティはいつも考えて設計をする必要があります。
２．配置したボタンによってプレイヤーの姿勢やカメラを操作する
画面の右半分側にはボタンを２つ設置し、タップすることでプレイヤーの姿勢を変更します。
姿勢の変更にはゲージが満タンにならないとボタンを押せないように制御しています。
＜動画 ゲージが満タンになるとボタンの色が変わって押せるようになる＞
https://gyazo.com/8b3a68d46aef11635b939af4667ee807
常に押せてしまうと落下速度が自由になってしまうため、的確なタイミングを見極めて押すことを求める設計にします。
もう１つのボタンはカメラの位置とアングルを押すたびに切り替えます。初期位置は三人称視点、２つ目は一人称視点、３つ目は自撮り視点です。
ゲームの進行には関係ありませんが、一人称視点にすることで実際のダイビング風の視点で遊んだり、自撮り視点にして様子を見たり出来ます。
３．ゲームの自動スクロール
ゲームが開始されると、ゲーム画面が上空から強制的に下方向へスクロール（移動）します。
これはプレイヤーのゲームオブジェクトが重力によって自然落下を行うように、Rigidbodyコンポーネントを利用しています。
また空気抵抗の要素もこのRigidbodyコンポーネントを利用することにより実装しています。
１つのゲームシーンに必要なポップアップを用意してゲームを進行する方法
今回のゲームでは１つのシーンを用意して、リザルトなどをそのゲームシーン上に表示させることでシーン遷移を行わずに進行させる方法を取っています。
その際、リザルト表示については専用のゲームオブジェクトを作成後、ゲームの進行状態に合わせて、それらを適宜なタイミングで生成することによって
ゲーム開始 → ゴール到達 → リザルト表示を制御しています。
また今回はタイトルシーンやポップアップは用意していませんので、自由に設計をしてみましょう。
演出（エフェクト）
１．DoTweenを使用してアニメーション演出をする
DoTween（ドットゥイーン）とは無料アセットの１つで、広く使われているTween（トゥイーン）系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。
またDoTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。
特に今回は多くの部分でこの機能を利用します。
＜動画 姿勢変更ゲージの演出（徐々に溜まって徐々に減っていく）＞
https://gyazo.com/6fa5bbbac826f70695c85436494004ec
＜動画 姿勢変更ボタンがゲージの状態や姿勢の状態に合わせて回転する演出＞
https://gyazo.com/8b3a68d46aef11635b939af4667ee807
＜動画 花輪の演出（くるくると回転している）＞
https://gyazo.com/a74793738a12a6cd68f75228cb5506f9
＜動画 花輪の獲得演出（花輪を通過した際に花輪がプレイヤーに集まり、最後に光のエフェクトが発生する）＞
https://gyazo.com/c92432314f8d34e7d2262f500486fe1d
＜動画 クリア時の演出（着水時に水しぶきのエフェクトを発生させ、水面にペンギンが顔を出す）＞
https://gyazo.com/a58df36b13f4df4c83c970d0b96ae534
２．画面のエフェクト
画面をフラッシュさせたり、暗転させたりといったものだけではなく、キャラクターをアクションさせたり、画像を一瞬だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらは場面に応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。
今回はゲージの満タン時の演出、リザルト表示などに対して、要所要所でこの演出を追加しています。
＜動画 水面のアニメーション（ゆらゆらと常時動いて、影なども水面に投影する）＞
https://gyazo.com/72519f5e513f71e7bfcfd398b19ba6ff
＜動画 プレイヤーのアニメーション（空中で姿勢を変えると、姿勢を保つようにバタバタする）＞
https://gyazo.com/eb99c7c6aa004610ccf0c1e31bf514b9
＜動画 姿勢変更ゲージが満タンにチャージされるとゲージがキランと光る＞
https://gyazo.com/a541a5e04606be4643d4896dd88b0df2
３．タイミングに合わせてエフェクトを作成する方法
今回のゲームでは無料のアセットのエフェクトをいくつか利用し、生成のタイミングや制御の方法などを学習します。
プレイヤーが湖に着水する ↓ 水しぶきのエフェクトをプレファブから生成する。その間、プレイヤーであるペンギンのキャラは一旦見えなくする(水中にもぐったように見せる) ↓ しばらくしてから、ペンギンが水面に顔を出す
このように演出を設計し、その順番通りに動くように制御を行っていきます。
ゲームのサイクル
１．ゲームの流れ
何回も繰り返し遊んでもらうような設計になっているため、明確なエンディング、またゲームオーバーはありません。
ゲームクリアになったら、またタイトルに戻ってゲームを最初から遊べるようなサイクルを作成します。
２．追加要素を設計して実装する
ベーシックなゲーム内容とゲームサイクルになっているため、ここには様々な要素を追加することが出来ます。
例えば、ステージクリア制、アイテム要素の追加、障害物要素の追加、花輪のサイズによるスコアの変動など、
システム面の機能だけでもかなりの追加要素が考えられます。
それらの設計を行い、自分で考えた機能を実装してみましょう。
３．ステージ内の花輪の自動生成機能
ステージの長さに応じて花輪を自動的に生成する機能を考えましょう。
花輪を生成する際には花輪のサイズも自動的でランダムで変更するように設計をしてみましょう。
設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にも用意するべきものがあるのであれば、それらも考えておきましょう。
以上でこの手順は終了です。
=> 次は 実装手順を考える です。
コメントをかく