はじめに
この連載では、ブログで課金ゲームアプリの作り方を紹介していきます。前回の第2回では、開発環境の準備とアプリの企画についてお話しました。
今回はアプリの設計編です。
どのようなゲームを作るのか企画ができたら、設計をしましょう。
今回の場合は、「アプリ内課金のあるシンプルなブロック崩しを作る」ことが企画です。
「その企画を具体的にどうすれば実現できるか」を決めていく工程が設計です。
具体的には、
- 画面解像度はどうするのか？
- ボタンなどの GUI は何が必要で、どんなレイアウトにするのか？
- 画像や効果音は何が必要か？
- ボールはどんなふうに動くのか？
- バーの操作方法はどうするのか？
- ステージクリアとゲームオーバーの条件は？
- アプリ内課金は何をどのように販売するのか？
など、実際に作るために必要となる数値やルールを仕様として決めていきます。
抑えきれない情熱に任せて、とりあえず Unity を起動したくなる気持ちもわかりますが、仕様を決めておかないと途中でゴチャゴチャになって、中途半端で終わってしまう可能性が高くなりますので、ご注意ください。
それに設計という工程も、やってみると意外と楽しいものです。
仕様を整理・確認することで、見落としていた点や、思わぬ素敵なアイデアが見つかることもあります。
設計といっても、あまり難しく考えず、作りたいゲームのことを文章や図を用いて具体的に説明できるようにしていきましょう。
ブロックくずしの設計
ルールを整理しよう
まずは、ゲームに配置するオブジェクトごとにルールを整理してみます。
ボール
- ゲーム開始時は止まっていて、タッチされた方に移動する
- 移動は直線的で、一定速度である
- 壁・ブロックにぶつかると反射する
- 下に落ちるとゲームオーバー
ブロック
- ボールにぶつかるとダメージを受ける
- ダメージが一定以上になると壊れる
- 全てのブロックが壊れるとステージクリア
バー
- タッチした位置に向けて一定速度で左右に移動する
- 壁にぶつかると止まる
- ボールがぶつかると、位置に応じてボールの移動方向を変更する
壁
- ぶつかったボールは反射する
- ぶつかったバーは止まり、それ以上進めない
ゲームオーバー領域
- ボールが領域に入ってきたらゲームオーバーにする
ゲームオーバー領域というのは、ボールが下に落ちたと判定するために作られた画面の下側にある透明な領域です。ボールとバーとの位置関係で判定してもよいですが、この方がエディタ上で調整がしやすいかと思います。
オブジェクト同士の当たり判定を整理しよう
Unity ではオブジェクトごとにレイヤーを設定できます。そして、レイヤー単位で衝突・接触の有効性を変更できるため、不要な当たり判定を行わないようにすることが簡単に設定できます。
課金要素を考えよう
- 新しいステージをプレイするための課金
- 貴重なアイテムを簡単に入手するための課金
- 簡単にレベルアップするための課金
といったように、それぞれのゲームの性格に応じた課金が用意されていました。
課金要素は後から追加しても構いませんが、最初から課金ゲームアプリを作る前提ならば、設計の段階で考えておくと自然な形での導入がしやすいでしょう。
教材サンプルでは、ゲームオーバー時のコンティニュー機能に消費型の課金アイテムを導入することにしました。
「あともう1個ブロックを壊せばステージクリアなのに！」
とくやしがっているプレイヤーに、
「課金アイテムがあれば、その場からやり直せるよ！」
という形で課金アイテムの利用を勧めてみます。
課金アイテムを所持していなかったら、その場でショップを開いて購入できる導線設計が重要です。
画面をデザインしよう
大抵のゲームは複数の画面を切り替えながら遊びます。今回のブロック崩しでも、タイトル画面とステージ画面との間を遷移します。
タイトル画面で行うことは、
- ステージの選択
- 課金アイテムの所持数の確認
- 課金アイテムの購入( itemstore のショップを開きます)
- プライバシーポリシーの表示
なので、パーツとして
- タイトルバナー
- ステージ選択の説明文
- ステージ選択ボタン
- 課金アイテムの表示パネル
- ショップを開くボタン
- プライバシーポリシーの表示ボタンとそのテキスト
を配置します。
ステージ画面で行うことは
- ブロック崩しのプレイ
- ステージクリア時は、「リトライ」「タイトルへ戻る」「次のステージ」の選択
- ゲームオーバー時は、「リトライ」「タイトルへ戻る」「コンティニュー」「ショップ」の選択
なので、パーツとして
- プレイ前の説明文のテキスト
- ブロック、ボール、バーのスプライト
- ステージクリア時のパネル
- ゲームオーバー時のパネル
を配置します。
このように、画面のデザインでは、その画面で実現したいことに合わせて、ボタンなどの UI を配置していきます。そして、ステージ選択ボタンが押されたらタイトル画面からステージ画面に遷移するように、他の画面に遷移する流れについても決めていきます。
また、同じ画面であっても、状態によって新たなパネルを表示することもあるでしょう。例えば、ゲームオーバーになったら、次のようなパネルをステージ画面に表示して、ゲームを続けられるようにします。
ブロックなどの大きさを決めよう
ターゲットにする画面解像度を決める
ゲームのシーンに配置するブロックなどの大きさを決める際は、始めに画面解像度を決めてしまうと楽です。
スマートフォンには様々な解像度があるので、ゲームにあった解像度を選びましょう。
今回はあまり画質にこだわらないので、小さくて区切りがよさそうな360×640ピクセルを選びました。
▼スマートフォンの画面解像度については、Qiitaで詳しく紹介しています。
Unityを使ったAndroid向け課金ゲームアプリの画面作成に関する初歩的な情報 - Qiita
ブロックを配置する数から大きさを決める
画面解像度が決まったら、ブロックを配置する領域を決めます。その領域を、ブロックの数で等分すれば1個あたりのブロックの大きさが計算できます。ブロックの数は他のブロック崩しなどを参考にすると良いでしょう。
今回は横に8個、縦に10個としました。余白を差し引いた領域のサイズを、このブロックの配置数で等分することで、ブロックのサイズは40×20ピクセルに決めました。
このように、まずは画面解像度を決めて、そこから領域ごとのサイズを決めていくと、用意する画像のサイズを求めることができます。
画像は小さすぎると拡大されて粗く見えたり、大きすぎると縮小されてつぶれて表示されたり容量のムダになってしまうので、必要なサイズを計算してから作り始めると良いでしょう。
素材を用意しよう
作る画像のサイズが決まったら、仮組みで良いので画像素材を作ってみましょう。実際に Unity を使うとわかりますが、シーンにブロックなどのスプライトを配置する際には、仮組みでも画像素材があったほうが便利です。
シンプルなブロック崩しの画像ならば、前回紹介した InkScape で図形を組み合わせることでも簡単に作ることができるでしょう。
▼Unityで画面にスプライトを配置する方法については、Qiitaで詳しく紹介しています。
Unityを使ったAndroid向け課金ゲームアプリの画面作成に関する初歩的な情報 - Qiita
効果音についても、ボールがぶつかったときの音、ブロックを破壊したときの音、ボタンの音など、確実に使うものから用意していきましょう。これらの音だけでもゲームの雰囲気が出てきます。
フリー素材の効果音を利用したり、前回紹介した Bfxr などのツールを使って自作することもできます。
フリー素材について
絵が描けなかったり、音楽が作れなくて困っている開発者でも、フリー素材を使うことで格段にゲームのクオリティを高めることができます。しかし、フリー素材とはいってもそれぞれにライセンスが規定されており、何でも好き勝手に使って良いわけではありません。
例えば、
- 無料で使えるが、名前を明記すること
- 紙媒体はOKだけど、ゲームはNG
- フリーゲームならOKだけど、商用利用はNG
など、無料で使えるけれども制限が加わる場合もあります。
フリー素材には、画像や音楽のほかに、フォントがあります。レトロゲーム風、書道風、下手文字風など様々なテイストのフォントがあり、これもまたゲームの雰囲気を高めてくれる大事な素材です。
ありがたいことに、商用利用OKでゲームにも利用可能なフリーフォントが公開されているので、検索してみると良いでしょう。
今回のゲームでは商用利用可能でゲームでも使えるフリーフォント『M+ FONTS』を利用したいと思います。
次回の予告
今回行った設計に基づいて、次回からはいよいよ Unity でブロック崩しを実装していきます。
具体的には
- バーの操作
- ボールの移動
- ブロックのダメージ処理
などのブロック崩し本体の実装のほかに、
- ボタンなどの UI の画面への設置
- ダイアログ風のパネルの表示
- シーンの組み合わせ
- 効果音の再生
など、他のゲーム作りでも使える基本的な実装を中心に解説していきます。
まずは、次回でブロック崩しのゲームが動くところまで進め、その次の最終回でアプリ内課金を含めたアプリを完成させる予定です。
完成まであと少し。次回もお楽しみに！
文・開発：さくらくらうど（@SakuraCrowd）
個人でゲームを開発しています。アプリ内課金については初心者ですが、itemstoreを利用することで簡単に課金ゲームアプリが作れることを、実際の開発を通して伝えられたら良いなと思っています。
Blog : http://sakuracrowd.blogspot.jp/
Twitter : https://twitter.com/SakuraCrowd
