ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

ゲームアプリを作成するときの画面構成

      2017/10/25

ひさびさにゲームでも作ってみようかなぁと思っている今日この頃ですが、さて、ゲームを作るときにどういった構成にしようかなぁと思うといつも最初から考え直して。。。って感じになってしまうので、以前公開したゲーム(今思えばあんなのよく公開できたなぁと。。。まぁ公開したという実績が欲しかったのですが。。)を思い出しながらメモ。

当時、ゲームアプリの構成をどういった感じにしようかといろいろ調べてみても、なかなか参考になるページがなく、いろんなゲームで遊んでみて、おおお!こうなっているのかぁ!などと思いながら作っていました。

とりあえず、これからゲームアプリを作ろうとしているかたには参考になるかも知れません。

構成的にはこのゲームを基本に欲しい機能などを付け足して、いらない機能は削っていく。という感じで良いかなぁと思っています。

とにかく自分でゲームを作るときは他の方が作ったゲームアプリをやりながら、おおお!こうなっているのかぁ!ということを勉強しながらやると良いと思います。

目次

アンドロイド端末の3つのボタン

アンドロイド端末の場合、3つのボタンに注意します。

・ホームボタン
・メニューボタン(設定ボタン)
・バックボタン(戻るボタン)

これらをコントロールするなら画面ごとに設定する必要があります。

ホームボタン

デフォルトでホームに戻るようになっています。

ゲーム中でも戻れなければいけませんね。

電話やメールを確認するときなどで、ゲームを中断したいけどやめたくないときとかですね。

設定はいじっていません。

デフォルト。

たしか、ホームボタンはカスタマイズしてはいけない。だったような気がします。

いずれにしてもカスタマイズは非推奨だったような気がします。。

メニューボタン(設定ボタン)

ゲームではなく、例えばカメラアプリとか設定が必要な場合はカスタマイズする必要があります。

自分の場合は、このメニューボタンは使わないですし、むしろ使われても困ってしまう。。。

ということで、メニューボタンは押しても何も起こらない。

という制御をしています。

バックボタン(戻るボタン)

こちらは画面によって制御しています。

通常時にバックボタンを押された場合には、ゲーム終了選択画面(その1)へ遷移。

ゲーム中にバックボタンを押された場合には、ゲーム終了選択画面(その2)へ遷移。

ゲーム選択画面時にバックボタンを押された場合には、前の画面へ戻る。

といった感じにしています。

ゲームアプリの画面構成

構成は下記となっています。


①スプラッシュ画面
②タイトル画面
③ゲーム選択画面(2個)
④ゲーム画面(2個)
⑤ゲームオーバー画面
⑥ランキング画面
⑦遊び方画面
⑧ゲーム終了選択画面(2個)

これをひとつずつどうなっているかをメモしていきます。

①スプラッシュ画面

20141029001

ゲームアプリを立ち上げて、タイトル画面に遷移するまでに表示される画面です。

ロゴとかがあれば作っておくと良いと思います。

何秒で表示するとか決めて、次の②タイトル画面へ遷移させます。

②タイトル画面

20141029002

こちらがタイトル画面になります。

メニューは見たまま。。

・ゲームスタートボタン

③ゲーム選択画面に遷移します。

・ランキングボタン

⑥ランキング画面に遷移します。

・おすすめアプリボタン

おすすめアプリの広告画面へ遷移します。

・遊び方ボタン

⑦遊び方画面に遷移します。

また、この画面でバックボタンを押された場合はゲーム終了選択画面(その1)に遷移します。

*ゲーム終了選択画面(その1)については後述。

それから、この画面にあったら良かったなぁと思っているのは音のon/offボタンです。

音のon/offボタン

音のon/offボタンは今後実装したいですね。

それから、この画面には広告を入れています。上下に2つ。

③ゲーム選択画面(2個)

ゲーム選択画面(その1)とゲーム選択画面(その2)
20141029003 20141029004

ゲームに難易度やちょっとゲーム性を変えたバージョンを作っていたので、このようにゲーム選択画面を作っていますが、こういったことをしないで、いきなり④ゲーム画面へ遷移しても良いかと思います。

ちなみにタイトル画面ではバックの屋敷の扉は閉まっているのですが、この画面に遷移してきたら扉が開いているようにしました。。。

この画面でバックボタンを押された場合は、前の画面に戻る設定にしています。

ゲーム選択画面(その2)でバックボタンを押された場合はゲーム選択画面(その1)に遷移し、ゲーム選択画面(その1)でバックボタンを押された場合はタイトル画面に遷移します。

遷移するというよりはシーンを消す。といった方が良いかも知れません。

こちらで選択したゲームの内容を設定して、ゲームをスタートさせます。

こちらからの画面の遷移先は④ゲーム画面になります。

④ゲーム画面

20141029005

ゲーム中の画面です。

ゲーム中にも広告を1つ入れていますが、入れなくても良いかも知れません。

ゲームでミス等をした場合などは、下記のようなポップアップ画面を表示させてから、⑤ゲームオーバー画面へ遷移させるようにしています。

20141029006

ゲーム画面でバックボタンを押された場合は、ゲーム終了選択画面(その2)に遷移します。

*ゲーム終了選択画面(その2)については後述。

⑤ゲームオーバー画面

20141029007

ゲームオーバー画面になります。

ボタンは3つ付けています。

・ランキング登録ボタン

サーバー側のデータベースにスコアを登録します。

このボタンを押すと、ポップアップで入力画面を出しています。

ユーザーの名前を登録させるためですが、一度登録したことのあるユーザーでしたら、同じ名前が入力画面に出てくるようにしています。

スコアを登録するためには必要な情報をこちらの画面まで持ってきていないといけません。

例えば、そのときのスコアもそうなのですが、一意に特定できるユーザーのIDなどとか。。

ここの問題はどうやったかというと。。。

たしか・・・

最初はアプリにはIDを持たせておらず、ランキング登録をするときに、IDがない端末からのアクセスだったら、IDを付与して(データベース内で連番にしていたような。。)、アプリ内でもそのIDを設定し、新しくデータをinsertする。

ランキング登録をするときに、IDがある端末からのアクセスだったら、データをupdateする。(名前が変更されたら、変更された名前で登録する。)

といった感じにしたかと思います。

・リトライボタン

ゲームに再チャレンジする場合はこちらを押します。

再度、④ゲーム画面に遷移します。

・タイトルボタン

②タイトル画面に遷移します。

こちらでバックボタンを押された場合は、ゲーム終了選択画面(その1)に遷移します。

*ゲーム終了選択画面(その1)については後述。

⑥ランキング画面

20141029008

ランキング画面への遷移はWeb接続で、ランキング画面自体はサーバー側のphpで作成しています。

他の方とのランキングの比較をする場合はサーバー側にデータベースが必要ですし、それを表示するための画面が必要になります。

その画面はサーバー側でphpで作ることもできますし、データだけ取得してクライアント側で表示させることもできるかと思います。

他の方とのランキングの比較ではなく、自分自身のハイスコアやスコアの順位などのランキングを実装する場合は、サーバー側のデータベースは必要なく、端末側のデータベースやテキストなどを使うと実装できるかと思います。

ランキング画面は正直あってもなくても良いかなぁとは思いますが。。。

ちなみにこの画面でバックボタンが押された場合は、ゲーム終了選択画面(その1)に遷移します。

*ゲーム終了選択画面(その1)については後述。

通常のタイトルへ戻るようにすれば良いのかもしれませんが、戻るボタンは別途付けていましたし、Webアクセスしているので、その時にうまくいかなかったような気がしますが。。忘れてしまいました。。

⑦遊び方画面

20141029009

ゲームアプリを作る場合は遊び方画面は作っておいた方がよいでしょう。

戻るボタンのみ実装してあります。

ちなみにこの画面でバックボタンが押された場合は、ゲーム終了選択画面(その1)に遷移します。

*ゲーム終了選択画面(その1)については後述。

⑧ゲーム終了選択画面(2個)

20141029010 20141029011

こちらはバックボタンを押されたときにポップアップして表示するゲーム終了選択画面になります。

通常の画面から押された場合とゲーム中に押された場合で分けています。

左側はゲーム終了選択画面(その1)。

右側はゲーム終了選択画面(その2)。

としています。

終了選択画面(その1)ではアプリを終了するか、キャンセルするかの2択にしています。

終了選択画面(その2)ではリトライ(ゲームをもう一度最初からする)するのか、タイトルに戻る(ゲームを一旦中止する)のか、それともリプレイするのか(中断したところからスタートする)、の3択にしています。

ゲーム中はアプリ自体を終了させなくても良いかな。。むしろ、上記3択の方が必要なのではないかと思ってこのようにしています。

ゲーム中にバックボタンを押された場合、まず、タイムをストップさせます。

リトライとタイトルに戻る場合は一旦タイムをリセットしますが、リプレイの場合はタイムをストップさせた時点から再開させなければなりません。

そのため終了選択画面(その1)の実装ではなく、終了選択画面(その2)にしています。

まとめ

ちょっとしたクソゲーとか作るときでもいろいろこういった画面遷移などのコントロールは考えなきゃいけないですね。

とりあえず個人的には、これを基本フォーマットとして作っていけばよいのではないかなぁと思っています。

ゲームの内容が重要なんですが。。。

以上。

 - Android, cocos2d-x, アプリ, ブログ , ,