タイルマップ(Tilemap)はUnity 2017.2から追加された、背景やワールドをペイントで塗るように描くことができる画期的なツールです。RPGツクールとかのイメージです。
若干とっつきにくい部分があるんですが、一回触ってみれば段々慣れてくると思います。制作環境は2Dとします。
タイルマップ作製の流れ
タイルパレット/タイルマップ作製
![unity タイルマップ3](https://sunagitsune.com/wp-content/uploads/2021/09/7b69024e5d61b76c3c76c13655240d96.jpg)
ウィンドウ→2D→タイルパレットをクリックします。
![unity タイルマップ4](https://sunagitsune.com/wp-content/uploads/2021/09/501485f143ba1607bf51ea30d96c7f17.jpg)
タイルパレットウィンドウが表示されます。タイルマップをペイントで「塗る」と表現しましたが、塗る時にどの色(マップチップ)を選ぶかという「パレット」がタイルパレットにあたります。で、それを新しく作りたいので、新しいパレットを作成をクリックします。
![unity タイルマップ5](https://sunagitsune.com/wp-content/uploads/2021/09/7f9b6b34cbef603c303d158ebcc72c63.jpg)
名前を何か付けて作成をクリックします。
![unity タイルマップ6](https://sunagitsune.com/wp-content/uploads/2021/09/25169f02f47a10286ae804aa8b950bc8.jpg)
パレットの保存先を訊かれます。プロジェクト内に新しくTileとかフォルダー作って保存しとくのが無難です。
![unity タイルマップ7](https://sunagitsune.com/wp-content/uploads/2021/09/921abb67a53c17722f7a037bad881a80.jpg)
パレットが新規作成され、プロジェクトウィンドウにも登場します。
![unity タイルマップ8](https://sunagitsune.com/wp-content/uploads/2021/09/7b4cdeacb6bd75bac2366f28dabc956e.jpg)
作ったパレットに塗るための色(マップチップ)を登録するには、手動でやる方法もあるんですが、今回はできあいのものを使います。
無料アセットとして非常に評判の良い、Sunny LandをImportします。
無料アセットとして非常に評判の良い、Sunny LandをImportします。
![unity タイルマップ9](https://sunagitsune.com/wp-content/uploads/2021/09/2c599af67ed3e1ae1dda467785e42031.jpg)
インポートしたら、プロジェクトウィンドウのAssets→SunnyLand→artwork→Environmentにある、tileset-slicedというpng画像を、タイルパレットウィンドウにドラッグします。
![unity タイルマップ10](https://sunagitsune.com/wp-content/uploads/2021/09/3056a726b6e6033870cf84f5add4e74d.jpg)
この画像は複数のマップチップに分解できるようになっているので、分解した画像をどこに保存するかを訊かれます。とりあえずフォルダ作って入れときます。
![unity タイルマップ11](https://sunagitsune.com/wp-content/uploads/2021/09/1dcad6730cdd0ead7c8d2d60dc67d152.jpg)
保存が完了すると、作ったフォルダ内に分解したマップチップがズラっと並びます。
![unity タイルマップ12](https://sunagitsune.com/wp-content/uploads/2021/09/cf93cd567396674084430351f6252dad.jpg)
かつ、タイルパレットもこういう状態になっています。これで一応タイルパレットが塗れる状態になったので、
![unity タイルマップ1](https://sunagitsune.com/wp-content/uploads/2021/09/416faba84cc5f347d16a8f59d918c4d6.jpg)
塗るためのキャンバス的なものを作ります。ヒエラルキーで+(Create)→2Dオブジェクト→タイルマップをクリックします。
![unity タイルマップ2](https://sunagitsune.com/wp-content/uploads/2021/09/89ab8c1b0fc84fb8910b914c14aa0f0c.jpg)
Gridオブジェクトの中にTilemapオブジェクトが作られます。
タイルマップの描画
![unity タイルマップ13](https://sunagitsune.com/wp-content/uploads/2021/09/f1746eed895ae1f7cafd5db5d7718f60.jpg)
タイルパレットでマップチップをどれかクリックして選択し、筆のボタン(Paint with active brush)をクリックして、
![unity タイルマップ14](https://sunagitsune.com/wp-content/uploads/2021/09/f4dba43ae47b07396136635ad50ecf63.jpg)
シーンビュー上でクリックなりドラッグなりすれば、チップが置けます。
ただし、このようにチップが小さ過ぎたり、大き過ぎたりすることがままあります。
ただし、このようにチップが小さ過ぎたり、大き過ぎたりすることがままあります。
![unity タイルマップ15](https://sunagitsune.com/wp-content/uploads/2021/09/49b6b2c50c22b30a8b358a82c0560ac0.jpg)
これはサイズの不一致が原因です。
タイルマップの親オブジェクトであるGridでは、セル(1マス)サイズがx1ユニット、y1ユニットとなっています。
タイルマップの親オブジェクトであるGridでは、セル(1マス)サイズがx1ユニット、y1ユニットとなっています。
![unity タイルマップ16](https://sunagitsune.com/wp-content/uploads/2021/09/e12a1833a94e2686f899012da0579734.jpg)
で、分解した元画像であるtileset-slicedのインスペクターを見ると、ユニット毎のピクセル数が100となっています。
分解した画像を、100×100pxにひとつずつ置けるように設定されているわけですが、
分解した画像を、100×100pxにひとつずつ置けるように設定されているわけですが、
![unity タイルマップ17](https://sunagitsune.com/wp-content/uploads/2021/09/1eebe1f1b9abb9ae2e683dd6e55551fd.jpg)
さっき作ったフォルダ内にある分解した画像を、スプライトエディターなどで確認してみると、
![unity タイルマップ18](https://sunagitsune.com/wp-content/uploads/2021/09/20dd7ff834c6f3daa1b95f97ec83ab51.jpg)
1ユニット毎の画像のサイズが16×16pxになっていることがわかります。勝手に100×100pxに調整したりはしないので、中央に小さく表示されてしまっている、というわけです。
![unity タイルマップ19](https://sunagitsune.com/wp-content/uploads/2021/09/0d6ee5d05fcdb9b592796cacefb9e8b4.jpg)
なので、分解元のtileset-slicedに戻り、ユニット毎のピクセル数を16にします。
警告が出ますがOKします。
警告が出ますがOKします。
![unity タイルマップ20](https://sunagitsune.com/wp-content/uploads/2021/09/440299a56a435ac910d52c2484626ff5.jpg)
すると画像が大きく表示されるようになるので、
![unity タイルマップ21](https://sunagitsune.com/wp-content/uploads/2021/09/c7a9a087161235846752b6b55b4da018.jpg)
筆や消しゴムなどのツールを使ってマップを描いていきます。以上がタイルマップ作製の流れです。
タイルマップの編集
![unity tilemap 追加1](https://sunagitsune.com/wp-content/uploads/2021/10/c8db62bf771516790fd103a4d9a7cc81.jpg)
オリジナルのタイルマップを作る方法については、元になるタイルマップ形式の画像を作るか、別々の画像をそれぞれ取り込む方法があります。
ハードルが低いのは別々の画像を取り込む方法で、たとえばこんな感じで画像を用意しておき、
ハードルが低いのは別々の画像を取り込む方法で、たとえばこんな感じで画像を用意しておき、
![unity tilemap 追加3](https://sunagitsune.com/wp-content/uploads/2021/10/ede8ce767f91467308f011dd1912732b.jpg)
タイルマップにドラッグしちゃえば登録できます。
![unity tilemap 追加2](https://sunagitsune.com/wp-content/uploads/2021/10/6a33499fcf59bfa61f000b8652f212fd-650x91.jpg)
その際こんな感じで画像をマップチップに変換するための保存を要求されるので、OKしてください。
![unity tilemap 追加5](https://sunagitsune.com/wp-content/uploads/2021/10/1e14e216dae76e479d9adba69ad83a65.jpg)
別のチップを上書きすることもできます。
元の画像は変更されないので、何度でも元に戻せます。
元の画像は変更されないので、何度でも元に戻せます。
![unity tilemap 追加4](https://sunagitsune.com/wp-content/uploads/2021/10/a4b630b18d7f78a58d5c8f13e4d0dbc0.jpg)
実行結果です。
![unity tilemap 追加6](https://sunagitsune.com/wp-content/uploads/2021/10/270ff000b65ae1d47f5ffb630bfdf761.jpg)
チップを削除するには、編集を押し、
![unity tilemap 追加7](https://sunagitsune.com/wp-content/uploads/2021/10/8ee238620095ace62d83a2fbb079c51b.jpg)
消しゴムツールを選んで消したいチップをクリックします。タイルの編集が終わったらもう一度編集をクリックします。
![](https://sunagitsune.com/wp-content/uploads/2021/07/computer-1343393_1280-160x90.jpg)
やりたいことから逆引きするUNITYの使い方まとめ
Unityをやりたいことから学習していけるよう、機能・用途別にまとめたページです。C#の命令別の逆引きは現時点で作っていません。2019の時期に書き始めているので、それより前のバージョンについては言及しません。
コメント