「Flappy Daruma」を作ってみよう!①開発の方向性と準備

「Flappy Daruma」を作ってみよう!

この連載では、 Flappy Birdに似たゲームの制作を紹介しながら、Unityによるゲーム制作を学んでいきます。
まずは、制作するゲームの具体的なイメージと、読む際にどのような前提知識が必要かを見ていきましょう。

今回作成するゲーム

今回作成するゲームは「Flappy Daruma(フラッピーダルマ)」です。

Flappy Birdは鳥がジャンプをして障害物をくぐりぬけていく有名なゲームですが、今回作るゲームはそれと似たダルマが主役のゲームになります。
操作方法も同様で、ジャンプさせたいタイミングで画面をクリック(もしくはタップ)するだけです。

Flappy Darumaの完成版は、こちらのサイトで公開中ですので、よろしければプレイしてみてください。

 

前提となる知識

次に、この連載を読むにあたって、知っておいたほうが良いことを紹介します。

今回はUnityの基本的な使用方法やC#の基礎的な知識はすでに学習済みの前提で進めていきます。

そのため、Unityでゲームを作るのが初めてという方は「0から2Dアクションバトルゲームを作ろう!」編のチュートリアルを先に進めることをお勧めします。(第一回はこちらからどうぞ)

 

開発環境

基本的に次の環境で制作し動作を確認しています。
スクリーンショット画像や操作方法もこの環境での説明になりますので、他の環境の方は適宜置き換えてお読みください。
例えば、クリックはスマートフォンではタップに置き換えて読んでください。

  • Windows 7 Home Premium SP1 64bit
  • Unity 2018.2

連載記事のiOS編だけはMac OS X環境で行っていますので、その説明の際に環境について改めて紹介致します。

開発の方向性

続いて、この連載でどのようにゲーム制作を紹介していくのか、主な流れを紹介します。今回は、主に3つの段階に分けて制作していきます。

1.まずはゲームステージを作ろう

はじめに、ゲームの舞台の基礎として背景を作っていきます。

上の動画のように、無限に横にスクロールする背景を作ります。

2.障害物とキャラクターでゲーム性をもたせよう

続いて、土管を障害物としてランダムな高さで自動生成していきます。
背景として表示していた地面にも障害物の役割を追加し、ダルマが着地できるようにします。

障害物を作成したあとに、ダルマを作っていきます。
ダルマは入力に応じて連続でジャンプをして、障害物にぶつかるととまります。

3.画面を追加しよう

タイトル画面からプレイ画面、プレイ画面の上にゲームオーバーの表示を重ねるなど、ゲーム全体の画面遷移を作っていきます。

これで、ゲームが一通り作られ、Unityエディタ上でプレイすることができます。

4.自分のスマートフォンで遊んでみよう

Flappy Darumaが完成したら、それをAndroid端末にインストールしたりiOSシミュレーターを使ってプレイする方法を紹介します。

ここまでが、連載全体の主な流れです。引き続き、具体的なゲーム制作について紹介していきましょう。

完成までのプロセスをイメージしよう!

それでは、ゲーム制作を始めるにあたって、どのようなゲームを、どのような手順で作っていくかを決めていきます。
ゲーム制作にはいろいろな作り方があり、必ずしも計画通りにいくわけでもないので、目安程度の感覚で気軽に考えてみましょう。

今回は「ゲームの設計(画面とルール)」→「必要な要素」→「具体的な開発プロセス」という順番で進めていきます。

まずはゲームの設計を考えよう!

今回作るゲームFlappy Darumaがどのような構成をしているか「画面」と「ルール」の2つの側面から整理してみます。

シーン・画面の設計

Unityではシーン(Scene)という単位で画面の表示や処理が行われます。
同じシーンの中でも、一部のテキストや画像の表示・非表示を切り替えることで、違った内容の画面を表示できます。

Flappy Darumaではタイトルシーンバトルシーンの2つのシーンを交互に切り替えてゲームを進行していきます。

ゲームの起動直後はタイトルシーンのタイトル画面が表示され、 [START]ボタンをクリックすることでバトルシーンのバトル画面に切り替わります。

同じシーンの中でも、タイトルシーンでは [ABOUT] ボタンをクリックすることでクレジット表記などの画面に切り替えられ、 [CLOSE] ボタンでタイトル画面に戻ります。
バトルシーンでは、ゲームオーバーになった段階で自動的に画面が切り替わり、 [TITLE] ボタンをクリックすることでタイトルシーンのタイトル画面に切り替わります。

バトル画面のルールの設計

次に、ゲームにどのようなルールが必要かを考えていきます。

今回はメインであるバトル画面のルールについて列挙してみましょう。

  1. クリックされたらダルマをジャンプさせる
  2. ダルマは放っておくと落下していく
  3. 背景と地面と土管が右から左に移動する
  4. 土管は上下ペアになっていて、土管の高さはランダム、上下の隙間の幅は一定
  5. ダルマが土管の上下の隙間を通過したらスコアが増える
  6. ダルマが土管か地面にぶつかったらゲームオーバー

 

Flappy Darumaは、これらのルールが協調することで実現できます。

ルールを最初から全て網羅するのは困難なので、思い浮かんだルールをひとつひとつ追加していくような感覚で決めていきましょう。

必要な要素を考えよう!

バトル画面のルールの設計ができたので、その文中に出てきた名詞をピックアップして、バトル画面の要素を整理してみましょう。

  • ダルマ
    このゲームの主人公で、プレイヤーが動かす操作キャラクターです。
    入力を受けてジャンプします。障害物とぶつかるとゲームオーバーになります。
  • 背景
    右から左に横にスクロールする背景です。
    ダルマが右に向かって進んでいるように見せるための演出を行います。
  • 地面
    背景のようにスクロールし、ダルマが接触するとゲームオーバーになります。
  • 土管
    背景のようにスクロールし、ダルマが接触するとゲームオーバーになります。
    一定間隔で上下ペアで現れます。高さは毎回ランダムに決められます。上下の隙間の幅は一定です。
  • スコア
    画面の上側の中央に数字で表示されます。
    ゲームオーバー後の結果にも反映されます。

具体的にルールの説明文で名前がでたものは以上になりますが、バトル画面では他にも目に見えないいくつかの要素を必要に応じて用意しました。

  • スコアアップライン
    上下の土管の隙間にある見えない線です。この線に接触するとスコアが増えます。
    ゲームオーバーと同じ接触判定を用いることで、スコアアップの判定を簡単に実装しています。
  • デストロイゾーン
    表示エリアの左側に配置されている縦長の長方形です。
    土管が左側に消え去ったあとも存在し続けると、どんどんと不要な土管が左側にたまっていきます。そのような事態を防ぐためにこれに接触したら消すようにしています。
    ゲームに直接必要な機能ではありませんが、無駄な計算やメモリを使わず常に軽快にプレイできるようにするために用意しました。
  • バトルシーン
    バトル画面を全体的に管理します。
    ダルマから教えてもらいスコアを増やしたり、バトル画面からゲームオーバー画面に切り替えたり全体的な処理を担当しています。最初は理解しにくいですが、ぼんやりとしたイメージでも大丈夫です。

これら以外にも、Unityの基本機能として、画面を表示するカメラやキャンバス、入力イベントを管理するイベントシステムなどが基本の要素として用意されます。

制作プロセスを考えよう!

制作プロセスはゲーム内容や制作する人によってさまざまです。
今回は、すでに作成する画面やルールなどの外部仕様は決まっている段階から、次のような手順で開発します。

  1. 素材(フォント・画像・音声データ)を用意する
  2. 用意した素材をゲーム内の要素に配置する
  3. ルールに従って要素を動かすプログラムを作成する
  4. Unity上でテストする
  5. ウェブブラウザやスマートフォンの環境でテストする

 

ただし、実際の開発では全てが計画通りにいくことは少なく、臨機応変に柔軟な対応をすることも大切です。
今回の制作でも、問題が起きたら前の手順に戻ったり、理解しやすい部分ごとにわけて開発を進めたりと、完成を目指して臨機応変に進めました。

制作プロセスは見通しをたてるために役立ちますが、あくまで制作の進め方の目安として考えましょう。

必要な素材をダウンロード/作成しよう!

ゲームを作るには、プログラムだけではなく、フォント(文字)・画像・音声のデータも重要になってきます。

これらのデータは素材の配布を行っているサイトからダウンロードしたり、自分で作ったりして準備しましょう。
また、外部のデータを利用する場合は、配布元の規約などを守って利用してください。

 

今回使用する画像データと音声データは下記ファイルをダウンロードしてお使いください

フォントデータ

フォントデータとは文字の形のデータのことです。
ゲームにあわせたフォントデータを使うことで、さらにゲームの雰囲気が良くなります。

Flappy Darumaでは、フリーのフォントPixelMplusをダウンロードして使用しています。

フォントについての詳細は以下のリンクを参考にしてください。

Unityでの変更方法も!フォントまとめサイト3選とフォントの選び方

画像データ

Flappy Darumaで使われている画像データは、ドロー系描画ソフト Inkscapeで作成しました。
ドロー系は、図形を扱うのが得意な描画ソフトです。

今回作成した土管や地面は四角形などの単純な図形の組み合わせで簡単に作ることが出来ました。
ダルマの画像は、インターネットの画像検索結果を参考にして、鉛筆ツールなどで書きました。

サイズはあとで変えることも出来ますが、ゲームの画面サイズに合わせた大きさで画像を作っていくと効率が良いと思います。
今回のゲームの画面サイズは500×700ピクセルなので、それにあわせたバランスで画像データを作成しました。

Inkscapeは、あとから図形や線や配色を微調整でき、絵を描くのが苦手な人でも画像データを作りやすいと思います。
しかし、多機能なソフトなので、最初は多くの機能を使いこなそうとせず、必要な機能だけを使い、次第に慣れていくと良いでしょう。

音声データ

Flappy Darumaで使われている音声データは、ボタンを押したとき・ジャンプしたとき・ぶつかったときなどの効果音だけです。

今回は簡単に効果音が作れるBfxrというソフトを使って作成しました。

Bfxrでは、ウィンドウの左上の[Picup/Coin]や[Jump]などのように効果音の種類を表すボタンを押すことで、種類に応じた効果音をランダムに作ってくれます。
そのため、一から波形や楽譜を入力しなくても簡単に効果音を作ることができます。

効果音を少し調整したいという場合はウィンドウの中央で細かな設定を手動で行うことができます。
納得のいく効果音ができたら、[Export Wav]ボタンを押して.wavファイルとして保存できます。

さまざまな効果音作成ソフトがありますが、Bfxrならばボタンを押すだけでたくさんの効果音を作ることができるので、初心者にもお勧めです。

 

効果音はフリー素材として公開しているサイトが多いので、ゲーム開発に慣れないうちはそれらのサイトを利用するとよいでしょう。

まとめ

今回は、これから制作するゲーム「Flappy Daruma」や連載の流れを紹介した後に、ゲームの仕様や制作プロセスを考え、ゲーム制作の最初の一歩を踏み出しました。

次回は、今回作成した素材の中から背景と地面の画像を使って、背景が無限に右から左にスクロールする機能の作り方を紹介していきます。
無限スクロールといっても、とてもシンプルな方法で実装していますので、次回も気軽に読んでいただけると幸いです。

オススメアプリ!渋谷で気軽に友達を作れるアプリが登場!