その2：自作ゲームのステージ画面の実装について実装編

前回はステージ選択画面のパターンを分析しました。

今回は自作ゲームに実装していきたいと思います。

実装するパターン

前回、いくつかのパターンを見てみましたが、このゲームのステージ選択の

最良のパターンはどれになるか見てみましょう。

判断基準はこの通り

この点から、今回はパネル型を採用したいと思います。

実装方法

パネル型の実装に今回はアセットストアのアセットを使用して実装していきたいと思います。

今回使用したのはこちらになります。

これはスクロール関係のアセットですが

無料でスワイプ、ワールドマップ、無限スクロールなど機能が充実しているため

大抵のステージ選択できる可能性を秘めています。

そのため今回はこのアセットを活用していきたいと思います。

実装レイアウト

まず、パネル型と使用するアセットを決定しました。

次はどのようなレイアウトに落とし込むか見ていこうと思います。

今回は以下の要件でレイアウトにします。

• タイトルからの画面遷移は行わない（フェードでゲームから意識が外れるため）
• パネルをスライドで切り替える
• ステージ名表記
• スライドできると分かりやすいように矢印をつける

イメージとしてはこんな感じですね

この形式もソーシャルゲームでもありそうな形式ですね。

実際のところ、よくある形式のほうが受け入れやすいことは確かなので

このレイアウトで実装していきます。

実装

使用するアセットを活用しこのゲームにステージ選択を落とし込みます。

重要な点としてタイトル画面から遷移しないため

下のタイトル画面の主人公とうまく折り合いをつけいないといけません。

このゲームを見てもわかる通り、

タイトル画面において主人公がなるべくUIにかぶらないように工夫をしています。

かぶると実際かなり見栄え悪くなります。

設定画面は今まで情報量が少なかったのでそこまで苦はなかったですが、

今回はパネルというかなりの情報を持ったUIが表示されるようになります。

この時の対処法として以下のような手法があります。

• 画面全体を若干暗くしてその上にUIを置く

• UIを3D化して空間として一体化させる

　今回は雰囲気を出したいのと、ここだけ画面全体が暗くなると違和感があるので

　UIを３D化したいと思います。

実際に実装した結果がこうなりました。

このアセットのサンプルのままですが、結構様になってますね。

動画では判断は難しいですがしっかりと画面スワイプで移動するようになっています。

まとめ

まだアセットストアのサンプルの画像のままですがかなり雰囲気が出ました。

前回同様となりますが、ステージ選択画面が残念なことになると

まだゲームの本編プレイすらされないので、

単純にステージ選択といっても非常に重要な画面になる点も気をつけましょう。