タイルマップの紹介

1. タイルマップって何？

Unity 2019 LTS と 2D Tilemap Editor 1.0.0 にて検証済み

Unity のタイルマップシステムは、レベルデザインサイクルの作成とイテレーションを容易にし、アーティストやデザイナーが 2D ゲームの世界を構築する際に迅速にプロトタイプを作成することを可能にします。Tilemap エディターは、パッケージマネージャー経由でインストールされます。

タイルマップは、グリッドオーバーレイとその他多くのコンポーネントが連携して構成されています。このシステムでは、タイルやブラシのツールを使ってレベルをペイントしたり、タイルの挙動のルールを定義したりすることができます。タイルマップでは、動的なエッジ、アニメーションタイル、ランダムなタイル配置などのプラットフォームを作成することができます。Unity のタイルマップシステムは、ゲームプレイのレベルを含む 2D プロジェクトに最適で、ユーザーはゲームエンジン内ですぐにテストできるレベルのプロトタイプを作成できます。

本チュートリアルでは、タイルマップシステムのさまざまな部分について説明します。

2. Tilemap エディターのインストール

1. ウィンドウのドロップダウンから Package Manager を選択します (画像 01)。

画像 01：パッケージマネージャーへのアクセス方法

2. Package Manager の左側の列で 2D Tilemap Editor をクリックし、右下隅にある Install ボタンをクリックします (画像 02)。

画像 02：2D Tilemap エディターのインストール

3. タイルマップの作成

1. Hierarchy ビューで右クリックし、2D Objects > Tilemap と選択します。すでに Tilemap のクラスに慣れている場合は、代わりに特定のものを作成することができます。これにより、シーンにタイルマップが作成されます (画像 03)。

画像 03：Hierarchy からシーン内にタイルマップを作成する

4. タイルマップシステムについて

タイルマップは、グリッドと実際のタイルマップの 2 つで構成されています。Tilemap エディターは、一対多の関係で動作します。Scene にはグリッドは一つしかありませんが、タイルマップは複数存在します。グリッドは、タイルマップが参照するシーンのレイアウトを作成します。Hierarchy でグリッドを選択すると、Inspector にグリッドのプロパティが表示されます (画像 04)。

画像 04：Inspector 内の Grid

Inspector を見ると、グリッドがタイルを整理して表示する方法について、直接変更できるものが 4 つあります。Cell Layout 以外の設定は、通常、デフォルト値のままにしておきましょう：

• Cell Size：これにより、グリッドの各セルのサイズが決まります。この変更は、グリッド内のすべてのタイルマップに適用されます。

• Cell Gap：グリッド上の各セルの間のスペースを決定します。セルサイズと同様に、グリッド内のすべてのタイルマップに適用されます。

• Cell Layout：グリッド上のタイルのレイアウトを決定します。オプションには、Rectangle、Hexagonal、Isometric、Isometric Z As Y があります。

• Cell Swizzle：グリッドがどの方向を向いているかを決定します。選択できる方向は、XYZ、XZY、YZZ、YZX、ZXY、ZYX です。

5. タイルマップの設定

次に、Hierarchy でグリッドの下にある Tilemap を選択します。2 つのコンポーネントが表示されます：

• Tilemap (画像 05)

• Tilemap Renderer (画像 06)

画像 05：Tilemap のプロパティ

Tilemap コンポーネントでは、タイルマップの挙動や、Tilemap 内のタイルの挙動を変更することができます。以下で、タイルマップの設定について簡単に説明します：

• Animation Frame Rate：Unity がタイルアニメーションを再生するレート。これは、タイルマップ内のタイルアニメーションの速度に影響します。

• Color：タイルには、選択した色を適用するだけでなく、透明度の値も設定できます。これは、雲や水のようなタイルに特に有効です。

• Tile Anchor：これは、各タイルがグリッドのどこに固定されるかを示すものです。デフォルトでは、タイルが各グリッドスペースの中心に固定されるように設定されています。

• Orientation：Grid Direction と同様に、タイルの向きを調整する必要がある場合に使用します。これは、2D ではなく 3D 環境で作業する場合に便利です。

画像 06：Tilemap Renderer コンポーネント

また、各タイルのレンダリング方法やソート順を変更できる Tilemap Renderer にも注目です。

• Sort Order： 選択したタイルマップのタイルがソートされる方向を設定します。 次のようなオプションがあります：Bottom Left、Bottom Right、Top Left、Top Right

• Mode：タイルのレンダリングモードを設定します。オプションは、ひとまとめ（デフォルト）または個別です。

• Chunk Mode では、タイルを場所によってひとまとめにし、レンダリングの際は、それらのスプライトをまとめてバッチします。各バッチは 2DTransparent Queue でソートされる場合、1 つのソートアイテムとして扱われます。これにより、ドローコールの回数が減り全体的なパフォーマンスが向上します。ただし、他のレンダラーはタイルマップのどの部分にもレンダリングできないため、他のレンダリングされたスプライトをタイルマップスプライトと混合することはできません。Chunk Mode は、テレインのベースレイヤーや、シーン内で単一の深度に配置するマップに最適です。

• Individual Mode では、タイルマップ上の位置と設定されたソートプロパティーに基づいてスプライトをソートし、個別にレンダリングします。これにより、森の中の木と木の間などで、キャラクターが他の障害物スプライトの背後に表示できます。

• Detect Chunk Culling：タイルマップレンダラーは、ひとまとめのタイルマップのカリングに使用する境界を自動的に検出することができますが、次のオプションで境界を手動で設定することもできます。

• Chunk Culling Bounds：これにより、Chunk Mode でのカリングの範囲を拡張することができます。

• Mask Interaction：タイルマップは、オプションでシーンのスプライトマスクの内側または外側にのみ表示することができます。

• Material：各タイルのレンダリングに使用されるマテリアルを変更することができます。

• Sorting Layer：レンダリングのときにスプライトが重なる順番を決定するのに使用するレイヤーをドロップダウンで選択します。

• Order in Layer：このオプションは、Sorting Layer 内のタイルマップのレンダー優先度を設定します。これは、木の上に雲をレンダリングするときに便利です。

6. Tile Palette に触れてみよう

タイルマップシステムを使用する際には、タイルマップの作成、修正、編集を支援する Tile Palette ツールを使用することがほとんどです。Tile Palette には、このプロセスに役立つツールがあります。

プロジェクトで Window > Tile Palette と選択し、Tile Palette ウィンドウを開きます (画像 07)。

画像 07：Tile Palette ウィンドウ

1. Tile Palette には、左から順にいくつかのツールが用意されています：

選択ツール：Tile Palette ウィンドウでタイルを選択すると、そのタイルのプロパティーの詳細が Inspector ウィンドウに表示されます。

画像 08：選択ツール

移動ツール：選択したタイルを保持し、タイルマップ上の別の位置にドラッグします。

画像 09：移動ツール

ペイントブラシツール：Tile Palette ウィンドウで選択したタイルで、シーンのタイルマップ上の任意の場所をクリックしてペイントを開始します。

画像 10：ペイントブラシツール

矩形ツール： 選択したタイルで塗りつぶす領域を定義できます。

画像 11：矩形ツール

ピッカーツール： タイルマップまたはタイルマップパレットからタイルを選択するにはピッカーツールを使用します。

Figure 12: ピッカーツール

消しゴムツール：Scene ビューで消しゴムツールをアクティブにしてタイルを選ぶと、タイルマップからタイルを消去できます。

画像 13：消しゴムツール

塗りつぶしツール：選択したタイルを使って、塗りつぶしたい領域を定義することなく、領域を塗りつぶすことができます。この機能は、隣接するすべての空きグリッドを埋めることで動作するので、他の既存のタイルに囲まれた領域に使用するのが最適です。注意しないと、シーン全体を選択したタイルで埋めてしまい、コンピュータに負担をかけてしまいます。

画像 14：塗りつぶしツール

7. Tile Palette の使い方

このウィンドウにはもうひとつボタンがあります。 Active Tile Palette ドロップダウンです。ここでは、既存のタイルパレットを選択したり、新しいタイルパレットを作成したりすることができます。

1. Active Tilemap を選択し、Create New Tile Palette を選択します（画像 15）。または、既存の Tile Palette を選択します。

画像 15：新しい Tile Palette の作成

2. 新しいパレットに名前を付け、その他の設定はそのままにしておきます。これで、新しい Tile Palette が作成されますので、ご利用ください。

画像 16：Tile Palette が選択されている Active Tilemap

Active Tilemap のドロップダウンでは、どのタイルマップでペイントするかを決定します。シーン内に複数のタイルマップがある場合、現在作業しているタイルマップを見続けることが重要です。そうしないと、タイルが重なったり、タイルが正しくアニメーションしないなどの問題が発生します。

Tile Palette には、Selected Palette、Edit button、Default Brush などの注目すべき機能があります (画像 16)。

• Selected Palette を使用して、使用/編集したいタイルパレットを選択します。

• Edit ボタンは、タイルパレットを編集するためのトグルです。

• Default Brush は、シーンをペイントするためのさまざまなブラシを選ぶことができるドロップダウンです。

8. Tilemap Collider 2D の追加

画像 17：Tilemap Collider 2D コンポーネントの追加

1. Tilemap Renderer に移動します。

2. Tilemap Collider 2D という追加コンポーネントを追加して、オブジェクトがタイルを通過するのを防ぎます。

9. まとめ

タイルマップシステムは、2D レベルの作成プロセスを高速化し、ラピッドプロトタイピングを可能にする頼もしいツールです。このシステムは、多くの冗長な反復作業を取り除き、境界、ルール、アニメーションを手動で実装するために作業をやり直すことを心配することなく、2D レベルを素早く作成することができます。