UnityのTilemap 徹底まとめ④ | Isometric Tilemapを作る準備

前回までの記事では、UnityのTilemapにはいくつか種類があることを紹介しました。

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

・Rectangular Tilemap
・Isometric Tilemap
・Hexagonal Tilemap

今回は、その中から Isometric Tilemap を実際に作成していきます。
Isometric Tilemapは、斜め上から見下ろしたようなマップを作るためのTilemapです。
2Dゲームでありながら、少し立体感のある見た目にできるのが特徴です。

ただし、Rectangular Tilemapと比べると、マスの見え方や重なり順が少し分かりにくくなります。
そこで今回は、ただTilemapを作るだけでなく、

・Isometric Tilemapを作ると何が作成されるのか
・Inspectorでどの設定を見ればよいのか
・Isometric と Isometric Z as Y は何が違うのか
・Tile Paletteにタイルを登録して描くにはどうするのか

まで確認していきます。

今回のゴールは、Isometric Tilemapを作成して、斜めの地面タイルを配置できるようになることです。

Isometric Tilemapを作成する

まずは、Hierarchyビューで右クリックします。

メニューから、
2D Object → Tilemap → Isometric を選択します。

これで、Isometric Tilemapが作成されます。

Hierarchyビューには、Gridオブジェクトと、その子オブジェクトとしてTilemapが作成されます。
Rectangular Tilemapを作成したときと同じように、TilemapはGridの中に作られます。

違いは、Gridの設定です。
Isometric Tilemapを作成すると、Gridの Cell Layout が Isometric になります。

Gridはタイルを並べるための土台

Isometric Tilemapを理解するときは、まず Grid と Tilemap の役割を分けて考えると分かりやすいです。

Gridは、タイルを並べるための土台です。
Tilemapは、このGridの上に配置されます。

つまり、Gridが「マス目のルール」を決め、Tilemapが「実際にタイルを描く場所」になります。

Rectangular Tilemapの場合、GridのCell LayoutはRectangleになります。
一方、Isometric Tilemapの場合、GridのCell LayoutはIsometricになります。
このCell Layoutの違いによって、タイルの並び方が変わります。

Rectangularでは、タイルが上下左右にまっすぐ並びます。
Isometricでは、タイルが斜め方向に並びます。
同じTilemapでも、GridのCell Layoutが変わることで、見た目が大きく変わるということです。

Tilemapは実際にタイルを配置する場所

次に、Tilemapオブジェクトを確認します。

Tilemapは、Tile Paletteで選んだタイルを実際に配置する場所です。
Tilemapオブジェクトを選択すると、Inspectorには主に次の2つのコンポーネントが表示されます。

・Tilemap
・Tilemap Renderer

Tilemapコンポーネントは、配置されたタイルの情報を管理します。
Tilemap Renderer は、そのタイルを画面に表示するためのコンポーネントです。
つまり、Tilemapは「タイルのデータ」、Tilemap Rendererは「タイルの見た目」を担当するコンポーネントと考えると分かりやすいです。

Tilemapコンポーネントの主な プロパティ

Tilemapコンポーネントには、タイル全体に関係する設定があります。

最初からすべてを覚える必要はありませんが、よく見る項目を確認しておきましょう。

Animation Frame Rate

Animation Frame Rateは、アニメーション付きタイルの再生速度です。

水面や炎のように、アニメーションするタイルを使う場合に関係します。
通常の地面タイルを置くだけであれば、最初は気にしなくて大丈夫です。

Color

Colorは、Tilemap全体に色をかける設定です。

白のままであれば、タイル素材そのままの色で表示されます。
少し暗くしたい場合や、全体に色味を付けたい場合に使えます。
たとえば、夜のマップにしたい場合、Tilemap全体を少し暗くすることができます。

ただし、素材そのものの色を変えているわけではなく、Tilemap全体に色を乗せているイメージです。

Tile Anchor

Tile Anchorは、タイルをセルの中のどの位置に置くかを決める設定です。

初期値では、X 0.5、Y 0.5 になっていることが多く、セルの中央にタイルが配置されます。
Isometric Tilemapでは、タイルの見た目がひし形になるため、タイルが少しずれて見えることがあります。
そのようなときは、Tile Anchorや素材側のPivotを確認すると、原因を探しやすくなります。

特に、タイル同士のつなぎ目がずれる場合は、Tile Anchorだけでなく、画像素材のサイズやPivotも確認する必要があります。

Orientation

Orientationは、Tilemapの向きを決める設定です。

通常はXYのままで問題ありません。
2Dゲームでは、X方向とY方向を使ってタイルを配置するため、最初は変更しない方が分かりやすいです。

Tilemap Rendere の主なプロパティ

Tilemap Rendererは、Tilemapに配置したタイルを画面に表示するためのコンポーネントです。

Tilemapにタイル情報があっても、Tilemap Rendererがなければ画面には表示されません。
特にIsometric Tilemapでは、Tilemap Rendererの設定が見た目に大きく関係します。

Sort Order

Sort Orderは、タイルをどの方向から順番に描画するかを決める設定です。

Isometric Tilemapでは、タイル同士が斜めに重なって見えることがあります。
そのため、どのタイルを手前に表示するかが重要になります。
Sort OrderがTop Rightになっている場合は、右上方向を基準にして描画順が決まります。

もしタイルの重なり方がおかしい場合は、このSort Orderを確認するとよいです。
たとえば、奥にあるはずのタイルが手前に表示される場合や、タイルの重なり順が不自然に見える場合は、Sort Orderが関係していることがあります。

Mode

Modeは、Tilemapをどのように描画するかを決める設定です。
主に次の2つがあります。

・Chunk
・Individual

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

Individual は、タイルを1枚ずつ個別に描画するモードです。
建物、木、柱、壁など、プレイヤーとの前後関係が重要になるTilemapで使います。
たとえば、プレイヤーが建物の前にいるときは、プレイヤーを建物より手前に表示したいです。
反対に、プレイヤーが建物の後ろに回り込んだときは、プレイヤーが建物の後ろに隠れてほしいです。
このような表現をしたい場合、建物側のTilemap RendererのModeをIndividualにすると、タイルごとの位置をもとに表示順を扱いやすくなります。

つまり、地面はChunk、建物や木はIndividual と考えると分かりやすいです。
ただし、Individualはタイルを個別に描画するため、Chunkより処理が重くなる可能性があります。
そのため、すべてのTilemapをIndividualにするのではなく、前後関係が必要なTilemapだけIndividualにするのがおすすめです。

Material

Materialは、Tilemapを描画するときに使うマテリアルです。
通常の2Dタイルであれば、Sprites-Defaultのままで問題ありません。
特殊な見た目にしたい場合や、専用のシェーダーを使いたい場合に変更します。

Sorting Layer / Order in Layer

Sorting LayerとOrder in Layerは、他のSpriteとの表示順を決める設定です。
たとえば、背景、地面、プレイヤー、建物を重ねる場合に使います。

• 背景よりTilemapを手前に表示したい。

• Tilemapよりプレイヤーを手前に表示したい。

• 建物の一部をプレイヤーより手前に表示したい。

このようなときに、Sorting Layer や Order in Layerを調整します。
Isometric Tilemapでは、地面タイルだけでなく、プレイヤーや建物との前後関係も重要になります。

Isometric と Isometric Z as Y の違い

Isometric Tilemapを作成するとき、メニューには似たような項目があります。

・Isometric
・Isometric Z as Y

名前が似ているため、最初は少し分かりにくいです。
はじめのうちは、まず Isometric を選べば大丈夫です。
ただし、Isometric Z as Y が何のためにあるのかも、簡単に知っておくと後で役に立ちます。

Isometricは平面的な地面を作るときに使う

Isometricは、基本的なアイソメトリック用Tilemapです。
斜めに見える地面タイルを並べたい場合は、こちらを使います。
たとえば、

・斜めに見える床を作る
・町やフィールドの地面を作る
・シンプルなアイソメトリックマップを作る

このような場合は、通常のIsometricで問題ありません。
地面タイルを並べるだけなら、まずIsometricを選べば十分です。

今回のシリーズでも、通常のIsometric Tilemapを使って進めます。

Isometric Z as Yは高さや奥行きを扱いたいときに使う

Isometric Z as Yは、高さや奥行きを表現したいときに使います。
少し難しい言い方をすると、Z座標をY方向の表示順に反映させる仕組みです。

簡単に言うと「高さのあるアイソメトリックマップを作りたいときに便利な設定」です。

たとえば、

・段差のある地形
・高さのある建物
・壁や柱が重なるマップ
・プレイヤーが建物の前後を移動するマップ

このような場面で役に立ちます。
通常のIsometricでは、タイルを平面的に並べるイメージです。

一方、Isometric Z as Yでは、Z方向の値を使って、奥行きや高さを表示順に反映しやすくなります。
たとえば、建物の前をプレイヤーが歩くときは、プレイヤーを建物より手前に表示したい場面があります。
逆に、建物の後ろ側に回り込んだときは、プレイヤーを建物の後ろに隠したい場面もあります。
このような「前に出る」「後ろに隠れる」という表現では、表示順の考え方が重要になります。
Isometric Z as Yは、そのような立体的な見た目を作るときに使われます。

ただし、最初からIsometric Z as Yを使うと、座標や表示順の考え方が少し難しくなります。

まずは通常のIsometricで地面を描くところから始めるのがおすすめです。

Isometric の TileMap の作成

ここから具体的なTileMapの作成を行っていきます。

Tile Paletteを作成する

次に、Tile Paletteを作成します。
Tile Paletteは、使いたいタイル素材を登録しておくパレットです。

Unityの上メニューから Window → 2D → Tile Palette を選択します。

Tile Paletteウィンドウが開いたら、Create New Paletteをクリックします。

名前は分かりやすく「IsometricPalette」などにしておくとよいです。
Gridの種類は「Isometric」を指定します。
Cell Size は特に指定がなければ「Automatic」にしておきます。

「Create」を押して、Isometric用のTile Paletteを作成できます。
保存場所を聞いてきたら、任意のフォルダを指定します。

Isometric用のタイル素材を登録する

次に、Isometric用のタイル素材をTile Paletteに登録します。

Projectビューにあるタイル画像を、Tile Paletteウィンドウにドラッグ＆ドロップします。
このとき、Tileアセットの保存先を聞かれる場合があります。
専用のフォルダを作っておくと管理しやすいです。

登録ができると、Tile Paletteの中にタイルが表示されます。
これで、Brushツールを使ってSceneビューにタイルを描ける状態になります。

Sceneビューにタイルを描く

Tile Paletteから使いたいタイルを選びます。

Brushツールが選ばれている状態で、Sceneビュー上をクリックすると、Tilemapにタイルを配置できます。

Isometric Tilemapでは、タイルが斜め方向に並んでいきます。
Rectangular Tilemapのように、まっすぐな四角いマスとしては見えません。
最初はマスの位置が少し分かりにくいかもしれませんが、基本操作はRectangular Tilemapと同じです。

まとめ

今回は、Isometric Tilemapを作成し、Tile Paletteを使ってタイルを配置する準備をしました。

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

・Isometric Tilemapは、斜め上から見たようなマップを作れる
・Gridはタイルを並べる土台
・Tilemapは実際にタイルを配置する場所
・Tilemap Rendererはタイルを画面に表示するための設定
・最初は通常のIsometricを選べばよい
・Isometric Z as Yは、高さや奥行きを扱いたいときに使う
・Tile PaletteにIsometric用タイルを登録して、Sceneビューに描く

Isometric Tilemapは、Rectangular Tilemapより少し難しく見えます。

しかし、Tile Paletteを作り、タイルを選んでSceneビューに描くという基本の流れは同じです。
最初は、地面タイルを数枚並べるだけで十分です。
まずは斜めの地面タイルを配置して、Isometric Tilemapの見え方に慣れていきましょう。

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

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

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

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

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