【Unity 2Dゲーム入門】Flappy Bird Gameをカスタマイズする(1/4)

はじめに

前回の記事「「Flappy Bird Style Game」をUnity Visual Scriptingで作ってみよう」では、Unity Learnで公開されている入門向けチュートリアルで作成するFlappy Bird Style GameをVisual Scriptingで作り直してみた。

今回はそのFlappy Bird Style Gameのサンプルゲームをカスタマイズしてオリジナルのゲームに作り変えてみたい。ゲームシステムなどは流用するので完全にオリジナルとは言い切れないところもあるが、サンプルゲームをカスタマイズするというのは、ゲーム開発の学習者にとっては入門レベルを卒業して、オリジナルゲームを作るための最初の足掛かりとして有用な方法だろう。

ここでも引き続きVisual Scriptingを使い、できるだけコードレスで作りたいと思う。ただ、新しい処理を追加するときにはやはり既存のC#のコードなどを参考にする必要が出てくる。作成しながら感じたのだが、そのようなC#コードからVisual Scriptingのノードへの置きかえ作業をしていると、ひと手間増えただけで結局今までのコーディングと何が違うのだろうかと考えてしまう。僕のプログラミングスキルが未熟なのか、真にコードレスのためには何かが足りないのだろう。

Unityでカスタマイズ後、WebGLでビルドして公開した。完全にオリジナルというわけではないし、まだ細部の描写が不十分なところはあるが、グラフィック周りのアートワークは全て自作したので自分の作ったゲームを実感できる。

PCのブラウザでこのWebゲームを遊ぶと難易度が低すぎて簡単すぎてしまうが、モバイルの縦型の画面で遊ぶと途端に難しくなる。Flappy Birdゲームがモバイルで一時期流行したのがなんとなく分かる気がした。レベルデザインが元々モバイル向けなのかもしれない。とりあえずPC版で遊ぶにはもう少し難易度の調整が必要だろう。

ということで、本記事ではUnityの入門チュートリアルで作成したFlappy Bird Style Gameのカスタマイズの過程を記載していきたい。

カスタマイズしたゲームは最終的にWebGLでビルドし「 Space Flying Bird」という名前で公開しているので参考にしてほしい。また、WebGLでのビルドとWeb上への公開についてはこちらの記事「ゲームをウェブで公開する方法」を参照してほしい。

オリジナル2Dアートの制作

サンプルゲームの2Dアート

オリジナルのイラストレーションを作成し、サンプルゲームの2Dアートと置きかえていくのだが、参考までにサンプルゲームで使われている2Dアート4種類を示しておきたい。すべてPNGファイルで作成されている。いずれもシンプルな絵柄が特徴的なグラフィックアートだと思う。

BirdHero.png
BirdゲームオブジェクトのSpriteとしてゲームステータスの状態に応じて3種類用意されている。これらはUnityのAnimatorでコントロールされる。( 1.1)
1.1
ColumnSprite.png
障害物となる柱用のSpriteである。ステージ右から左に移動させる。( 1.2)
1.2
GrassThinSprite.png
地面用のSpriteである。( 1.3)
1.3
SkyTileSprite.png
空となるバックグラウンドのSpriteである。( 1.4)
1.4

上記で紹介した2Dアートを使用したサンプルゲームの全体的な2Dグラフィックスイメージは下記となる。このイメージを自作の2Dアートで変えていく作業を行う。( 1.5)

1.5 Sample Game Overview

ラフスケッチの作成

オリジナルの2Dアートの作成方法だが、今回、あくまでも一例として作成の流れを紹介したい。とりあえず、好きなキャラクターをイメージして1枚スケッチを描いてみる。そしてラフスケッチからそれぞれの2Dアートを仕上げていきたい。今回、僕は宇宙をイメージしてラフスケッチを描いた。( 1.6)

1.6 Rough Sketch

オリジナル2Dアートの作成

まずはメインキャラクターだが、3種類のグラフィックアートを用意する。特にドット絵というわけではなく、ラフスケッチの下書きイメージをClip Studio Paint Proに読み込んで普通のイラストレーションとして作成した。( 1.7)

次に障害物となる柱だが、これはラフスケッチでは描かなかったので、宇宙にあるタワーをイメージしてClip Studio Paint Proで一から作成した。色々と納得しないところはあるが、給水塔をイメージして描いている。( 1.8)

1.7 2D Art for Player

1.8 2D Art for Column

続いて地面となるイラストだが、月面のクレーターをイメージして描いた。( 1.9)

最後に背景用のグラフィックとして複数の写真をコラージュして宇宙的な背景を作成する。ここではコラージュのためにAffinity Photoを使う。一応スクロールさせても切れ目が目立たないように簡単な工夫をしている。同じ正方形の画像を2枚並べて、どちらか一方を左右反転にする。2つの画像の真ん中のつなぎ目のところが少し目立つのでAffinity Photoのコピーブラシツールで目立たないようにつなぎ目をなじませる。( 1.10)

1.9 2D Art for Ground

1.10 2D Art for Space

ここまでで作成したオリジナル2Dアートを使用したゲーム完成イメージは下記の通りとなる。グラフィックアートのイメージを変えただけで、だいぶ違った印象になるだろう。( 1.11)

1.11 Original 2D Art

最近、PCでイラストを描くようになったばかりなのでまだ慣れていないというのもあるのだけれど、ゲーム開発の中でアートワークの制作というのはとても時間がかかる作業のひとつだと思う。

Unity Editorでの2Dアートの適用

2Dアートのインポートと各Spriteの設定

それぞれオリジナルの2Dアートが作成できたら、あとはUnityのEditorでの作業となるが、作成した2DアートのイメージファイルをProjectウィンドウに直接ドラッグ＆ドロップで読み込むのが一番簡単だろう。ファイルを読み込んだら、Projectウィンドウ上でイメージファイルを選択しInspectorを表示させ、Pixels Per Unitをそれぞれ適切な値に調整する。基本的には元の2DアートのSpriteの値を参考にすればよい。( 1.12)

あとはそれぞれのゲームオブジェクトのSprite RendererコンポーネントのSpriteパラメータに新しいSpriteを設定するだけである。( 1.13)

1.12 Pixels Per Unit - Sprite

1.13 Spite Renderer

各ゲームオブジェクトの設定変更

Spriteを入れ替えた各ゲームオブジェクトの設定をオリジナル2Dアートに合わせ微調整する。

Prefabである障害物のColumnsゲームオブジェクトに新しいSpriteを設定したところ、地面の後ろに隠れる範囲が広がってしまったので、前面に表示させるためSprite RendererコンポーネントのSorting LayerをMidgroundからForegourndに変更しておく。( 1.14～1.17)

1.14 ColumnSprite

1.15 Midground

1.16 Sorting Layer

1.17 Foreground

また、BirdゲームオブジェクトにはIdle、Flap、Dieという3つのアニメーションが設定されているので、3種類のSpriteを変更するため、それぞれAnimationウィンドウで各アニメーションを指定してタイムライン上に直接ドラッグ＆ドロップで変更する。ここではIdleの変更例を示す。( 1.18, 1.19)

1.18 Before Change

1.19 After Change

BirdゲームオブジェクトのコライダーとしてPolygon Collider 2Dコンポーネントが設定されていたが、今回新たに追加したSpriteは少々複雑な形状をしているため、うまく自動でコライダーが設定されなかった。そのため、Polygon Collider 2Dコンポーネントは削除し、Capsule Collider 2Dコンポーネントを追加した。コライダーコンポーネントはSpriteの形状に合わせて選べばよいと思う。( 1.20, 1.21)

1.20 Remove Polygon Collider 2D

1.21 Add Capsule Collider 2D

最後にオリジナル2Dアートの適用前後のゲームプレイビデオを下記に載せておく。( 1.22, 1.23)

1.22 カスタマイズ前

1.23 カスタマイズ後

次はサウンドを追加する。