【Unity初心者】お金をかけずに2D RPGを作る！Step 2：マップ作成・カメラ追従

はじめに

前回はキャラクターの実装（移動・4方向アニメーション）まで完成しました。 今回はTilemapでマップを作成し、カメラ追従を実装するまでをまとめます。

Step 2の全体の流れ

① Tilemapの準備
② タイルセットの設定
③ Tile Paletteにタイルを登録
④ マップを描く
⑤ 壁の当たり判定
⑥ カメラ追従（Cinemachine）

① Tilemapの準備

Hierarchy → 右クリック
→ 2D Object → Tilemap → Rectangular

Hierarchyに以下が追加される：

Grid
└── Tilemap

② タイルセットの設定

Tiny RPG ForestのEnvironmentフォルダにある tileset-sliced（Texture 2D）を使用。

Assets/Tiny RPG Forest/Artwork/Environment/tileset-sliced

Inspectorで以下を設定：

Pixels Per Unit → 16
Apply をクリック

⚠️ デフォルトは100になっているので必ず16に変更すること！ 変更しないとタイルが小さく表示される。

③ Tile Paletteにタイルを登録

上メニュー → Window → 2D → Tile Palette

「Create New Palette」をクリック
→ 名前：「MapPalette」
→ Create → Assetsフォルダに保存

tileset-sliced を
Tile Paletteウィンドウにドラッグ＆ドロップ
→ 保存先フォルダを選択 → OK

④ マップを描く

床と壁は別Tilemapに分ける

同じTilemapに床と壁を描くと上書きされて消えてしまう！ 必ず別々のTilemapに分けること。

HierarchyのGridを右クリック
→ 2D Object → Tilemap → Rectangular
→ 名前：「Tilemap_Floor」

もう一度
→ 2D Object → Tilemap → Rectangular
→ 名前：「Tilemap_Wall」

Hierarchyの構成：

Grid
├── Tilemap_Floor　← 床を描く
└── Tilemap_Wall　 ← 壁・柵を描く

描き方

Tile Paletteウィンドウ上部の
「Active Tilemap」を切り替えて描く

床を描くとき → Tilemap_Floor を選択
壁を描くとき → Tilemap_Wall  を選択

⑤ 壁の当たり判定

Tilemap_Wall にColliderを追加：

HierarchyのTilemap_Wallをクリック
→ Add Component → Tilemap Collider 2D
→ Add Component → Composite Collider 2D
　└ Tilemap Collider 2Dの
　  「Used By Composite」✅ にチェック
→ 自動追加されたRigidbody 2Dの
　  Body Type → Static に変更

⑥ Order in Layerの設定

これを設定しないとキャラがちかちか点滅する！

原因はGridとPlayerの描画順が同じのため Gridがキャラの上に重なって点滅して見えていた。

以下のように設定する：

オブジェクト Order in Layer Tilemap_Floor 0 Tilemap_Wall 1 Player 2

Tilemap_FloorのTilemap Renderer
→ Order in Layer → 0

Tilemap_WallのTilemap Renderer
→ Order in Layer → 1

PlayerのSprite Renderer
→ Order in Layer → 2

⑦ カメラ追従（Cinemachine）

Cinemachineをインストール

Window → Package Manager
→ Unity Registry
→「Cinemachine」を検索
→ Install

Virtual Cameraを作成

上メニュー → GameObject
→ Cinemachine → 2D Camera
→「CM vcam1」が追加される

追従対象を設定

CM vcam1をクリック
→ InspectorのFollow欄に
　Playerをドラッグ

カメラの微調整

CM vcam1のInspector
→ Body
　└ Damping X → 0.1
　└ Damping Y → 0.1

→ Lens
　└ Orthographic Size → 5

Orthographic Size 見え方 3 拡大（キャラが大きく見える） 5 標準 7 縮小（マップが広く見える）

ハマったポイント

① タイルが小さく表示された

Pixels Per Unitがデフォルトの100のままだった。 16に変更して解決。

② 床を描いた後に壁を置いたら床が消えた

同じTilemapに描いていたため上書きされた。 Tilemap_FloorとTilemap_Wallに分けて解決。

③ キャラがちかちか点滅した

Order in Layerの設定が原因だった。 Floor(0) → Wall(1) → Player(2) の順に設定して解決。 コードの問題だと思い込んで長時間ハマったので注意！

完了チェックリスト

• [x] Tilemapでマップが描けている

• [x] 床と壁が別Tilemapになっている

• [x] 壁に当たり判定がある

• [x] キャラが壁をすり抜けない

• [x] Order in Layerが正しく設定されている

• [x] カメラがキャラを追いかける

• [x] カメラの動きが滑らか

次回予告

Step 3：戦闘システム

攻撃・HP管理・敵へのダメージ処理を実装します！

Unity Personal / Tiny RPG - Forest / Cinemachine使用 / 完全無料構成