-100p

-10p

+10p

+100p

Unityでマップチップ機能

Unityでマップチップ機能の実装、2D Tilemap Editorの使い方。

参考URL
こないだまで知らなかったがUnityでは標準でマップチップ機能が用意されてある。
この機能は2D専用の機能であるものの、Unity uGUIとは独立している。
チップ画像はHierarchyのUI Canvasの下に置く必要がなく、実装の仕方もちょっと癖がある。

2D Tilemap Editorの概要と導入

Tilemap Editrorを導入した結果のサンプル動画のサンプルは次の通り。
まずTilemap Editorの機能の一部であるTile Paletteを作成し、そこからScene上にペタペタとマップチップを貼ることが出来る。

複数選択して丸ごと貼り付けることもできる。けっこう便利。

Tilemap EditrorはUnityの初期状態ではインストールされていない。
Package Mangerから導入する必要がある。

上部メニューのWindow > Package Mangerからウィンドウを開き、PackagesからUnity Registryを選択。
2D Tilemap Editorを探し、Installボタンをクリックする。

Tile Paletteの作り方

続いて適当なマップチップ画像を用意する。
例えば下の画像は1チップが16x16pxにまとまった小さめのマップチップ画像。ファイル名はtest_field.pngになる。

2D Tilemap Editorを使う前に、この画像を適切に分割しておく必要がある。

test_field.pngのインスペクターを確認、まずTexture TypeをSpriteに変更。
Sprite ModeはMultipleに設定し、Pixel Per Unitはこの画像の1チップの大きさである16を設定。
もし1チップが32x32pxならここは32を設定するべきで、選択するマップチップ画像によって指定が変わる。


インスペクターで設定を整えたら、一度Sprite Editorボタンを押し正しく画像が分割されているか確認してみる。


画像の前準備が終わったので続いてTile Paletteを作成していく。
Project上で右クリック、Create > 2D > Tile Paletteを選択していくと、4種類のパレットの選択候補が出てくる。

それぞれパレットの内容は次の遠り。
 Hexagonal Flat-Top 
: 大戦略のような六角マップ用のパレット。
 Hexagonal Point-Top 
: 大戦略の六角マップを90度回転したようなパレット。マス目の上下ではなく横が尖ってる。
 Isometric 
: タクティクスオウガのような斜め見降ろし視点マップ用のパレット。
 Rectangular 
: 一般的なRPGやファイアーエムブレムのような四角形マス用のパレット。
ここでは一般的なRPGを想定してマップチップを実装していくので、Rectangularを選択。

するとProjectのAssets直下にRectangular Paletteというプレハブが出現する。

このプレハブを適当なフォルダに移動、ここではAssets/UnitySample/U0035の下に移動させる。
ついでに名前をTestFieldに変更し、同名のTestFieldというフォルダも作成しておく。


TestFieldプレハブをダブルクリックし、開いたTile Paletteエディターウィンドウの中に今回用意したtest_field.pngをドラッグアンドドロップする。
するとGenerate tiles into folder、要はタイルを生成するフォルダを選択しろというダイアログが出る。
ついさっき作成したTestFieldフォルダを選択、右下の「フォルダーの選択」ボタン押す。


するとTestFieldフォルダの中に大量のassetファイルが作成され、またTile Paletteエディターウィンドウを見るとにその画像が反映されている。

これでPaletteは完成。

チップをScene上に配置

最初に述べた通りこの機能はuGUI機能とは独立していて、良いか悪いかは別としてUI Canvasを作成する必要がない。

Hierarchy上で右クリックし、2D Object > Tilemap > Rectangularを選択。
するとGridとTilemapというGameObjectが作成される。



このTilemapをHierarchy上に作成の後、Tile Paletteからマップチップを貼り付けることが出来る。

0
0

-100p

-10p

+10p

+100p