UnityのTilemap 徹底まとめ⑤ | Isometric Tilemapの重なり順を理解する

前回は、Isometric Tilemapを作成し、Tile Paletteを使ってタイルを配置するところまで進めました。

Isometric Tilemapは、斜め上から見たようなマップを作れる便利な機能です。
ただし、Rectangular Tilemapと比べると、少し分かりにくくなる部分があります。
それが、重なり順です。

Isometric Tilemapでは、地面タイルだけを並べているうちは、それほど難しくないのですが、木や建物、壁、プレイヤーなどを配置すると、

「プレイヤーが木の前にいるのに、後ろに隠れてしまう」
「建物の後ろにいるはずなのに、プレイヤーが手前に表示される」
「タイルの重なり方が不自然に見える」

といった問題が出てくることがあります。

今回は、Isometric Tilemapで重要になる、重なり順とプレイヤーとの前後関係について確認していきます。

Isometric Tilemap の重なり潤

Rectangular Tilemapでは、タイルが上下左右にまっすぐ並びます。
地面タイルを置くだけであれば、基本的には重なり順をあまり意識しなくても問題ありません。

一方、Isometric Tilemapでは、タイルが斜め方向に並びます。
見た目としては、斜め上からマップを見ているような形になります。
そのため、木や建物のような高さのあるオブジェクトを置くと、プレイヤーと重なって見える場面が出てきます。

たとえば、プレイヤーが木の前にいるときは、プレイヤーを手前に表示したいです。
反対に、プレイヤーが木の後ろに回り込んだときは、プレイヤーが木の後ろに隠れてほしいです。

このような見た目を作るためには、どのオブジェクトを手前に表示するかを考える必要があります。

表示順の基本を確認

Unityの2Dでは、SpriteやTilemapの表示順を決めるために、主に次の設定を使います。

・Sorting Layer
・Order in Layer

Sorting Layerは、大きな表示グループを分けるための設定です。
たとえば、

・Background
・Ground
・Player
・Object

のように、背景、地面、プレイヤー、オブジェクトを分けることができます。

Order in Layerは、同じSorting Layerの中で、どちらを手前に表示するかを決める数値です。
基本的には、数値が大きいほど手前に表示されます。

たとえば、GroundのOrder in Layerを0、Playerを10にしておけば、プレイヤーは地面より手前に表示されます。

地面とオブジェクトはTilemapを分ける

Isometric Tilemapでは、すべてのタイルを1つのTilemapに置くよりも、役割ごとにTilemapを分けた方が管理しやすくなります。
たとえば、次のように分けます。

・Ground Tilemap - 地面、床、道などを配置
・Object Tilemap - 木、建物、壁、柱などを配置
・Decoration Tilemap - 草、石、飾りなどを配置

地面は基本的に一番下に表示されればよいので、Ground Tilemapにまとめます。
一方、木や建物のように、プレイヤーとの前後関係が関係するものは、Object Tilemapに分けておくと調整しやすくなります。
1つのTilemapに全部入れてしまうと、あとから表示順を調整したいときに分かりにくくなります。
最初のうちから、地面とオブジェクトを分けて作っておくのがおすすめです。

Tilemap RendererのModeを確認する

Tilemap Rendererには、Modeという設定があります。

代表的なものは次の2つです。

・Chunk
・Individual

Chunk は、複数のタイルをまとめて描画するモードです。
地面タイルのように、細かい前後関係を気にしなくてよいTilemapでは、基本的にChunkのままで問題ありません。
複数のタイルをまとめて描画するため、処理が軽くなりやすいのが特徴です。

一方、Individual は、タイルを1枚ずつ個別に描画するモードです。
木や建物、柱、壁など、プレイヤーとの前後関係が重要になるTilemapで使うことがあります。
たとえば、プレイヤーが木の前にいるときは、プレイヤーを手前に表示したいです。
反対に、プレイヤーが木の後ろにいるときは、プレイヤーが木の後ろに隠れてほしいです。

このような表現をしたい場合、Object Tilemap 側の Mode を Individual にすると、タイルごとの位置をもとに表示順を扱いやすくなります。

ただし、Individualはタイルを個別に描画するため、Chunkより処理が重くなる可能性があります。
そのため、すべての Tilemap を Individual にするのではなく、前後関係が必要な Tilemap だけ Individual にするのがおすすめです。

プレイヤーとの前後関係を考える

Isometric Tilemapでは、プレイヤーがオブジェクトの前にいるのか、後ろにいるのかを見た目で表現することが大切です。

このとき、よく使われる考え方が、Y座標が低いものほど手前に表示するという考え方です。

2Dゲームでは、画面の下側にあるものほど手前に見えることが多いです。
そのため、
Y座標が高いものは奥。
Y座標が低いものは手前。
という考え方になります。

たとえば、木よりも下側にプレイヤーがいる場合は、プレイヤーを木より手前に表示します。
反対に、木よりも上側にプレイヤーがいる場合は、プレイヤーを木の後ろに表示します。

これにより、プレイヤーが木の前を歩いたり、木の後ろに回り込んだりしているように見せることができます。

動きで確認

重なり順は、静止画だけでは少し分かりにくいです。

プレイヤーを上下に動かして確認すると理解しやすくなります。
たとえば、木を1本配置して、その前後をプレイヤーが移動するようにします。
プレイヤーが木の下側にいるときは、プレイヤーが手前に表示されます。
プレイヤーが木の上側に移動すると、プレイヤーが木の後ろに隠れます。

サンプルで下のような仕組みを作ってみましょう。

1，Ground
地面のタイルマップを作ります。
・Tilemap Renderer の Mode は Chunk のまま
・Tilemap Renderer の Order in Layer は 0 のまま

2，Object
オブジェクトのタイルマップを作ります。
今回は1本の木を配置します。
・Tilemap Renderer の Mode は Individual
・Tilemap Renderer の Order in Layer は 10 にします。
　※Groundより大きければなんでもOKです。
木の根元がy座標の基準となるように、PivotをCenter Bottom に指定

3，Player
任意のオブジェクトを配置します。
サンプルでは「MyChar」という名前のオブジェクトを配置しました。
・SpriteRendererコンポーネント の Order in Layer は 10 にします。
　※Tilemap の Objectと同じにします
Playerも足元が y座標の基準となるように、PivotをCenter Bottom に指定

Playerには動きがわかるようにSampleのプログラムをアタッチしておきます。

public class MyChar : MonoBehaviour
{
    public float  speed = 2;//移動速度
    
    void Update()
    {   
        float  stepx=Input.GetAxis("Horizontal")*speed*Time.deltaTime;  //水平移動量
        float  stepy=Input.GetAxis("Vertical")*speed*Time.deltaTime;    //垂直移動量
        transform.Translate(stepx,stepy,0); //移動
    }
}

これで動かしてみます。Playerが木の陰に隠れたり、前に出たりするのがわかると思います。

Sort Orderの確認

Tilemap Rendererには、Sort Orderという設定もあります。

Sort Orderは、Tilemap内のタイルをどの方向から順番に描画するかを決める設定です。
Isometric Tilemapでは、タイル同士が斜めに重なって見えるため、Sort Orderの設定によって見え方が変わることがあります。
たとえば、奥にあるはずのタイルが手前に見えたり、重なり方が不自然に見えたりする場合は、Sort Orderを確認してみましょう。

今回のまとめ

今回は、Isometric Tilemapで重要になる重なり順について確認しました。

ポイントは次の通りです。

・Isometric Tilemapでは、タイルやキャラクターが重なって見える場面が多い
・Sorting LayerとOrder in Layerで、大まかな表示順を決める
・地面と木、建物などはTilemapを分けると管理しやすい
・地面TilemapはChunkで問題ない
・木や建物のTilemapではIndividualを使うことがある
・プレイヤーとの前後関係では、Y座標の考え方が重要になる
・重なり順は、静止画よりも動きで確認すると分かりやすい

Isometric Tilemapでは、ただタイルを並べるだけでなく、どれを手前に表示するかが大切になります。

特に、プレイヤーが木や建物の前を通るのか、後ろに回り込むのかによって、見た目の自然さが大きく変わります。

最初は難しく感じるかもしれませんが、まずは地面、木、プレイヤーだけの小さなマップで確認してみましょう。

次回はPlayerとTilemapの当たり判定についてまとめてみます。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。