【Unity】2Dタイルマップ⑦ Isometricなフィールドで高さを表現する

Unity 2020.2.1f1 Personal(2021年3月)

前回の続きです〜
前回作成した障害物はプレイヤーと同じ高さであるため衝突することができました。
今回は2Dタイルマップに高さの概念を与えて、地面と障害物の差を表現していきます。

茶色ブロックを地面、グレーのブロックを障害物とする

Unityフォーラムを参考にしました。

Isometric Z as Y

HierarchyからTilemapをIsometric Z as Yで作成します。
これによりTileのZ軸の値がY軸、つまり高さを表すようになります。

今回はTilemapオブジェクトをFieldとBlockの2つ作成します。

前回登場したTransparency Sort Modeを追加で修正します。
TilemapがIsometricの場合はTransparency Sort AxisのYを1にしました。
今回作成したIsometric Z as Yの場合は更にZの値をマイナスの値(今回は-0.49)に設定します。
この値を設定をしないとSceneビューとGameビューでTileの高さ設定が反映されません。

X:0 Y:1 Z:-0.49

また、下のScriptをMain Cameraに付けます。

using UnityEngine;
#if UNITY_EDITOR
using UnityEditor;
#endif    

[ExecuteInEditMode]
public class AxisDistanceSortCameraHelper : MonoBehaviour
{
    void Start()
    {
        var camera = GetComponent<Camera>();
        camera.transparencySortMode = TransparencySortMode.CustomAxis;
        camera.transparencySortAxis = new Vector3(0.0f, 1.0f, -0.49f);

#if UNITY_EDITOR
        foreach (SceneView sv in SceneView.sceneViews)
        {
            sv.camera.transparencySortMode = TransparencySortMode.CustomAxis;
            sv.camera.transparencySortAxis = new Vector3(0.0F, 1.0F, -0.49F);
        }
#endif
    }
}

AxisDistanceSortCameraHelper.cs

[ExecuteInEditMode]はプレイモードでなくてもScriptが実行されます。
カメラのTransparencySortの設定、開いているSceneビューのTransparencySortの設定を行っています。

それでは次にTilemapを設定していきます。
まずはField Tilemapから編集していきます。

Field Tilemap編集

Field Tilemapには衝突判定をつける必要がないので、

hiyotama.hatenablog.com

こちらの記事を参考にフィールドを作成していきます。
スプライトはこちらをご活用下さい。

field_block.png

それでは適当にTileを配置していきます。

Isometric Z as Yの設定でTilemapを作成する場合は、
Tilemap RendererのModeをIndividualにします。

Field Tilemapは以上です。

Block Tilemap編集

続いてBlock Tilemapを編集していきます。

先ほどと同様にTilemap RendererのModeをIndivisualに変更します。
そしてこちらにはTilemap Collider2Dコンポーネントを付けます。

続いてTilePaletteに前回作成したCustom Physics Shapeを設定したstone_blockを配置します。

hiyotama.hatenablog.com

stone_block.png

それではこちらのstone_blockタイルをSceneビューにて配置していきます。
・・・の前に、上の画像の赤枠で囲われている通り、
Z Positionを2に変更します。

このZ PositionこそがIsometric Z as Y設定におけるZの値、つまりTileの高さを表します。

Field Tilemapより１ブロック分上に表示される

Fieldで配置したTileにカーソルを合わせると、その１ブロック分上にBlock Tileが表示されているのが分かります。
それでは適当にBlock Tileを配置していきます。

一階層目にField Tilemap、二階層目にBlock Tilemapという形でタイルの高さを表現することができました。

前回の記事で作成したプレイヤーも使えます。
一点修正点がありまして、プレイヤーオブジェクトのposition.zを2に変更してください。
Tilemap以外のオブジェクトの高さもZの値で決まるためです。

Playerのposition.zを2に変更

Fieldの上に立ちBlockと同じ高さのプレイヤー

Blockを積み上げて壁にする

BlockのZ Positionを更に大きくすることでBlockを上に積み上げ壁を表現することができます。

まずはTilePaletteにstone_block.pngのTileをもうひとつ作成して下さい。
最初に作成したstone_blockタイルの名前をstone_block、
新しく作成したstone_blockタイルの名前をstone_block_not_colとします。(Colliderが付いてないという意味)
そしてstone_block_not_colタイルのCollider TypeをNoneに設定します。

stone_blockタイルと同じスプライトのTileを追加

stone_block_not_colタイルのCollider TypeをNoneに設定

続いてTilePaletteのZ Positionを4に変更し、
stone_block_not_colタイルを選択した状態でSceneビューへ移動します。

Z Positionを4に設定

カーソルをField Tilemapのタイルに合わせると、Blockが2ブロック分上に表示されます。

Fieldより2ブロック上に配置される

結果

それでは結果を見ていきましょう。

Z Position:0のFieldはプレイヤーより下に表示されています。
Z Position:2のBlockはプレイヤーと同じ高さに表示されており、衝突判定も有効です。
Z Position:4のBlockはプレイヤーよりも上に表示されています。
また、Colliderがついていないのでプレイヤーと衝突しません。

というわけで、Isometricな2Dタイルマップで無事高さを表現することができました。

今回は以上になります。
ありがとうございました〜。