Unityでタイルマップ(Tilemap)で背景、マップを描画する方法

board-game IT

タイルマップ(Tilemap)はUnity 2017.2から追加された、背景やワールドをペイントで塗るように描くことができる画期的なツールです。RPGツクールとかのイメージです。
若干とっつきにくい部分があるんですが、一回触ってみれば段々慣れてくると思います。制作環境は2Dとします。

スポンサーリンク

タイルマップ作製の流れ

タイルパレット/タイルマップ作製

unity タイルマップ3
ウィンドウ2Dタイルパレットをクリックします。
unity タイルマップ4
タイルパレットウィンドウが表示されます。タイルマップをペイントで「塗る」と表現しましたが、塗る時にどの色(マップチップ)を選ぶかという「パレット」がタイルパレットにあたります。で、それを新しく作りたいので、新しいパレットを作成をクリックします。
unity タイルマップ5
名前を何か付けて作成をクリックします。
unity タイルマップ6
パレットの保存先を訊かれます。プロジェクト内に新しくTileとかフォルダー作って保存しとくのが無難です。
unity タイルマップ7
パレットが新規作成され、プロジェクトウィンドウにも登場します。
unity タイルマップ8
作ったパレットに塗るための色(マップチップ)を登録するには、手動でやる方法もあるんですが、今回はできあいのものを使います。
無料アセットとして非常に評判の良い、Sunny LandをImportします。
unity タイルマップ9
インポートしたら、プロジェクトウィンドウのAssetsSunnyLandartworkEnvironmentにある、tileset-slicedというpng画像を、タイルパレットウィンドウにドラッグします。
unity タイルマップ10
この画像は複数のマップチップに分解できるようになっているので、分解した画像をどこに保存するかを訊かれます。とりあえずフォルダ作って入れときます。
unity タイルマップ11
保存が完了すると、作ったフォルダ内に分解したマップチップがズラっと並びます。
unity タイルマップ12
かつ、タイルパレットもこういう状態になっています。これで一応タイルパレットが塗れる状態になったので、
unity タイルマップ1
塗るためのキャンバス的なものを作ります。ヒエラルキーで+(Create)2Dオブジェクトタイルマップをクリックします。
unity タイルマップ2
Gridオブジェクトの中にTilemapオブジェクトが作られます。

タイルマップの描画

unity タイルマップ13
タイルパレットでマップチップをどれかクリックして選択し、筆のボタン(Paint with active brush)をクリックして、
unity タイルマップ14
シーンビュー上でクリックなりドラッグなりすれば、チップが置けます。
ただし、このようにチップが小さ過ぎたり、大き過ぎたりすることがままあります。
unity タイルマップ15
これはサイズの不一致が原因です。
タイルマップの親オブジェクトであるGridでは、セル(1マス)サイズがx1ユニット、y1ユニットとなっています。
unity タイルマップ16
で、分解した元画像であるtileset-slicedのインスペクターを見ると、ユニット毎のピクセル数が100となっています。
分解した画像を、100×100pxにひとつずつ置けるように設定されているわけですが、
unity タイルマップ17
さっき作ったフォルダ内にある分解した画像を、スプライトエディターなどで確認してみると、
unity タイルマップ18
1ユニット毎の画像のサイズが16×16pxになっていることがわかります。勝手に100×100pxに調整したりはしないので、中央に小さく表示されてしまっている、というわけです。
unity タイルマップ19
なので、分解元のtileset-slicedに戻り、ユニット毎のピクセル数を16にします。
警告が出ますがOKします。
unity タイルマップ20
すると画像が大きく表示されるようになるので、
unity タイルマップ21
筆や消しゴムなどのツールを使ってマップを描いていきます。以上がタイルマップ作製の流れです。

タイルマップの編集

unity tilemap 追加1
オリジナルのタイルマップを作る方法については、元になるタイルマップ形式の画像を作るか、別々の画像をそれぞれ取り込む方法があります。
ハードルが低いのは別々の画像を取り込む方法で、たとえばこんな感じで画像を用意しておき、
unity tilemap 追加3
タイルマップにドラッグしちゃえば登録できます。
unity tilemap 追加2
その際こんな感じで画像をマップチップに変換するための保存を要求されるので、OKしてください。
unity tilemap 追加5
別のチップを上書きすることもできます。
元の画像は変更されないので、何度でも元に戻せます。
unity tilemap 追加4
実行結果です。
unity tilemap 追加6
チップを削除するには、編集を押し、
unity tilemap 追加7
消しゴムツールを選んで消したいチップをクリックします。タイルの編集が終わったらもう一度編集をクリックします。
やりたいことから逆引きするUNITYの使い方まとめ
Unityをやりたいことから学習していけるよう、機能・用途別にまとめたページです。C#の命令別の逆引きは現時点で作っていません。2019の時期に書き始めているので、それより前のバージョンについては言及しません。

コメント