【Unity】タイルマップで２Dマップを効率よく作ろう

2023 9/01

2023年8月25日 2023年9月1日

Seo

URLをコピーする

URLをコピーしました！

２Dのマップを作る時、タイルを一個一個配置していませんか？

Unity標準機能のタイルマップを使えば、効率的にタイルを配置してステージを作ることができます！

本記事ではタイルマップの基本的な使い方から、

タイルマップがより便利に使えるアセットなど紹介していきます。

タイルマップとは

グリッドにタイルを配置して２Dマップを作製できる、Unityの標準機能です。

タイルマップを使えば２Dのマップを効率的、視覚的に開発できます。

さらにアセット素材を使えば、自分好みの２Dマップを簡単に作ることができます。

３Dのタイルマップを作製するアセットもありますが、

まずは基本である２Dマップを作製していきましょう。

タイルマップの作り方

2Dタイルマップの作り方を、以下の手順で解説していきます。

タイルパレットを設定する
タイルを配置する
当たり判定をつける
サイズ変更方法

まずは新たに２DのUnityプロジェクトを作成しましょう。

タイルパレットを設定する

今回タイルに使う素材は、アセットストアからダウンロードします。

下のSunny Landという無料アセットを使って設定していきましょう。

アセットストアからダウンロードできたら、PackageManagerを開き

MyAssets内のSunnyLandを開きImportします。

すべて選択した状態でImportします。

AssetsフォルダにSunnyLandフォルダが作成されたのが確認できます。

続いてタイルパレットを作成します。

Window→2D→Tile Paletteを選択します。

すると、このように先ほどインポートしたアセットが反映された状態のタイルパレットが作成されます。

ここからはこのタイルパレットを使ってシーンにタイルを配置していきましょう。

タイルを配置する

まず、シーンにタイルを配置するためのタイルマップオブジェクトを作成します。

ヒエラルキーウインドウ内で右クリック→2DObject→Tilemap→Rectangularを選択します。

するとこのようにグリッドが配置されます。

先ほど作成したタイルパレット（表示されていない場合はWindow→2D→Tile Palette）内で

筆のアイコンを選択した状態で好きなタイルをクリック→そのままSceneビュー内でドラッグすることで

タイルを配置することができます。

タイルを配置しなおしたい場合は、タイルパレット内の消しゴムアイコンを選択し

ドラッグすることで消すことができます。

タイルは回転させることもできます。

[キーで右回転、]キーで左回転します。

当たり判定をつける

タイルは配置できましたが、このままではタイルに当たり判定がついていません。

キャラクターを配置して実行してみると、このようにすりぬけてしまいます。

当たり判定をつけるにはTilemapオブジェクトのインスペクター内から

AddComponent→Tilemap Collider 2Dを選択しましょう。

再び実行してみると当たり判定が反映され、キャラクターがタイルの位置で止まるようになりました。

サイズ変更方法

他のオブジェクトとの兼ね合いで、タイルのサイズを変更したい場合があると思います。

そんな時は下のようにGridのインスペクター内にあるScaleの値を変更しましょう。

これでタイルの配置は崩さずにサイズを変更することができます。

タイルマップをスクリプトから生成する

タイルマップをスクリプトから生成することもできます。

下のようなスクリプトを作成します。

スクリプト名はSetTileとしておきます。

using UnityEngine;
using UnityEngine.Tilemaps;

public class SetTile : MonoBehaviour
{

    //使いたいタイルのアセットをTileBaseにセット
    public TileBase tile;

    private void Awake()
    {
        var tilemap = GetComponent<Tilemap>();
        var position = new Vector3Int( 0, 0, 0 );

        //x軸の-5から5まで、y軸の-3から0までを塗りつぶす
        tilemap.BoxFill( position, tile, -5, -3, 5, 0 );
    }
}

作成したスクリプトを下のようにTilemapオブジェクトにドラッグアンドドロップします。