💡

Unity初心者向け|Tilemapで2D背景を作る方法

に公開

はじめに

先日、unity learnのチュートリアルでTilemapという機能を使って2D背景を作成する方法を学びました。

https://learn.unity.com/course/2d-beginner-adventure-game/unit/player-character-and-movement/tutorial/OLD-create-a-basic-2d-gameplay-environment?version=2022.3

チュートリアルで一通り操作しただけでは、何が起きているか理解しきれないところがあったので、こちらの記事で背景の作り方をまとめていきたいと思います。

同じようにUnityで2Dゲーム作りを始めた方の参考になれば幸いです。

Tilemapとは

https://docs.unity3d.com/ja/2018.4/Manual/class-Tilemap.html

Tilemapとは、2Dの背景、マップなどを作成するためのアセットを格納、処理するためのシステムです。
Tilemapを使うことで2Dの地形やマップを、タイルを並べて効率よく作ることができます。

背景作成のおおまかな流れ

背景を作成する大まかな流れは下記のとおりです。

  • GridとTilemapの作成
  • Tile Assetの作成
  • Tile Paletteを使用してマップを描画
  • レイヤー調整

背景の作成

TileMapの作成

ヒエラルキーで2D Object > Tilemap > RectangularでTilemapを作成することができます。

TilemapはGridの子オブジェクトとして作成されます。

Gridは設定に従ってタイルを整列させるための仕組みです。Cell Layoutを変更することで、セルの形状を四角や六角形に変えることもできます。

Tile Assetの作成

Tilemapに配置するためのタイルを作成していきます。
Projectウィンドウで Create > 2D > Tiles > Rule Tileを選択します。

Rule Tileは、隣接条件によって表示するタイルを変更することのできるタイルです。
例えば、上にタイルがある場合は、Aというタイルを表示するなどの表示制御が可能です。

今回はルールまでは設定せずにデフォルトの表示を設定します。
Rule tile Default SpriteのSelectをクリックすることで、表示するアセットを設定することができます。

これでTilemapに描画するためのアセットは準備できました。

Tile Paletteを使用してマップを描画

Tile Paletteは、TilemapにTile Assetをペイントするためのツールです。
Tile Assetをドラッグアンドドロップしながら、Tilemapに配置することもできるのですが、それだと大変なのでTile Paletteを使用してマップを作成していきます。

Tilemapをクリックすると、シーンビューにOpen Tile Paletteが表示されているので、そちらをクリックします。

Tile Paletteに背景として使いたいタイルをドラッグアンドドロップします。
Tileを選択し、ブラシツールでTileをTilemapに配置したり、消しゴムでタイルを消すことができます。

レイヤー調整

Order in layerに基づくレイヤー調整

プレイヤーの上に背景が描画されてしまうと、プレイヤーが見えなくなり、ゲームがプレイできなくなります。
そのため、背景は常にプレイヤーの後ろに描画される必要があります。

ヒエラルキーでTilemapオブジェクトをクリックすると、インスペクターにOrder in layerという設定項目があります。
値が小さいオブジェクトから描画されるため、-10などの小さい値を入れておくことで、背景がプレイヤーよりも後ろに描画されるようになります。

y軸位置に基づくレイヤー調整

下記の動画のようにy軸の場所によって表示順序を変えたい場合があります。
動画の場合は、プレイヤーが木よりも下にいるときはプレイヤーを前面に表示し、上に行った時は後ろに描画したいです。

2Dレンダリング方式を制御している設定アセットであるRenderer2Dの設定を調整することで実現できます。
プロジェクトウィンドウでSettings > Renderer2Dを選択します。
Transparency Sort ModeをCustom Axisに変更した上で、Transparency Sort Axisの値をx:0, y:1, z:0に設定することでy軸位置に基づいてレイヤー調整できるようになります。

また、オブジェクトのどの位置を基準点としてy軸位置を計算するかは、Sprite RendererのPivotで設定することができます。
Sprite RendererのSprite Sort PointをPivotにし、Sprite EditorでPivot(青い丸のとこ)を調整することで、y軸判定位置を調整できます。

Pivot位置を調整することで、先ほどとは違うy軸位置でプレイヤーが後ろに描画されるようになりました。

終わりに

Tilemapを使った背景作成方法について説明しました。
Tilemap作成、Tile Asset作成、Tile Paletteでの描画、レイヤー調整と一通りの流れを説明しました。
他にも、タイルとプレイヤーの衝突判定を実装して、プレイヤーが木をすり抜けられないようにしたり、ダメージを与えるタイルを配置することもできます。

Unity learnに説明があるので興味のある方は参考にしてみてください。
https://learn.unity.com/course/2d-beginner-adventure-game/unit/game-environment-and-physics/tutorial/OLD-set-up-tilemap-collision?version=2022.3

関連記事

https://zenn.dev/sasshi_i/articles/369a00ce5cd8b4

https://zenn.dev/sasshi_i/articles/2ef2960f3e40d0

Discussion