RTA Develop Act.1「フラッピーバード」-クレイティアのGD覚書

はじめに

先日、新コーナー「That's談」を開始しましたが今回も新コーナーをお届けします。

その名も「RTA Develop」です。

「RTA」とはゲーム用語であり、リアルタイムアタック（Real Time Attack）の略で、ゲームクリアまでのタイムを競う競技のことです。
本シリーズでは、RTAの感覚でゲームをできるかぎり短時間で完成させることを目的としています。

必要最低限のすくない工数でゲームとして成立してる作品を、1時間以内を目安に完成させられるよう解説していきます。

本記事はその第一弾です。

楽器演奏でも、語学学習でも、絵を描くことでも、もっともシンプルで手堅い上達方法はひたすら数をこなすことです。

音階を奏でるように、英単語を覚えるように、デッサンで筆を走らせるように、ゲーム開発でもスモールステップを反復して確実にステップアップしていくのです。

最初から1本の大作を長時間かけて制作するよりも、小規模のゲームをひたすら量産しましょう。
試行錯誤する段階は基礎をマスターした後です。

なお、当シリーズは初歩をすでに習得済みの方を対象としており、これまで当ブログのTIPSやチュートリアルでご紹介した機能以外は使用しません。

RTA Developはこれまでのおさらいを目的としています。

初歩の習得がお済みではない方はお先に下記のページへどうぞ

ビギナー向け記事一覧

この5つの記事の内容を前知識として習得してください。そのほかの記事では、すでにこれらを習得していることを前提に進めていきます。

今回は世界的に有名な「Flappy Bird」を作成します。
予め、オリジナルをプレイして必要なイベントをイメージしておきましょう。

🐦Flappy Bird：https://flappybird.io/

使用するグラフィックはすべてこちらで用意しますので、自前でご用意する必要がなくアセットを探す時間も省けます。

本記事のチュートリアルを行うには、事前にイメージファイルをダウンロードしておいてください。
本記事は下記ファイルをダウンロードしていることを前提に解説していきます。

イメージファイル

作業に取りかかる前に頭の中でシミュレーションして、滞ることなくスムーズな流れ作業のように、一気に完成させられるように心がけましょう。

それでは、ご準備はよろしいでしょうか？

画像のインポート

まず、ダウンロードしたファイルをすべてインポートしましょう。
プレイヤーとなるBirdだけアニメーションしますので、一枚の画像からアニメーションのフレームを一括で読み込みましょう。

1フレームのサイズが32×32なので10分割になります。

他の画像は静止画なので、そのまま読み込みます。

Pipe1
Pipe2
Retry
CameraXPosition
ScoreAddition

これらはスプライトで、それ以外はタイルスプライトとして読み込みます。

Pipe1、Pipe2、ScoreAdditionは「画面外で破棄」のビヘイビアを追加して、マージンを100くらいに設定してください。

Birdのスプライトには「プラットフォーマーキャラクター」のビヘイビアを追加します。

Platformには「プラットフォーム」のビヘイビアを追加します。
プラットフォームキャラクターの設定は以下の通りに変更します。

デフォルトコントロールを無効にする。
重力：750
ジャンプ速度：500
ジャンプ持続時間：0.005
最高落下速度：1500

ほかの項目は変更なしです。

つぎに「ScoreAddition」の衝突マスクを図のように編集します。
ちょうど青い部分のみに衝突の判定があるようにします。

変数の宣言

つづいて、先に使用する変数をあらかじめ宣言しておきましょう。

まずはシーン変数から。

右クリックメニューからシーンプロパティを開きます。

ついでにシーンの背景色もライトブルーに変更します。

宣言するシーン変数は5つ

Score：数値の変数
HighScore：数値の変数
Start：真偽値の変数
Speed：数値の変数
GameOver：真偽値の変数

この中でSpeedだけ初期値を200にしておきます。

つぎにグローバル変数です。

プロジェクトエディタからグローバル変数「HighScore」を宣言します。

オブジェクトの配置

各オブジェクトをシーンに配置します。

HighScore、Scoreと「Are you ready?」を表示するためのテキストオブジェクトも作成して配置してZオーダーを調整します。
そして、Platformのサイズは2880に変更し、レイヤーを「Platform」に設定します。
レイヤー「Platform」に「CameraViewPoint」も配置します。

事前に配置するのはこれだけです。
ほかのオブジェクトはこのあと、イベントで生成します。

シーンのセットアップ（初期設定）

ではイベントエディターに移りましょう。

まずは「シーンが始まった」の条件でセーブデータを読み込んだり、テキストの変更、座標の変更などを行います。

Platformの無限スクロール

つぎにPlatformを無限スクロールさせるためのイベントを追加します。

シーンに配置した「CameraViewPoint」をフォースによる移動で、角度0方向へ移動させます。

移動速度はシーン変数「Speed」を呼び出します。

「CameraViewPoint」のX座標が1440を超えたら、X座標を-720に変更します。

「CameraViewPoint」がシーン変数「Speed」の速度で、常に角度0（右方向）へ向かって移動し、X座標が「1440」の地点に到達すると「-720」の地点に戻ります。

これを繰り返します。

ここで、レイヤー「Platform」のカメラのX座標に「CameraViewPoint」のX座標を代入します。

ベースレイヤーのカメラは固定されたまま、Platformレイヤーのカメラだけが移動することでPlatformオブジェクトが無限スクロールするように見えます。

開始前のスタンバイ

ゲームスタート前のスタンバイ状態を作成します。

まず、シーン変数「Start」の真偽値が偽の状態のとき、Playerのプラットフォームキャラクターのビヘイビアを無効にします。

その状態でスペースキーを押すかマウスをクリックするとシーン変数「Start」の真偽値を真に変更し、Playerのプラットフォームキャラクターのビヘイビアを有効にします。

そして「Are you ready?」と表示しているテキストオブジェクトを削除します。

土管の生成と移動

拡張機能「Repeat every X seconds」を追加します。

シーン変数「Start」が真で「GameOver」が偽のとき、3.5秒ごとに「Pipe1」のインスタンスを下記の位置に生成します。

X座標:750

Y座標:660+RandomInRange(-254, 254)

「Pipe2」のインスタンスを「Pipe1」のY座標を基準に生成します。

「ScoreAddition」のインスタンスも「Pipe1」のY座標を基準に生成します。

シーン変数「GameOver」が偽のとき、「Pipe1」「Pipe2」「ScoreAddition」のインスタンスをシーン変数「Speed」の速度で角度180の方向へ移動させます。

このイベントによって、3.5秒ごとにランダムな高さに土管が生成され、Platformのスクロールと同じ速度で左方向へ移動します。

Playerのアクション

シーン変数「Start」の真偽値が真で「GameOver」の真偽値が偽のとき、スペースキーを押すかマウスクリック（スマホの場合は画面タッチ）をしたらBirdをジャンプさせます。

ジャンプをさせたあとに再ジャンプを許可することで、連続ジャンプを可能にします。

このとき、Birdの角度を-45に変更し、0.05秒後に元に戻します。

スコアの加算

Playerが土管の間にある「ScoreAddition」に衝突することでシーン変数「Score」を増加させ、テキストオブジェクト「Score」を更新します。
そのあとで「ScoreAddition」を削除し、Scoreが重複して加算されることを防ぎます。

そして、シーン変数「Score」の値がグローバル変数「HighScore」の値を超えたとき、グローバル変数「HighScore」の値をシーン変数「Score」に更新します。

ゲームオーバー

まずは、「Object」という名前のオブジェクトグループを作成します。

Birdがオブジェクトグループ「Object」と衝突したら、シーン変数「GameOver」の真偽値を真にします。

同時に、Storageに「HighScore」の値を保存します。

シーン変数「GameOver」の真偽値が真のとき、Birdは操作を受け付けなくなるので落下します。
落下中、アニメーションを停止して角度を45に変更します。

Birdが落下してPlatformに接地したら「Retry」のインスタンスを画面中央に生成します。

このときに、スペースキーを押すかマウスをクリックするとシーンを変更してリセットします。

オンラインデモ

こちらからオンラインデモをプレイできます。

おわりに

さて、完成までにどれくらいの時間を要したでしょうか。

最初に頭の中でどういうイベントが必要かをある程度イメージできれば、作業はスムーズに進みます。

小規模のゲームを反復して作成すればするほど、具体的にイメージしやすくなるでしょう。

また、今回制作したゲームに、コインなどスコアアップアイテムを追加したり、土管以外の障害物を追加したり、独自のアレンジを加えるなどオリジナリティを出してみるのもいいでしょう。

独自性を持たせたら、アプリストアなどでご自身の作品として公開してみましょう👍
（本記事で配布したイメージは改変やコピー、個人、商用を問わずご自由にご使用ください！）

RTA Develop Act.1「フラッピーバード」