Unity 2D Tilemap入門: Free Platform Game Assetsで足場ステージを作る

2026年6月18日

Unity の 2D ゲームでは、床や壁を 1 個ずつ GameObject として並べるよりも、Tilemap を使うとステージを作りやすくなります。

この記事では、Unity に Free Platform Game Assets がインポートされていることを前提に、2D 横スクロールゲーム用の足場ステージを作ります。

素材の場所と使う画像名を固定して進めるので、はじめて Tilemap を触る生徒さんでも同じ画面を見ながら練習できます。

対象者と完成目標

今回学ぶこと

• Tile Palette の作り方
• Grid と Tilemap の関係
• タイル素材を Palette に登録する方法
• Tilemap に当たり判定を付ける方法
• プレイヤーを床に乗せるための設定
• よくあるトラブルの直し方

完成イメージは、次のようなシンプルな足場ステー

ジです。

完成イメージ

1. タイル素材を用意する

このチュートリアルでは、Free Platform Game Assets の Autumn タイルを使います。Project ウィンドウで、次のフォルダを開きます。

Assets/Prefabs/BayatGames/Free Platform Game Assets/Tiles/2D Tiles ( Update 1.9 )/Autumn/128x128

最初は、この 6 つだけを使うと練習しやすいです。

• GrassLeft.png
• GrassMid.png
• GrassRight.png
• GrassCliffLeft.png
• GrassCliffMid.png
• GrassCliffRight.png

GrassLeft、GrassMid、GrassRight は上面が草の床パーツです。GrassCliff 系は、下に土が見える崖や壁のパーツとして使えます。

フォルダ内には他にもたくさん画像がありますが、最初はこの 6 枚に絞ると、Tile Palette と Scene への配置に集中できます。

2. 新しい練習シーンを作る

Tilemap の練習は、既存シーンとは別に作ると安心です。

Project ウィンドウで Assets/Scenes フォルダを選択します。もし Scenes フォルダがなければ、Assets の中に作ります。

Assets/Scenes

Scenes フォルダを開いた状態で右クリックし、次を選びます。

Create > Scene

作成された Scene の名前を次のように変更します。

TilemapPractice

最後に、作成した TilemapPractice シーンをダブルクリックして開きます。

先に Scenes フォルダを選択しておくと、作った Scene がその中に保存されます。

3. Grid と Tilemap を作る

Hierarchy ウィンドウで右クリックして、次を選びます。

2D Object > Tilemap > Rectangular

すると、次のような構造ができます。

Grid
└── Tilemap

Grid はマス目全体を管理する親オブジェクトです。

Tilemap は、実際にタイルを塗る場所です。

Tilemap の名前は、役割がわかるように変えておくと便利です。

Ground Tilemap

床用、背景用、飾り用で Tilemap を分ける場合は、次のように増やしても構いません。

Grid
├── Background Tilemap
├── Ground Tilemap
└── Decoration Tilemap

最初の練習では、Ground Tilemap だけで十分です。

4. Tile Palette を作る

タイルを塗るために、Tile Palette を開きます。

Window > 2D > Tile Palette

Tile Palette ウィンドウが開いたら、Create New Palette を押します。

名前の例です。

PracticePalette

保存場所の例です。

Assets/TilemapPractice/Palettes

フォルダがなければ、Project ウィンドウで作っておきます。

タイル画像を Tile Palette に登録してから、Scene の Tilemap に塗る流れは次の図のようになります。

5. タイル画像を Palette に登録する

Project ウィンドウで、次の素材フォルダを開きます。

Assets/Prefabs/BayatGames/Free Platform Game Assets/Tiles/2D Tiles ( Update 1.9 )/Autumn/128x128

次の 6 つの画像を選択して、Tile Palette ウィンドウへドラッグします。

• GrassLeft.png
• GrassMid.png
• GrassRight.png
• GrassCliffLeft.png
• GrassCliffMid.png
• GrassCliffRight.png

Unity のバージョンや操作状態によって、Tile アセットの保存場所を聞かれる場合と、聞かれない場合があります。

保存場所を聞かれた場合は、次のようなフォルダを指定すると整理しやすいです。

Assets/TilemapPractice/Tiles

保存場所を聞かれない場合もあります。その場合は、Palette の近く、または元画像と同じフォルダに .asset ファイルが自動で作られることがあります。

Project ウィンドウの検索欄で次のように検索すると、作られた Tile アセットを探せます。

t:Tile

Tile Palette に 6 つのタイルが表示されていて、Scene に塗れる状態なら成功です。

6. タイルを Scene に塗る

Tile Palette でブラシツールを選びます。

次に、Hierarchy で Ground Tilemap を選択します。

ここが大事です。Tilemap を選ばずに塗ろうとすると、どこに描くのかわからなくなります。

まずは、横に長い足場を作ります。

素材に左端、中央、右端のタイルがある場合は、次のように並べるときれいです。

左端 / 中央 / 中央 / 中央 / 右端

下に土や壁のタイルを置く場合も同じです。

壁の左端 / 壁の中央 / 壁の中央 / 壁の中央 / 壁の右端

同じタイルだけを並べても練習はできますが、端用タイルと中央用タイルを使い分けると、ステージが自然に見えます。

Grid の Cell Size は、タイル画像のサイズと Pixels Per Unit の関係で決まります。今回の素材では次の図のように考えます。

7. タイルの大きさを調整する

タイルがマス目にぴったり合わない場合は、Grid の Cell Size を確認します。

Hierarchy で Ground Tilemap ではなく、親の Grid を選択します。

Inspector の Grid コンポーネントにある Cell Size を調整します。

考え方は次の通りです。

タイル画像のピクセル数 ÷ Pixels Per Unit = Cell Size

今回使う Autumn のタイル画像は 128 x 128 です。Sprite の Pixels Per Unit が 100 の場合は:

128 ÷ 100 = 1.28

この場合、Grid の Cell Size は次のようにします。

X: 1.28
Y: 1.28
Z: 0

別の素材を使う場合は、同じ考え方で 画像サイズ ÷ Pixels Per Unit を計算します。たとえば 32 x 32 のドット絵で Pixels Per Unit が 32 なら、Cell Size は 1, 1, 0 で合います。

8. 地面用レイヤーを作る

プレイヤーが「地面に乗っているか」を判定するために、地面用の Layer を使うと便利です。

まだ Ground レイヤーがない場合は、Inspector の Layer メニューから Add Layer... を開いて作ります。

名前の例です。

Ground

作成したら、Hierarchy で Ground Tilemap を選択し、Layer を Ground にします。

この名前は必ず Ground でなければいけないわけではありません。

大事なのは、プレイヤー側の接地判定で使う Layer と、Tilemap 側の Layer が一致していることです。

Tilemap Collider 2D と Composite Collider 2D の違いは、次の図のように考えると分かりやすいです。

9. Tilemap に当たり判定を付ける

タイルを置いただけでは、プレイヤーは床に乗れません。

Ground Tilemap を選択し、Inspector の Add Component から次を追加します。

Tilemap Collider 2D

これでタイルに当たり判定が付きます。

ただし、そのままだとタイル 1 枚ずつに Collider が作られるため、タイルの境目で引っかかることがあります。

そこで、続けて次を追加します。

Composite Collider 2D

Unity のバージョンによっては、Composite Collider 2D を追加した時点で Rigidbody 2D も自動で追加されます。

Rigidbody 2D が付いていることを確認し、Body Type を次にします。

Static

最後に、Tilemap Collider 2D 側で Composite を使う設定を確認します。

Unity のバージョンによって、表示名が少し違います。

Used By Composite
または
Composite Operation: Merge

これで、複数タイルの当たり判定がまとまり、プレイヤーが歩きやすくなります。

10. プレイヤーを置く

ここから先は、各プロジェクトの Player に合わせて確認します。Tilemap の素材や場所は固定できますが、Player の Prefab、移動スクリプト、接地判定の名前はプロジェクトごとに違うためです。

最低限、Player に Rigidbody 2D、Collider 2D、移動用スクリプトが付いていることを確認してください。

自分のプロジェクトで使っているプレイヤーを Scene に置きます。

Prefab がある場合は、Project ウィンドウから Scene または Hierarchy へドラッグします。

Prefab がない場合は、仮のプレイヤーとして 2D Object > Sprites > Square などを置いても構いません。

プレイヤーには最低限、次の Component が必要です。

• Sprite Renderer
• Rigidbody 2D
• Collider 2D
• 移動用スクリプト

Collider 2D は、キャラクターの形に合わせて選びます。

• 人型に近い場合: Capsule Collider 2D
• 四角いキャラクターの場合: Box Collider 2D
• 丸いキャラクターの場合: Circle Collider 2D

プレイヤーは床の少し上に置きます。床にめり込んだ状態で再生すると、動作確認がしづらくなります。

11. プレイヤーが回転しないようにする

2D 横スクロールでは、キャラクターが床や角にぶつかったときに回転してしまうことがあります。

プレイヤーを選択し、Rigidbody 2D の Constraints を開きます。

次にチェックを入れます。

Freeze Rotation Z

これで、物理判定で押されてもキャラクターが回転しにくくなります。

12. 接地判定の Layer を合わせる

ジャンプ処理を作る場合、プレイヤーのスクリプトで「地面に触れているか」を判定することが多いです。

その場合、次の 2 つを一致させます。

• Ground Tilemap の Layer
• プレイヤーの接地判定で使う LayerMask

例えば、Tilemap の Layer を Ground にしたなら、プレイヤー側の Ground Layer や Ground Mask にも Ground を設定します。

スクリプト名や項目名はプロジェクトによって違います。

よくある名前は次の通りです。

• Ground Layer
• Ground Mask
• What Is Ground
• Jumpable Layer

ジャンプできない場合は、この Layer 設定が空になっていないか確認します。

13. カメラを調整する

Main Camera を選択します。

2D ゲームでは、Camera を Orthographic にします。

Projection: Orthographic
Size: 5 から 6 くらい

カメラの位置は、ステージが見えるように調整します。

例です。

X: 3
Y: 0
Z: -10

背景色を少し明るくすると、タイルの形が見やすくなります。

14. 再生して確認する

Unity の再生ボタンを押します。

確認するポイントは次の通りです。

• プレイヤーが床の上に乗るか
• 左右に移動できるか
• ジャンプできるか
• キャラクターが回転しないか
• タイルの境目で引っかからないか

うまくいかない場合は、次の「よくあるつまずき」を確認します。

15. 足場を増やして練習する

動作確認ができたら、Tile Palette で足場を増やします。

練習例です。

• 横に長い床を作る
• 少し高い足場を作る
• ジャンプで届く距離を試す
• 穴を作る
• ゴール地点のような高い場所を作る
• 背景用 Tilemap と地面用 Tilemap を分ける

Tilemap の良いところは、ステージをすぐに描き直せることです。

「少し遠い」「少し高い」と感じたら、タイルを 1 マスずらして調整してみましょう。

よくあるつまずき

タイルが Scene に描けない

Hierarchy で、描きたい Tilemap を選択しているか確認します。

Tile Palette でブラシを選んでいても、対象の Tilemap が選ばれていないと描けません。

Tile Palette に登録したのに保存場所を聞かれない

Unity のバージョンによっては、保存場所を聞かずに Tile アセットを自動作成します。

Project ウィンドウで次の検索をすると見つけやすいです。

t:Tile

タイルがずれて見える

親の Grid を選択し、Cell Size を確認します。

タイル画像のサイズと Pixels Per Unit から、適切な Cell Size を計算します。

タイル画像のピクセル数 ÷ Pixels Per Unit = Cell Size

プレイヤーが床をすり抜ける

Ground Tilemap に Tilemap Collider 2D が付いているか確認します。

また、プレイヤー側にも Rigidbody 2D と Collider 2D が必要です。

タイルの境目で引っかかる

Composite Collider 2D を追加し、Tilemap Collider が Composite を使う設定になっているか確認します。

Unity の表示では、Used By Composite または Composite Operation: Merge になっていることがあります。

ジャンプできない

Tilemap の Layer と、プレイヤー側の接地判定 LayerMask が一致しているか確認します。

例です。

Ground Tilemap の Layer: Ground
Player の Ground Layer: Ground

キャラクターが回転する

プレイヤーの Rigidbody 2D で、次にチェックを入れます。

Freeze Rotation Z

まとめ

Tilemap を使うと、2D ステージを絵を描くように作れるようになります。

大事なポイントは次の 5 つです。

• Tile Palette にタイル素材を登録する
• 親の Grid で Cell Size を合わせる
• 地面用 Tilemap に Collider を付ける
• Composite Collider で当たり判定をまとめる
• プレイヤーの Layer と Rigidbody 2D を確認する

まずは短い足場を作り、プレイヤーが気持ちよく歩けるか、ジャンプで届くかを試してみましょう。

慣れてきたら、背景用 Tilemap、飾り用 Tilemap、危険な床用 Tilemap などを分けると、より作りやすくなります。