[Unity] 2Dシューティングゲームを作る [チュートリアル]

株式会社プライムストラクチャーのエンジニアのSayaです。

今回は Unity の公式から 2D のシューティングゲームを作るチュートリアルを参考にしながら簡潔にまとめてみたいと思います。

環境設定

実行環境

今回のチュートリアルは macOS Mojave, Unity 2018.2.20 で行いました。

Unity をインストール

Unity を以下のリンクからダウンロードしてインストールします。
Unityをインストール

ダウンロードするときに WebGL Build Support を選択して WebGL モジュールも一緒にインストールします。

プロジェクトのダウンロード

今回作るプロジェクトのデータが入っているファイルを以下のリンクからダウンロードします。
今回のプロジェクトファイルをダウンロード

Unity を起動

インストールした Unity を開き、任意の手段でアカウントを登録します。

ログインできたら右上の Open ボタンから先ほどダウンロードした Unity プロジェクトを開きます。

プラットフォームの変更

メニューの File -> Build Settings… でプラットフォームを PC から WebGL に変えます。

モジュールがまだダウンロードされていない場合は Open Download Page をクリックするとダウンロード出来ます。
その場合はダウンロードしたら Unity を開きなおしてまたプロジェクトを開いてください。

WebGL を選択して Switch Platform ボタンを押すことで変更出来ます。

レイアウトの変更

Unity の編集画面のレイアウトを変更します。
右上の Layout から 2 by 3 を選択します。

プロジェクトビュー右上の「≡」をクリックして One Column Layout を選択します。

ゲーム画面サイズの変更

ゲームビューのスクリーンサイズを変更します。

以下の画像のように「+」ボタンをクリックします。

以下の設定にして OK ボタンを押します。
Label: Web
Type: Fixed Resolution
Width & Height: 640 480

2D モードの確認

Scene ビューから 2D ボタンが押されて 2D モードになっていることを確認します。

シーンの保存

Hierarchy ビューで表示されている現在のシーンが Untitled になっているので、右クリックで Save Scene As を選択して Game Scene と名付けます。

Sprite Editor で1枚のテクスチャを分割して複数のスプライトを作成する

スプライトとは、ゲーム内に登場する 2D 画像データの事を指します。
1 枚のテクスチャに表示されている画像を分割して 1 枚ずつ使えるようにします。

Texture Import Settings の設定

Project ビューから Assets -> Sprites -> Spaceship と進み Spaceship ファイルを選択します。

Inspector ビューから Texture type が Sprite になっていることを確認します。

今回のように 1 つのテクスチャに複数のスプライトがある場合は、Sprite ModeMultiple にします。

また Pixels Per Units50 に変更します。
1 ユニットが Unity では 1メートルに相当するため、この設定では 1 ユニットに 50 ピクセルが収まります。

設定出来たら Apply ボタンを押します。

Sprite Editor で画像の分割

複数のグラフィックを一つのテクスチャに含めてから分割した方が効率が良いため、Sprite Editor で複数のスプライトに分割します。

Texture Import Settingsの Sprite Editor ボタンを押して Sprite Editor を開きます。

左上の Slice ボタンから Type を Automatic から Grid By Cell Size に変更します。

Pixel Size を X:48, Y:48 に設定します。

Slice ボタンを押してテクスチャが枠線で区切られたら、右上の Apply ボタンを押します。

すると Project View が以下の画像のようになります。

Player (自機) のスプライトアニメーションの作成

Animation Controller と Animation Clip ファイルの作成

複数のスプライトを Scene View にドラッグ&ドロップすると、自動で Animation Controller と Animation Clip ファイルが作成されます。

今回は Spaceship_0 から Spaceship_3 までの 4 つのスプライトを選択して Scene ビューにドラッグ&ドロップします。

すると 4 つのマークが描かれた Animation Controller と 再生ボタンマークの Animation Clip が作成されます。

Animation Controller ファイル名を右クリック -> Rename などで Player に、Animation Clip のファイル名を Normal に変更し、Assets フォルダ配下に Animations / Player フォルダを作成してそこにドラッグ&ドロップします。


そして Hierarchy ビューで Spaceship_0 の名前を Player に変えます。

Enemy (敵) のスプライトアニメーションの作成

Spaceship_4 から Spaceship_7 までの 4 つを選択し、先ほどと同じように Scene ビューにドラッグ&ドロップして AnimatorController と AnimationClip ファイルを作成します。

Animation Controller ファイル名を右クリック -> Rename などで Enemy に、Animation Clip のファイル名を Normal に変更し、Assets フォルダ配下に Animations / Enemy フォルダを作成してそこにドラッグ&ドロップします。

そして Hierarchy ビューで Spaceship_4 の名前を Enemy に変えます。

弾の作成

Project ビューから Sprites -> Bullet -> Bullet と進み、Sprite Mode を Multiple にして Apply ボタンを押し、 Sprite Editor を開きます。

Slice ボタンを押して Typeを Grid By Cell Size にし、Pixel Size を X:16, Y:16 にして Slice ボタンを押します。

スライスしたら Apply ボタンを押して、Pixels Per Units が 100 になっていることを確認します。

爆発のアニメーションの作成

Project ビューから Sprites -> Explosion -> Explosion と進み、Sprite Mode を Multiple にして Apply ボタンを押し、 Sprite Editor を開きます。

Slice ボタンを押して Typeを Grid By Cell Size にし、Pixel Size を X:80, Y:80 にして Sliceボタン -> Applyボタン を押します。

Explosion を左の下三角ボタンで展開し、Explosion_0 から Explosion_10 までの11 つを選択し、Scene ビューにドラッグ&ドロップして Animation Controller と Animation Clip ファイルを作成します。

Animation Controller ファイル名を右クリック -> Rename などで Explosion に、Animation Clip のファイル名を Explode に変更し、Assets フォルダ配下に Animations / Explosion フォルダを作成してそこにドラッグ&ドロップします。

そして Hierarchy ビューで Explosion_0 の名前を Explosion に変えます。

プレハブ化する

今まで作成した Player 、Enemy、Explosion を Prefab ファイルとして保存します。
プレハブ化することで、同じゲームオブジェクトが作りやすくなります。

Project ビューから Assets フォルダ配下に Prefabs フォルダを作成し、フォルダに向けてゲームオブジェクトを1つずつドラッグ&ドロップします。

3 ともプレハブ化したら、Hierarchy ビューから Player 、Enemy、Explosion を削除します。

###
続く

参考文献

2Dシューティング – Unity
スプライトとスプライトアニメーションの作成 – Unity