謎の歩行生物(仮)【PART49】~Scroll Viewを使ってステージセレクト画面を作成~

LINEで送る
Pocket

今回は、ステージセレクト画面を作ってしまおうと思います。今後ステージを量産するにあたって、シーン遷移の確認・レベルデザインの確認・実機でのデバッグなどを効率的にするためです。ですので、現時点で仕様は一通り固めますが、全ての要素を実装するわけではなく、あくまで上記の目的を充たす最低限の実装のみを優先します。

 

本題に入る前に、今回から少しブログの内容についても変えていきます。

今後ゲームのリリースまでの間、ゲーム自体のクオリティを上げるためブログの内容を簡素化します。細かい実装の仕方や、気を付ける点などは、ゲームリリース後に改めて記事のカテゴリを分けて詳しく載せていきたいと思いますのでよろしくお願いします。(今までの記事も精査してカテゴリを分けていきます。)

 

さて、本題のステージセレクト画面ですが、まず作る上で意識したことが2つあります。

1つは、メインのゲーム部分にできるだけ早く移れるように極力シンプルな作りにすること。もう1つは、自分がクリアした状況を簡単に把握でき、「ここまでクリアしたんだなぁ」と達成感を得られるようにすることです。

また、ステージセレクトなどのメニューやアイコンがたくさん並ぶような選択画面では「機能性」と「デザイン」のバランスが大切になります。

機能性とは例えば「画面を一目見た瞬間に選びたいモノが見つけられる」「ボタンが押しやすい位置にある(カーソルを持っていきやすい)」などです。機能性を高めないと使いづらい、分かりづらいものになってしまいますし、機能性ばかりを追求すると「そのゲームらしさ」が失われてしまいます。

【ユーザーが求めている情報】として何が必要かを見極めないとしっかりした画面が作れないので、この辺のバランスとりは本当に難しいです。

今回は「手軽に遊ぶためのスマホゲーム」を目指しているので、デザイン性よりも機能性に重きを置いて作りたいと思います。また全て2Dで作ります。

 

というわけで、いきなりですが作った状態のものがコチラ。

002

画面の下には、メインゲームと同じようなメニューアイコンが並びますが、画面中央の箱のようなボタンを選択すると、各ステージに移動するようにしています。

この画面中央のステージアイコンは、横にスライドさせるようにして、ステージをバーッと見ることができるようになっています。

003

シーンビューで見てみると、画面外にもアイコンが配置されている様子が見てわかります。

 

画面をタッチしてスライドさせる方法は簡単です。

004

まずヒエラルキービューの「UI」→「Scroll View」を選択。

006

するとこんなウィンドウのUIができます。

005

ヒエラルキービューで見ると、このような構成になっています。スクロールバーが縦方向(Scrollbar  Vertical)と横方向(Scrollbar Horizontal)の両方がありますが、今回は横にだけスライドすればいいので、Scrollbar  Verticalは削除しておきます。

 

あとはスライドする場所に置きたいモノを、「Viewport」の「Content」の子に入れてあげればOK。

箱型の各ステージ用アイコンはボタンになっているので、タッチすれば簡単な演出の後、各ステージのシーンに移動するようになっています。

今後は5ステージ分位ステージ作りを行いますが、その後にクリアフラグを用意し、どのステージをクリアしたのかの表示と、1つ前のステージをクリアしないと遊べない「ロック状態」にする表示を実装していこうと思います。

 

スポンサーリンク

スポンサーリンク

LINEで送る
Pocket