【Unity】2Dタイルマップ①基本的な使い方

Unity 2020.2.1f1 Personal(2021年3月)

久々の更新です！
Unityの標準機能の2Dタイルマップの使い方をご紹介致します〜

2Dタイルマップとは

2Dタイルマップはグリッドにタイルを設定してステージを構築するシステムです。
スーパーマリオブラザーズなどの横スクロールアクションゲームや、
シムシティなどの斜め上から見下ろしたゲームなどでも
2Dタイルマップは使われています。
Unityでは2017.2バージョンから実装されました。

スプライトを準備する

今回は64px * 64pxのスプライトを2つ用意しました。

tatami.png

rouka.png

一応tatami.pngが畳、rouka.pngが廊下ということで・・・全く見えないですが笑

こちらの画像をUnityにアップします。
アップが完了したら、スプライトの設定を行ます。

まずはSprite Mode > Pixels Per Unitを64に変更します。
2Dタイルマップではタイル１つ分を1Unitとして扱うため、
幅が64pxのスプライトの場合は64と合わせていきます。

続いてFilter ModeをPoint (no filter)に変更します。
ピクセルを綺麗に表示されます。(画像によっては必須ではありません。)

TilePaletteの作成

続いてTilePaletteです。
絵の具のパレットに絵の具を出して好きな色を選ぶように、
TilePaletteにスプライトを出して使っていきます。

まずはTilePaletteを作成します。
Window > 2D > Tile Paletteからタイルパレットウインドウを開きます。

続いてCreate New Paletteを押し、
Nameに好きなパレット名（今回は「FieldPalette」）を入力し
CreateボタンでTilePaletteを作成します。

指定した場所にパレットが保存されます。

TilePaletteの設定

続いて作成したTIlePaletteにtatami.pngとrouka.pngを配置します。
そのままドラッグ&ドロップすれば配置されます。
その際再び保存先を聞かれます。
先ほどはTilePaletteの保存先でしたが、今回はTileアセットの保存先です。
このTileアセットをScene上に並べることで2Dタイルマップを行います。

パレットにTileアセットが配置された

TileMapを作成する

2DタイルマップはTilePaletteに配置したTileアセットを
TileMapに配置していくというのが基本的な流れです。
というわけでパレットは一旦置いておき、TileMapを作成していきます。
HierarchyからCreate > 2D Object > TileMap > Rectangularを選択し、
TileMapオブジェクトを作成します。
(Gridオブジェクトの子オブジェクトの形で作成されます。)

ちなみにRectangularとは長方形という意味で、他のHexagonalは六角形、
Isometricはシムシティのように斜め上から見下ろした形を意味します。

TileMapにTileを塗る

いよいよTileMapにTileを塗っていきます。
TilePaletteのモードをブラシにし、
tatamiのTileを選択します。

この状態でSceneビューを開くと、
TileMapにTileを塗れる状態となっています。

GameビューではなくSceneビューである点に注意

好きなようにTileを塗っていき、
TilePaletteの消しゴムを選択してTileを消すなどして
TIleMapを整えていきます。

消しゴムモード

TilePaletteで別Tileを選択すると別TIleで塗ることができます。
消しゴムモードを使った場合はブラシモードに戻してください。

別Tileを塗る

ちなみにSceneビューにてTileを回転させることができます。
「[」キーで左回り、「]」キーで右回りです。

Tileを回転させて描画

というわけで今回は2Dタイルマップの基本的な使い方をご紹介しました。
もう少し突っ込んだ使い方も紹介していければと思います。
ありがとうございました〜。