UnityのTilemap 徹底まとめ① | 基本 TileMap編

Unityの Tilemapでマップを作る基本

今回は、Unityで2Dマップを作るときによく使う Tilemap について説明します。

Tilemapを使うと、1枚1枚の画像素材を並べるようにして、地面・壁・草むら・建物・道などを作ることができます。

RPGのフィールドマップ、横スクロールアクションの足場、見下ろし型ゲームの地形など、2Dゲームではかなりよく使われる機能です。

ただし、Unityを始めたばかりの方にとっては、

「Tilemapって何？」
「Tile Paletteって何？」
「GridとTilemapは何が違うの？」
「画像を置くだけなのに、なぜこんなに項目が多いの？」

という感じで、少し分かりにくい部分もあります。

今回はまず、Tilemapの全体像を整理しながら、実際にタイルを配置するところまで進めていきます。

1. Tilemapでできること

Tilemapとは、簡単に言うと、小さな画像をマス目状に並べてマップを作る仕組みです。

例えば、次のような小さな地面の画像があるとします。

この1枚だけでは、ただの小さな画像です。
しかし、この画像をたくさん並べると、広い地面を作ることができます。

このように、タイル素材をマス目に沿って並べてマップを作る機能が Tilemap です。

画像を1つずつ配置する方法との違い

Tilemapを使わなくても、Sprite画像をSceneに直接配置してマップを作ることはできます。

ただし、その場合は1つ1つの画像が別々のGameObjectになります。

一方、Tilemapを使うと、1つのTilemapオブジェクトの中に、たくさんのタイルを描くことができます。

つまり、Tilemapを使うと、マップを管理しやすくなります。

Tilemapを使うときに、最初に覚えておきたい言葉が3つあります。

• Grid

• Tilemap

• Tile Palette

この3つの関係が分かると、Tilemapの仕組みがかなり理解しやすくなります。

2. Gridとは

Gridは、タイルを並べるための マス目の土台 です。
Tilemapは、Gridの上に作られます。

イメージとしては、Gridがノートの方眼紙で、Tilemapがその上に描く絵です。

Gridは、マップ全体のマス目を管理します。
Tilemapでは、そのマス目に沿ってタイルを配置します。

例えば、1マスの大きさを基準にして、地面タイルや壁タイルをきれいに並べることができます。

Unity上での見え方

UnityでTilemapを作成すると、Hierarchyには次のような形で表示されます。

この形になっていれば、Tilemapを使う準備ができています。

3. Tilemapとは

Tilemapは、実際にタイルを描いていく場所です。

Gridがマス目の土台だとすると、Tilemapはその上に置かれる透明なシートのようなものです。

Tilemapの上に、地面、道、壁、草などのタイルを配置していきます。
最初は1つのTilemapだけでも問題ありません。

ただし、ゲームを作り込んでいくと、次のようにTilemapを分けることが多くなります。

Grid
├── Ground Tilemap
├── Object Tilemap
└── Front Tilemap

例えば、

• Ground：地面や道

• Object：壁、木、建物

• Front：キャラより手前に表示したい草や屋根

というように分けます。

ただし今回は第1回なので、まずは1つのTilemapにタイルを描くところまでを目標にします。

4. Tile Paletteとは

Tile Paletteは、使いたいタイルを並べておく 道具箱 のようなものです。

絵を描くときに、パレットから色を選ぶように、TilemapではTile Paletteからタイルを選んでSceneに配置します。

Tile Paletteに素材を登録しておくことで、必要なタイルを選んでマップに描けるようになります。

Tile Paletteの役割

Tile Paletteの役割は、主に次の3つです。

1. 使うタイル素材を登録する

2. 描きたいタイルを選ぶ

3. Tilemap上にタイルを配置する

つまり、Tile Paletteは「素材置き場」でもあり、「描くための道具」でもあります。

5. Tilemapを作成する

では、UnityでTilemapを作成してみます。

Hierarchyウィンドウで右クリックします。
2D Object → Tilemap → Rectangular　を選択します。

今回は Rectangular（四角形） を選択しています。
Tilemapには他にも、六角形 や Isometric（アイソメトリック） などの種類がありますが、今回はもっとも基本的なRectangularを使って説明します。

作成すると、HierarchyにGridとTilemapが追加されます。
このとき、Gridが親、Tilemapが子になります。

Gridはマス目全体を管理するオブジェクトです。
Tilemapは、そのマス目の上にタイルを描くためのオブジェクトです。

6. Paletteの作成方法

Tile Paletteを開く

オリジナルのTile Palette を作成するには、まずTile Paletteを開きます。

TileParret はTileMapの右下に表示されている「Open Tile Palette」のアイコン、または上部メニュー　Window → 2D → Tile Palette と進んで立ち上げます。

Tile Paletteウィンドウが表示されたら、必要に応じて画面の見やすい位置に配置しておきます。

個人的には、Sceneビューの横や下に置いておくと使いやすいです。

新しいPaletteの用意

Tile Paletteウィンドウを開いたら、新しいPaletteを作成します。

Create New Palette を選択します。

名前は分かりやすく、例えば次のようにしておくと良いです。

• StagePalette

• MapPalette

• GroundPalette

今回は例として「StagePalette」という名前にしておきます。
設定は最初のうちは基本的にそのままで大丈夫です。

Grid：Rectangle
Cell Size：Automatic

作成すると、保存先を聞かれます。
Tile Palette用のフォルダを作って、その中に保存しておくと管理しやすいです。

タイル素材をPaletteに登録

次に、使いたい画像素材をTile Paletteに登録します。

Projectウィンドウにあるタイル用の画像を、Tile Paletteウィンドウへ、１つずつドラッグ＆ドロップします。

すると、タイルアセットの保存先を聞かれます。
ここでも、タイル用のフォルダを作って保存しておくと分かりやすいです。

登録が終わると、Tile Paletteにタイルが表示されます。

7.Tilemapの描き方

Tile Paletteからタイルを描く方法

Tile Paletteにタイルが登録できたら、いよいよSceneにタイルを描いていきます。

まず、Tile Paletteで描きたいタイルを選択します。

次に、Sceneビュー上でクリックまたはドラッグすると、Tilemapにタイルを配置できます。

例えば、地面タイルを横に並べると、上のようなマップの土台が作れます。ドラッグしながら描くと、連続してタイルを配置できます。

タイルを消す

間違えてタイルを配置した場合は、消しゴムツールを使います。

Tile Paletteの上部にある Eraser Tool を選択して、Sceneビュー上の消したいタイルをクリックします。

また、ショートカットキーやツールの切り替えでも操作できますが、最初は画面上のアイコンを見ながら操作する方が分かりやすいと思います。

TilePalletの基本ツール

Tile Paletteでよく使う基本ツールは、まず次のツールです。

Brush Tool

Brush Toolは、タイルを描くためのツールです。
選択したタイルを、Tilemap上に配置できます。

Eraser Tool

Eraser Toolは、配置したタイルを消すためのツールです。
間違えて置いたタイルを削除できます。

Select Tool

TilePalette内のタイルを選択するツールです。
複数のタイルをまとめて選んで描きたい時に便利です。

Picker Tool

すでに配置されているtileをスポイト機能を使って取得します。
取得したタイルはそのまま描画に使用できます。

Fill Tool

同じ領域をまとめて塗りつぶすツールです。
広い床や地面をいっきに塗りつぶしたい時に便利です。

Tile Paletteには他にも便利なツールがありますが、最初は特にBrushToolとEraserToolを使えれば大丈夫です。

8. Tilemapでマップを作る流れ

ここまでの流れを整理すると、次のようになります。

1. Tilemapを作る
2. Tile Paletteを開く
3. Paletteを作成する
4. タイル素材を登録する
5. Sceneビューにタイルを描く

最初は少し手順が多く感じるかもしれません。

ただ、一度Tile Paletteを作ってしまえば、次からはタイルを選んで描くだけでマップを作れるようになります。

9. 今回のまとめ

今回は、UnityのTilemapの基本について説明しました。

Tilemapは、小さな画像素材をマス目状に並べて、2Dマップを作るための機能です。

この3つの関係が分かると、Tilemapの仕組みがかなり理解しやすくなります。

次回は、Tile Paletteの基本操作についてもう少し詳しく見ていきます。

Brush、Eraser、Fill、Pickerなどのツールを使いながら、タイルを配置・削除・選択する方法を整理していきます。

こちらはUnity初心者向けの記事をテーマ別にまとめています。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。