Isometric Tilemapとは
IsometricTilemapとは、等角図法で描かれたタイルマップのことです。Unity2018.3から標準搭載された機能の1つです。図1のような描画のゲームを作成することが可能になります。
図1
ここでは、UnityのドキュメントにあるIsometric Tilemapsを中心に要約していこうと思います。ドキュメントの和訳ではないため、独自の見解が入っていることをあらかじめお伝えしておきます。また、今回はKenny Vleugles様のIsometric Landscapeを使用させていただいております。
Import and preparing Sprites
Import Settingsを図2のようにして、Assetsフォルダ配下に画像をインポートしてください。
図2
Isometric TilemapとしてSpriteをインポートする際、以下の設定にすることを推奨します。詳しくはUnity公式ドキュメント Texture Type:Sprite(2D and UI)を参照してください。
- Texture Type - **Sprite(2D and UI)**にしてください。
- Sprite Mode - 1つのテクスチャに1つのスプライトしかない場合には、Singleを選択してください。分割して使用する場合にはMultipleにしてください。
- Pixels Per Unit(PPU) - この値は「何ピクセルが何Unit(Unity上の単位)に相当するか」を決定します。つまりタイルマップとしてスプライトがどの程度の大きさで描画されるかを決定します。GridコンポーネントのCell Sizeも同様で、これは1つのセルの大きさが、何Unitかを決定することができます。
例として、下の図3の元画像は256×128の画像です。Cell Sizeは(1, 0.5, 1)となっています。図3の右画像ではPPUが256で設定したため、1Unit=256pixelとなり、またCell SizeのXは1のため、1つのセルに1つのスプライトが描画されています。
図3：右がPPU256、左がPPU128
図4、図5のようにPPUを変化させてスプライトのサイズを変化させても、タイルマップ上で置かれる位置は同じ位置です。（マウスカーソルのある白いセルを中心にスプライトが置かれる）
図4：元画像のX=133pixel、PPU=100
図5：元画像のX=133pixel、PPU=40
- Mesh Type - Tightに設定すると、透明部分をくりぬいて描画します。Full Rectにすると、isometricでは不必要な、四隅の透明部分を描画してしまうためおすすめされません。
- Generate Physics Shape - Physics2Dとインタラクトする必要のない場合、この部分はチェックしないで大丈夫です。チェックを入れると、Tilemap Colliderに必要なタイルマップの物理形状を生成します。（ただ、私の検証した場合では、チェックを入れずにTilemap Colliderをオンにした場合、Colliderが生成されました。特定のSpriteのColliderを切るには、タイルアセットのColliderTypeをNoneにすると可能でした。）タイルのセルサイズに合ったColliderを生成したい場合は、タイルアセットのColliderTypeをGridにしてください。
スプライトをインポートし、タイルマップにセットした後、セルのアウトラインに合わせてSprite Editorを微調整してください。スプライトのPivotも適宜調整してください。（私的にはCenterが枠内にぴったり収まると思います）
Sprite Mode をMultipleにしてインポートした場合、それぞれのスプライトに対して設定を行ってください。
Creating an Isometric Tilemap
Isometric Tilemapを作成する際、通常のタイルマップ作成に加えて追加のステップが必要になります。GameObject>2D Object>Isometric Tilemap>Isometric Z as Y Tilemapを進んでください。
Isometric Tilemapを作成したのち、適切に表示するための追加の設定として、ProjectとGridの設定をする必要があります。
Custom Axis Sorting
Isometric Tilemapを適切に描画するためには、奥にあるタイルが手前にあるタイルより先に描画し、疑似深度を作成する必要があります。この設定をシーン全体に適用するためには、**Edit>Project Settings>Graphics>Camera Settings>Transparency Sort Axis*のXYZを(0, 1, 0)に変更します。（図6）
図6
この設定にすると、Yが高い値の部分からレンダリングされるため、奥の物体が手前の物体よりも先に描画されます。
高さを使用したいIsometric Z as Y Tilemapを使用する際には、Transparency Sort Axis=(0, 1, 0)だと高さがレンダリング順に考慮されない場合があります。（図7）
図7：左が(0, 1, 0)の場合、右が(0, 1, -0.26)の場合。右はきれいに積み重なって見える
Transparency Sort Axisを**(0, 1, -0.26)**にすると、高さ情報を元に適切にレンダリングされます。
高さのある建物を作成する場合、タイルマップ上の同じ位置に、z値を変えてタイルを置きます。図8→図9のように、別のタイルの場所にスプライトをおいていくのではなく、図8→図10のように、同じ位置にz値を変えて置いていきます。
図8：白い枠線がタイルを置いた場所
図9
図10：青い枠線は、高さ情報により実際に描画される位置
Grid Cell Size settings
図11：デフォルトのレイアウト設定
| Isometric | 規定値のIsometric Tilemapを作成する |
| Isometric Z As Y | Z値を疑似Y値として追加することができるIsometric Tilemapを作成する。これにより、Y軸へのオフセットが生まれ、高さの錯覚が生じます。 |
Isometric Tilemapは二等角投影法や等角投影法を使用します。詳細はこちらの記事で確認してください。
GridのCell Sizeを変えることで、セルの角度を変化させることができます。XYZ=(1, 0.5, 1)では鋭角60°、鈍角120°のひし形となります。正確な等角投影法（isometric projection）にする場合は、Yを0.57735にしてください。これは横$\sqrt3$, 縦1の比率のため、Xを1とした場合Yは$1/\sqrt3=0.57735.....$になるからです。
Creating a Tile Palette for an Isometric Tilemap
- Window>2D>Tile Paletteからタイルパレットウィンドウを開きます。
- 図12のようにCreate New Paletteを選択します。
図12
- Grid typeでIsometric/Isometric Z As Yを選択します。
- Cell SizeをManualにします。図13のように、XとZはデフォルトのままの値にしておいてください。YはGridコンポーネントのY値と同じにします。
図13
- Createボタンを押すと、新たなTile Palette Assetが作成されます。（図14）
図14
- タイルパレットの内容を変更したいときは、Asset配下にある変更したいタイルパレットPrefabに変更を加えてください。
Adjusting the Tile height in the Palette
Isometric Z as Y タイルマップでタイルを描いている際、Z Positionにて高さを変更することが可能です。（図15）Z値はY軸のオフセットに変換され、異なったZ値で塗られたタイルは、異なった高さを持つように見えます。Z Positionはタイルマップパレットの下部から変更できます。
図15
任意の整数を入力してZ値を調整してください。Z値をリセットまたは変更するまでは、タイルはその高さで塗られ続けます。元に戻すにはResetボタンを押すか、Z値を0にしてください。
シーンビューでは、Z値0での位置が白色のアウトラインで表示され、入力したZ値での位置が青色のアウトラインで表示されます。（図16）
図16
タイルブラシが選択されている場合、Z値を変更するための以下のショートカットキーが使用可能です。
| - | Z値を1増やす |
| + | Z値を1減らす |
タイルを消去するには、Erase Brushをターゲットと同じZ値で使用してください。Erase Brushは異なった高さのタイルを消去できません。
Tilemap Renderer Modes
TilemapRendererコンポーネントは、シーン上においてタイルマップをレンダリングします。Unityではタイルマップ作成時に、デフォルトでアタッチされます。TilemapRendererはひとまとめにして描画するChunk Modeと、個々に描画するIndivisual Modeが存在します。Render Modeはタイルマップのスプライトを、どのようにソートして描画するかに影響します。
Rendering in batches with Chunk Mode
デフォルトではChunk Modeに設定されています。Chunck Modeでは、タイルマップ上のスプライトを纏め、一括で描画します。そのためSet Pass Callを抑えることが可能ですが、複数のタイルマップが重なった際に、一貫して同じ描画がされないことがあります。(図17）
図17：このようにタイルマップの枠内からはみ出した部分の描画が安定しない
この問題を解決するためには、1つのSprite Atlasとしてまとめると解決できます。Sprite Atlasの使い方はLIGHT11様の記事を参考にさせていただきました。Sprite Atlasにまとめたのち、Playモードにすると正しく描画されます。これはPlayモード時のみ正しく描画されます。（図18）
図18：Sprite Atlasに纏め、描画したもの
Rendering individually with Individual Mode
Individual Modeではシーン上でのレンダリング結果を考慮して、個々のスプライトを描画します。（図19,20）他のRendererが、タイルマップ上のオブジェクトやスプライトに対してインタラクトする際に使用してください。
このモードではTilemap Rendererがそれぞれのタイルマップの位置に基づいて、正しい描画順にソートします。
図19：Indivisual Modeだと塔のスプライトの裏側にキャラクターが描画され、また地面の上にキャラクターが描画されている
図20：Chunck Modeだとキャラクターは地面の裏にいってしまう
基本的にSpriteAtlasにまとめたタイル群は、ModeをIndivisualにしてもChunkにしてもSetPassCallはあまり変わりません。ただ、Indivisualにすることでタイルの上下の重なりがおかしいといった挙動がなくなります。
また、図21のようにキャラクターの一部が埋まるといったことがあります。その場合は、キャラクターのSprite RendererのSprite Sort PointをPivotにし、キャラクターを埋めている側のタイルのPivotをCustomにして調整してください。（図22)ただ、すこし強引なやり方なので、より良い解決法があるのではと思います。
図21：樽がキャラクターの代わりです。このとき地面のPivotはCenterです。
図22：今回は地面のPivotをX1, Y2にした時にうまくいきました。
Scriptable Brushes
GridBrushBaseクラスはタイルパレット上の操作を継承し使用することが可能になるものです。独自の挙動を持つブラシを作成することも可能です。例えばpublic virtual void ChangeZPosition(int chnage)ではブラシのZ値を変更することができます。public virtual void ResetZPosition()ではZ値をリセットすることができます。
終わりに
本記事はUnity公式リファレンス Version2018.3のIsometic Tilemapsを元にして要約されています。また、Isometic Tilemapの議論がUnity Forumにて活発に行われているので、何か分からなかった場合はそちらに解決法が掲載されている可能性があります。
バージョンの変更等に際し、記事通りにいかない場合もありますのでご了承ください。