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

ウィンドウ→2D→タイルパレットをクリックします。

タイルパレットウィンドウが表示されます。タイルマップをペイントで「塗る」と表現しましたが、塗る時にどの色(マップチップ)を選ぶかという「パレット」がタイルパレットにあたります。で、それを新しく作りたいので、新しいパレットを作成をクリックします。

名前を何か付けて作成をクリックします。

パレットの保存先を訊かれます。プロジェクト内に新しくTileとかフォルダー作って保存しとくのが無難です。

パレットが新規作成され、プロジェクトウィンドウにも登場します。

作ったパレットに塗るための色(マップチップ)を登録するには、手動でやる方法もあるんですが、今回はできあいのものを使います。
無料アセットとして非常に評判の良い、Sunny LandをImportします。
無料アセットとして非常に評判の良い、Sunny LandをImportします。

インポートしたら、プロジェクトウィンドウのAssets→SunnyLand→artwork→Environmentにある、tileset-slicedというpng画像を、タイルパレットウィンドウにドラッグします。

この画像は複数のマップチップに分解できるようになっているので、分解した画像をどこに保存するかを訊かれます。とりあえずフォルダ作って入れときます。

保存が完了すると、作ったフォルダ内に分解したマップチップがズラっと並びます。

かつ、タイルパレットもこういう状態になっています。これで一応タイルパレットが塗れる状態になったので、

塗るためのキャンバス的なものを作ります。ヒエラルキーで+(Create)→2Dオブジェクト→タイルマップをクリックします。

Gridオブジェクトの中にTilemapオブジェクトが作られます。
タイルマップの描画

タイルパレットでマップチップをどれかクリックして選択し、筆のボタン(Paint with active brush)をクリックして、

シーンビュー上でクリックなりドラッグなりすれば、チップが置けます。
ただし、このようにチップが小さ過ぎたり、大き過ぎたりすることがままあります。
ただし、このようにチップが小さ過ぎたり、大き過ぎたりすることがままあります。

これはサイズの不一致が原因です。
タイルマップの親オブジェクトであるGridでは、セル(1マス)サイズがx1ユニット、y1ユニットとなっています。
タイルマップの親オブジェクトであるGridでは、セル(1マス)サイズがx1ユニット、y1ユニットとなっています。

で、分解した元画像であるtileset-slicedのインスペクターを見ると、ユニット毎のピクセル数が100となっています。
分解した画像を、100×100pxにひとつずつ置けるように設定されているわけですが、
分解した画像を、100×100pxにひとつずつ置けるように設定されているわけですが、

さっき作ったフォルダ内にある分解した画像を、スプライトエディターなどで確認してみると、

1ユニット毎の画像のサイズが16×16pxになっていることがわかります。勝手に100×100pxに調整したりはしないので、中央に小さく表示されてしまっている、というわけです。

なので、分解元のtileset-slicedに戻り、ユニット毎のピクセル数を16にします。
警告が出ますがOKします。
警告が出ますがOKします。

すると画像が大きく表示されるようになるので、

筆や消しゴムなどのツールを使ってマップを描いていきます。以上がタイルマップ作製の流れです。
タイルマップの編集

オリジナルのタイルマップを作る方法については、元になるタイルマップ形式の画像を作るか、別々の画像をそれぞれ取り込む方法があります。
ハードルが低いのは別々の画像を取り込む方法で、たとえばこんな感じで画像を用意しておき、
ハードルが低いのは別々の画像を取り込む方法で、たとえばこんな感じで画像を用意しておき、

タイルマップにドラッグしちゃえば登録できます。

その際こんな感じで画像をマップチップに変換するための保存を要求されるので、OKしてください。

別のチップを上書きすることもできます。
元の画像は変更されないので、何度でも元に戻せます。
元の画像は変更されないので、何度でも元に戻せます。

実行結果です。

チップを削除するには、編集を押し、

消しゴムツールを選んで消したいチップをクリックします。タイルの編集が終わったらもう一度編集をクリックします。

やりたいことから逆引きするUNITYの使い方まとめ
Unityをやりたいことから学習していけるよう、機能・用途別にまとめたページです。C#の命令別の逆引きは現時点で作っていません。2019の時期に書き始めているので、それより前のバージョンについては言及しません。
コメント