ここではUnityの非常に強力なツール、Tilemapの使い方をご紹介します。気づいたらTilemapにも複数の種類が出来たのですが、今回は基礎中の基礎、Rectanglar(四角)のTilemapを中心に紹介します。
タイルマップの基本
知識として知っておきたいタイルマップについてのこと。
タイルマップとは?
タイルマップとは、グリッド状にSpriteを配置することができる機能のことです。当ブログでは、スパロボ風のマップ作成などでも利用しています。

現在はグリッドの形は大きく3種類
- Rectangle – 四角
- Hexagonal – 六角形
- Pointed-Top:尖った方が上側
- Flat-Top:水平な面が上側
- Isometric
- 通常:主にひし形。
- Z as Y:Zの値を高さとして利用できるバージョン

タイルマップは専用のアセットがストアに公開されています。

タイルマップを使うのに必要なものについて
タイルマップを利用するには次の準備が必要になります。
- タイルパレット
- タイルアセット
- タイルに利用する画像を別途用意
- シーン内の用意
- Grid
- Tilemap(利用するタイプごと)
- Grid
タイルパレット
パレットの作成方法は2パターン程あります。
- プロジェクトビューを右クリック>Createメニューから作る方法
- Create>2D>Tile Pallete>(使いたいタイルマップの種類:例Rectanglar)
- タイルパレットから作る方法
- Window>2D>Tile Palleteからパレットウインドウを開きます
- 右上のパレットのプルダウンを開く(初期状態だとCreate New Palette)
- 選択してCreateボタンで作成(Gridの項目でタイルマップの種類を選択)

タイルパレットのアセットを作ったら、パレットビュー(Window>2D>Tile Palette)を開き、右上のプルダウンから作成したパレットを選択しておきましょう。

タイルアセット
タイルパレットウインドを開いた状態で、対象のパレットに対して、タイルアセットを配置することが出来ます。
この時編集したいパレットが選択されていることも合わせて確認してください。

開いたタイルパレットウインドの真中付近に、タイルアセット化したい画像をドラッグアンドドロップしてください。初回だけ、画面がグレー1色(の上に文字があるだけ)

2回め以降は、先に配置されているタイルアセットがあるので、それを避けつつドラッグアンドドロップしてください。


タイルアセット自体は、別のタイルパレットでも共有可能です!
シーン内の用意
タイルパレットとタイルアセットが用意出来たら、タイルマップを塗ることができるようになります。ここでは上の項目で用意した四角のタイルマップを利用する方法を記載します。
- GameObjectMenuヒエラルキー右クリックの中のメニュー。 ... More を開いて、2D Object>Tilemap>Rectanglarを選択
- シーン内にGridとその子供にTilemapが作成されます
- Tilemapを選択する。(選択した状態で次の手順に移る)
- タイルパレットウインド内の何か塗りたいタイルアセットを選択する。
- シーン内のグリッドを左クリックでなぞると、タイルが描画される
- 気が済んだらタイルパレットウインドの「筆」みたいなアイコンを選択して、描画モードを解除する。





これでいったんタイルマップを使うことができるようになりました。次の項目では、タイルマップの編集方法について解説します
編集の仕方について
ここからはタイルマップの基本的なツールの使い方などを解説。覚えておくとちょっとした操作などが楽になります。
タイルマップツールバーについて
タイルマップを使う場合、パレット上部の各機能について知っておくと操作がはかどります。


番号 | 機能 | 補足 |
---|---|---|
1 | タイルマップの選択、範囲選択 (ショートカットS) 選択後、タイルをクリックするとインスペクターに詳細表示 | クリック:単体 ドラッグアンドドロップ:複数 |
2 | 選択中のタイルを移動 (ショートカットM) | 1で選択後に利用すると良し |
3 | ブラシツール (ショートカットB) 選択中のタイルで塗る。クリックやドラッグアンドドロップ | よく使うやつ |
4 | 塗りつぶしツール (ショートカットU) パレットで選択されたもので塗りつぶします。 選択は範囲選択でもOK | 便利なんだけど とっさに使えてない |
5 | スポイトツール (ショートカットI) 作業中のタイルマップ内をブラシで利用する | 便利だけどショートカットと 合わせて使わないと効果半減 |
6 | 消しゴムツール (ショートカットD) 選択したタイルを削除する | |
7 | 置き換えツール (ショートカットG) 繋がった類似タイルを塗りつぶす。下地作るのとかは便利 | |
8 | 複数タイルマップがある場合、塗るターゲットを選択する ヒエラルキーで選択した時に変わるのが基本 | なんか思ったのと違うのに なることもあるので、適度に注視 |
パレットの編集
パレットを利用していると、整理したくなることがあります。編集を行いたい場合、下図のEditボタンを押すことで可能です。


編集時には通所のタイルマップと同じような感覚で編集できます。一番頼りになるのは移動ツールかな。
コメント