【第二回】UnityでAndroidゲームアプリを作る ~ステージ作り~

本連載について

• 本連載では、私が趣味で個人開発しているAndroidゲームの作成過程を記録していこうと思っています。
• 作るゲームは2Dの横スクロールアクションにしていこうと思っています。
• 前回の記事はこちら

本記事について

本記事では以下の内容を記載します。使用するUnityは2020.3.27f1です。

• 前回の記事で集めた素材を加工し、ステージ作りに使用出来るようにする。
• ゲームのステージ背景を用意する。
• ゲームのステージに地面等を配置する。

背景の準備

前回の記事で素材を集めてきましたが、集めただけではゲーム内で使用するための準備は整っていません。以下の手順でまず背景の準備を行います。

1. 以下のように、前回の記事で集めた背景用素材の「Free 2D Cartoon Parallax Background」のフォルダから、背景画像として使いたい画像を適当に選んで、スクショ左上のScene(人によって画面配置は違うと思いますが私の場合。)にドラック＆ドロップします。
   ドラック&ドロップした後、Hierarchyのところにその画像ファイル名が表れてくると思うので、私は名前を適当に「SnowBackground」とかに変えました。
2. 上記で私の場合は左下に「Game」というパネルがありますが、これはゲーム開始時にMain Cameraから見た時の見た目、すなわちスマホ画面上での見た目を表しています。後でカメラ設定はキャラクターを追尾するように変更するので、ここはあまり気にせず、ぱっと見いい感じに映るように配置しておけばテンションが上がっていいと思います。
   ただし、上のSceneで配置する背景画像の大きさは、カメラよりも大きめのサイズにしておいた方が、あとでキャラクターが動き回っても、背景なしになりづらいと思うので、私はちょっと大きめにしています。
3. 忘れてはいけないのが、以下のSorting layerの設定です。Sorting layerは画面上でオブジェクトが重なっているときにどの順番で何を表示するかを決めるもので、これが適切に設定されていないと、背景にキャラクターが隠れてしまったり、色々と不都合が出てきます。
   1. まず、以下のようにSprite Rendererの中からSorting layerを探して、Add Sorting Layer...をクリックします。
   2. すると以下のようにSorting Layersというのが出てくると思います。最初はDefaultしかないので、「+」ボタンを押してLayerを追加します。私はBackgroundとかいう名前にしておきました。
   3. Sorting Layersは、上にあるものほど画面上では奥になります。Backgroundは常に一番奥にいてほしいので、以下のようにLayerの左側を掴んで上にドラックして、BackgroundのLayerがSorting Layersの中で一番上に来るようにします。
   4. 上記でSorting Layersを追加した後は、忘れず元の画面に戻って、背景画像のSorting Layerを以下のようにBackgroundにセットします。

上記までの手順で背景画像の準備は終わりです。お疲れ様でした。

Tilemapの作成とTileの準備(地面作りましょう)

先程までの手順で背景を準備しました。続いて地面を用意したいと思います。

1. キャラクターが歩く地面用のTilemapを作成します。後ほど前回の記事で集めた素材をTileに加工してステージを作っていきますが、そのTileを配置するためにTilemapが必要になります。今回は四角いTileを配置していこうと思うので、以下のように「Hierarchy」を右クリックして、2D Object->Tilemap->Rectangularを選択します。
2. すると以下のようにTilemapが作成され、Sceneの画面に、方眼が出てきます。名前は分かりやすいように「Terrain」としておきました。
3. 続いて、上記のTilemapに配置する地面用のTileを作っていきます。（ここで、前回の記事で「Pixel Adventure 2」というAssetをImportしていましたが、「2」の方には地面用のpngがなく、敵キャラのイラストしか入っていないことに気づきました。以降「Pixel Adventure 1」も合わせて使用していくので、持っていない方はダウンロードしてインポートして下さい。）
   1. 以下のように、Pixel Adventure 1の中にTerrainというフォルダがあります。この中のTerrain (16x16)と書いてある方を選択し、Sprite ModeをMultiple、Pixels Per Unitを16にセットし、Applyをクリックした後Sprite EditorをクリックしてSprite Editorを起動します。
      1. 横っちょにSlicedと書いてある既にSlice済みのタイルがありますが、練習のためにそれは使わず、自分でSliceします。
      2. Pixels Per Unitを16にセットしたのは、この素材名に16x16と記載してある通り、このpngが16x16を想定して作成されているからです。
   2. Sprite Editorを開くと、以下のような画面が開くと思うので、Grid By Cell Sizeを選択します。
   3. そうすると、以下のようにセルサイズを入力できると思うので、16x16にしてSliceをクリックします。
   4. すると以下みたいになんだかとってもいい感じに区分けされるので、Sprite Editorの右上の方にあるApplyを押して適用します。
   5. 続いて、これをTile paletteに読み込ませてSceneに配置できるようにする必要があります。まず、以下のようにTile Paletteを開きます。
   6. すると以下のような画面が開くと思うので、Tile Paletteの名前を好きなものにしてCreateボタンを押します。
   7. そのあと、先程Sliceしたpngを上記のTile Paletteにドラック&ドロップすると、以下のようなかわいらしい感じにタイルが配置されます。(テンション上がりますね)
   8. この後はセンスが問われるお絵描きタイムですが、以下のようにTile PaletteでPaint with active brushとかを選択し、使用したいTileをTile Paletteから選択し、Sceneの方のGridに持っていくと、以下スクショの左のようにScene上やCameraから見てそのタイルが描画されるようになるという仕掛けです。

これでステージ背景とステージの構成要素をお絵描きする準備が整いました。お疲れさまでした。

次回予告、その他

• 次回の投稿では、キャラクターの配置と、そのキャラクターを作った大地に立たせる感動のシーンを書こうかと思っています。
• 背景とかをちゃんとするだけで、突貫工事で私が作ったこのアプリよりも圧倒的にクオリティが高くて楽しそうなゲームに見えますね。。
  • 友人からは、思ったより面白くて草、というありがたいお言葉を頂きました