タイルマップは最近のUnityで用意されている公式2Dマップエディットの仕組みです。
やや汎用的に作られていますが、鉄板な使い方をまとめてみました。
それでは見ていきましょう。
Tilemapの解説動画
教材としてはゲームプログラミングを解説している Brackeys氏の動画がおすすめです。716k 再生すごい。
当記事の解説順もこの動画に準拠しています。
ここから、基本的な流れだけを要約すると以下のようになります。
1.画像を用意する
2.import設定で、Multi・補間なし・SPriteEditor で Slice
3.Tilemapをシーンに追加しておく
4.TilePaletteを作る
5.パレットに、スプライトをD&DしてTileにしつつ追加
6.パレットウインドウからTilemapに塗る
それでは解説スタート！
まずはタイル画像を用意しよう
まずは、日本ではマップチップと呼ばれる大きなタイル画像を用意します。
psd でも png でもOK
動画に倣ってProjectに1マスが32ピクセルの画像
Assets/TilesetExample.psd
を追加。
これをUnityでどうimportして使うかの設定をインスペクターで行います。
ポイントは3点
・SpriteMode を「Multiple」
・Pixels Per Unit を「32」
・FilterMode を 「point(no filter)」
です。
続いて、切り分け設定を行うために
同インスペクター内にある SpriteEditor ボタンを押します。
ここで Slice から
・Typeを「Automatic」→「Grid By Cell Size」
・X「32」
・Y「32」
として、Slice Apply です。
すると
TilesetExample_0, TilesetExample_1
のようにスライスされた画像が子に表示されるようになります。
(どう切り取るかが見えるだけで、切り取られたファイルが作られたわけではありません)
シーンにTilemapを追加しよう
上で作ったタイル画像をどう配置するかという Tiemapアセットファイルを作ります。
動画で言うと 2:35~
Hierarchy ツリーで右クリックして
2DObject > Tiemap
を追加すると
Grid と Tilemap が追加されます。
追加された Tilemapの名前を下地という意味の Tilemap_Bace などとしておきます。
ここにタイルパレットから塗っていくことになります。
タイルパレットを作成しよう
バレットを作るために Window から
2D > Tile Palette
ウインドウを開きます。
New Palette から新規作成、名前を GroundTiles とすると、保存フォルダを聞かれるので、
例えば
Assets/Palettes
に保存します。
そしてパレットにタイルを追加するために、
前の項でスライスしたスプライト画像すべて(もしくは親の画像ファイル)をD&Dします。
するとフォルダを聞かれるので Assets/Tiles/GroundTiles
と選ぶと、処理が走ります。
この処理は、各スプライトから、タイルアセットを生成しつつ、そのタイルがパレットに追加する処理です。
Palette ウインドウはドッキングしておこう
この Palette ウインドウですがUnityEditor本体と違うウインドウになっているととても操作しにくいので、
Tile Palette タブの部分をつまんで本体のどこかにD&Dしてドッキングしておきましょう。同じウインドウにしておかないとフォーカスが外れるので作業にならないです。
あとはタイルを塗っていこう
ここまででパレットが出来上がったので次はパレットを使って塗っていく楽しい作業です。
Tile Palette ウインドウの方でブラシを選び、
Sceneビューに塗っていきます。
塗る対象の Tilemap は、パレットウインドウの方から選択します。Editのトグルボタンはオフにしておきましょう。
Tilemapはレイヤーのように複数配置できる
ここまでで地面を塗ってきましたが、それだけでは表現できることが限られてしまいます。
上に重ねて物を置く方法を解説します。
もちろん、スーパーファミコンのRPGツクールのようにレイヤー一枚だけで作ることもできますが、
バリエーションの違う画像がたくさん必要となるので、素直にレイヤーを使いましょう。
TileMap でレイヤー表現を行うためには、Tilemapを複数配置するだけです。
Hierarchyツリーで右クリックして
2DObject > Tiemap
として
先ほどの Tilemap_Ground と同じところに Tilemap_Rock などと追加するだけです。
基本的にHierarchyの上にある方が、先に描画されていくのでツリーの弟の場所に配置しておけばいいのですが、TilemapRenderer の Order の数を大きくしておくと数字の小さな物から書かれていくので
上に描きたいものは大きな数字にしておくといいです。
まとめ
駆け足で解説してきましたが、ここまでが Unity で Tilemapを使う基本的な流れとなります。
今回説明した流れは以下の通り
1.画像を用意する
2.import設定で、Multi・補間なし・SPriteEditorでSlice
3.Tilemapをシーンに追加しておく
4.TilePaletteを作る
5.そのパレットに、スプライトをD&DしてTileにしつつ追加
6.パレットウインドウからTilemapに塗る
です。
この方法が鉄板なのではないかと思います。
応用としては、基本的なTileはD&Dで作れますが、アニメーションしたりなど特殊なタイルを作ることが出来ます。
できることは、Unity公式のTilemap拡張ライブラリ 2d-extras や 2d-techdemos、その解説もご参照ください。
ランダムタイルやクオータービューなんかも作れちゃいます。
今後もUnityの記事を追加していきますので、よろしくおねがいします。
それではまた〜
