Unityに関連する記事です

2D放置ゲームの設計を考える


 Unityのバージョンは 2020.1.xf1 以降のバージョンにて製作を行う前提です。
 
 ゲームのジャンルは2Dゲーム、スマホで遊ぶ放置ゲームです。

 基礎設計が出来上がれば、あとはモデルを自由に差し替えたり(キャラ以外のものに変更)、ステージ用の背景を変えたり、
新しいルールや機能を追加していくことでオリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。

 少なくても以下の内容について、詳細な設計を考えていく必要があります。

・ゲーム性(Canvasのみでゲームを製作する、スマホでの快適な操作(タップのみで遊べる)、シンプルなルール(設定したら放置する)、タップする場所で放置時間や成果の内容が変わる、など)

・画面のデザイン(UIの配置、ゲームの世界観に沿ったUIのデザイン、など)

・必要なシステム・機能(タップした場所にあるゲームオブジェクトを感知、放置した時間を計測する、計測した時間に応じて成果を表示する、など)

・1つプレファブからの異なる性能を持つゲームオブジェクトを作成する方法(プレファブとデータベースの利用方法、など)

・演出(DoTweenによるアニメーション、画面のエフェクト、タイミングに合わせてエフェクトを作成する方法、など)

・ゲームのサイクル(タップして放置する条件を設定し、設定されている時間が経過したらクリアとなり成果が表示される、追加要素を設計して実装する、など)

 それでは1つずつ設計を行っていきましょう。


・ゲーム性

1.Canvasのみでゲームを製作する


  2Dの放置ゲームということですので、今回はゲームシーンの製作については、Canvas内のみでゲームを製作するようにします。

 そのため、ヒエラルキー上にはまずCanvasを用意し、その中に必要なゲームオブジェクトを配置していく手法でゲームを製作していきます。

 多くのスマホゲームで利用させているデザイン手法ですので、ゲームの製作を通じて、UIの設置やゲーム画面の作り方などを学びます。
また、放置ゲームならではのゲームの要素面白さの追求して考えていくことを学習します。


2.スマホでの快適な操作(タップのみで遊べる)


 スマホで遊ぶことを念頭に置き、シンプルな操作で快適に遊べる設計を考えます。画面は縦向き(Portrait)で考えます。

 今回は、お使いにいく地点の決定操作、選択ウインドウ内の決定操作など、すべて画面タップのみでゲームが遊べて進行するような設計にします。

 1.ゲーム画面内にある「行き先地点」のアイコンをタップ    => 行き先を決定するための選択ウインドウが開く
 2.選択ウインドウ内の「決定」「やめる」アイコンをタップ   => 選択した動作を実行する
 3.「お使い中」のアイコンをタップ              => お使いをキャンセルするかどうかを決める選択ウインドウが開く。タップで選択する
 4.お使い終了後に表示される「キャラ」のアイコンをタップ   => お使いの成果として褒賞を表示して確認するための運動が開く。タップで閉じる

 上記のような挙動でゲームが進行していくように実装手順を考えます。


3.シンプルなルール(設定したら放置する)


 ゲームの構成は、縦方向に見る、1画面のデザインになっています。
プレイヤーはゲーム画面となるフィールドを上から見下ろしている視点です。
 
 ゲームがスタートすると、画面内にタップすることができる「行き先」アイコンが表示されます。
複数の「行き先」アイコンがある場合には、そのうちの1つを選択します。


<行き先を決定>



 
 「行き先」アイコンをタップすると、この地点のお使い内容の詳細と、この地点にお使いに行くか確認して決定するウインドウが開きますので、
お使いを始めるか、ウインドウを閉じてキャンセルするかを選択します。


<お使いするか選択>




 お使いが開始されると「行き先」アイコンは「お使い中」であることを示すアイコンに変化します。
この状態にあれば、ゲームを放置することが可能になりますので、ゲームを中断しても大丈夫になります。そのまま時間の経過を眺めることも出来ます。
 
 このアイコンをタップするとウインドウが開き、お使いの残り時間や内容の確認と、このお使いを止めるかどうかを選択することが出来ます。
なお、このウインドウが開いている間はお使いの時間は経過しない処理が入ります。


<お使い中(放置できる状態)>




 お使いに設定されている時間が経過すると「お使い中」のアイコンが「キャラ」のアイコンに変化し、お使いが終了したことをユーザーに伝えます。
このキャラのアイコンをタップするとウインドウが開き、お使いの成果として褒賞を獲得したことが表示されます。ウインドウはタップで閉じます。


<お使い終了>



<褒賞を獲得>



 これがゲームの1サイクルです。この手順を繰り返して遊びます。

 ルールはこれだけですので、非常にシンプルでわかりやすいデザイン、かつルールになっています。



 発展編としては、褒賞を獲得するとポイントが加算されて、新しい行き先の追加や、新しいマップ(ステージ制)を追加する機能を検討します。


4.タップする場所で放置時間や成果の内容が変わる

 
 ゲーム画面にある「行き先」には異なる情報が設定されています。
この情報は、お使いにかかる時間、お使いの難しさ、そのお使いによって獲得できる褒賞の希少度、といったデータがあります。

 そのためユーザーは、複数ある「行き先」の中から自分が行いたい内容を選択して決定してくことになります。

 お使いにかかる時間がそのまま放置する時間となりますので、お使いの時間が長い行き先をセットして数時間放置してから再度ゲームを起動する、
あるいは、短い時間で何回かゲームを起動しながら遊ぶ、といったように、ユーザーのスタイル、空いてる時間に応じた遊び方を提供することが出来ます。

 ただしこれは、そういった遊び方も出来るという提案であって、実際にどのように遊ぶかはユーザーの任意です。
あくまでもユーザーには選択肢を与えて、どのように楽しむかを委ねることで、ユーザーなりの遊び方を考えてもらえるような奥行きのあるデザインを心がけます。

 この辺りのバランスを調整して(レベルデザインを行って)何回も遊んでもらえるような仕組みを作ります。
 

 

・画面のデザイン

1.UIの配置


 Canvas内にてゲームを製作するようになりますので、各画面に表示・設置するゲームオブジェクトとともに、UIの配置について設計をしておく必要があります。
ゲーム性にもよりますが、スマホの画面でユーザーにゲーム内の情報を提供する場合、情報過多になりすぎないように注意しましょう。

 またゲーム内の目の動きに合わせた導線を考えると、なるべく1つの箇所にまとまっていた方がユーザーの情報確認は容易になります。

 ・ゲーム画面の上部に、現在のゲーム情報のUIの部分を表示
 ・ゲーム画面の下部に、アルバム用のボタンを表示


 他にも必要な場合にはロジックも考えて設計し、画面へ追加していきます。

 ゲーム画面の見せ方はそのまま、遊びやすいゲーム、親しみやすいゲームという認識に直結します。
色々なゲームを参考にしながら、「分かりにくい」「見えずらい」といった部分が少なくなるデザインを考えてみてください。
どの部分にどんな情報があれば便利なのか、邪魔にならない場所なのか、という視点で考えながら設計しましょう。


2.ゲームの世界観に沿ったUIのデザイン


 各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。

 今回のゲームの世界観は、プレイヤーのキャラクターに合わせて、ファンシーでかわいいデザインを採用しています。
そのためゲーム中に使用しているフォントもそのスタイルに沿ったフォントを採用しています。
このフォントは無料素材として入手したものですので、イメージに合わせて自由に設計してみてください。
 

必要なシステム・機能

1.タップした場所にあるゲームオブジェクトを感知


 ゲーム画面はすべてタップで進行します。その際には、タップできる場所がわかるように「アイコン」表示を行い、タップ地点を視認できるようにします。
アイコンにはボタンを用意し、タップを感知できる状態にしておきます。
また、1つの処理を実行している間に不用意にタップを許可することで不具合が生じることがないように制御も行います。

 画面をタップすることを考える際には、自分の手が邪魔でタップすることや必要な情報が見えなくなったりして、繰り返し遊ぶことが困難にならないようにすることを念頭に配置を考えます。

 こういったユーザービリティはいつも考えて設計をする必要があります。
 

2.放置した時間を計測する


 最も重要な機能の1つです。
現実の時間と、時間の経過をゲーム内に反映することによって、ゲームを実際に実行していない放置している間もゲームとして成立するための処理になります。

 こちらの機能は複数のタイミングで実際の時間をセーブしながら、経過時間を計測するようにします。


3.計測した時間に応じて成果を表示する


 上記の機能を利用することによって、放置している時間がゲーム内で運用されることでゲームが進行する仕掛けになります。
お使いにかかる時間に対してこの仕掛けを利用することにより、お使いが終了した状態を作り出すことが可能になります。

 その結果としてキャラを画面に表示してお使い終了を通知するとともに、タップすることでお使いの成果である褒賞の獲得が行えるようにします。


1つプレファブからの異なる性能を持つゲームオブジェクトを作成する方法(プレファブとデータベースの利用方法、など)


 行き先の情報や、褒賞の内容を作成する場合、データの異なるそれらのゲームオブジェクトを複数個用意する方法もありますが、
ここでは行き先や褒賞を個別に作成するのではなく、元となるプレーンなプレファブを1つ用意しておいて、異なるオブジェクト・情報としての役割・ふるまいを与えられる設計にします

 行き先のアイコンを複数生成する
   ↓
 用意された情報を元に、行き先の画像、お使いに必要な時間、お使いの難しさなどを自動で設定し、「どんな行き先であるか」というふるまいを、その時に決める


演出(エフェクト)

1.DOTweenを使用してアニメーション演出をする


 DOTween(ドットゥイーン)とは無料アセットの1つで、広く使われているTween(トゥイーン)系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。

 またDOTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。


<動画 _萍未鬟織奪廚靴榛櫃縫▲ぅ灰鵑鬟▲縫甕藹个垢襦
動画ファイルへのリンク


<動画◆,使い中のアイコンをアニメ演出する>

2.画面のエフェクト


 画面をフラッシュさせたり、暗転させたりといったものだけではなく、アイコンを移動させたり、画像を一瞬だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらは場面に応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
 
 やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。


3.タイミングに合わせてエフェクトを作成する方法


 今回のゲームでは無料のアセットのエフェクトをいくつか利用し、生成のタイミングや制御の方法などを学習します。
 
<例>
 お使いが終了する
   ↓
 キャラをプレファブから生成する
   ↓
 キャラ生成時にエフェクトも一緒に生成し、お使いのやりきった感、達成感をアピールする

 このように演出を設計し、その順番通りに動くように制御を行っていきます。


ゲームのサイクル

1.ゲームの流れ(タップして放置する条件を設定し、設定されている時間が経過したらクリアとなり成果が表示される)

 
 何回も繰り返し遊んでもらうような設計になっているため、明確なエンディングはありません。
一連の流れとしては、タップして行き先を決めて放置する条件を設定し、設定されている時間が経過したらクリアとなり成果が表示される、というものです。
現行ではお使いの失敗はありません。

 ゲーム画面のタップと放置とを併用して進めていくことで、ゲームを繰り返し遊べるようなサイクルを作成します。


2.追加要素を設計して実装する


 ベーシックなゲーム内容とゲームサイクルになっているため、様々な要素を追加することが出来ます。

 例えば、ステージクリア制、アイテム要素の追加、障害物要素の追加など、システム面の機能だけでもかなりの追加要素が考えられます。

 それらの設計を行い、自分で考えた機能を実装してみましょう。



 設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にも用意するべきものがあるのであれば、それらも考えておきましょう。


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

 => 次は 実装手順を考える です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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