Unity 標準のタイルマップを使用して見下ろし型２Ｄマップを作成する
検証環境
- Windows
-
- Windows 11
- Unity エディター
-
- 2021.3.3f1
- 入力システムパッケージ
-
- 1.3.0
この Tips の前提設定
この Tips の説明の前提として以下の設定を事前に行っています。
マップチップについて
古いゲームにおいては容量の問題から１枚絵のマップを用意することがなかなか出来なかったため、 「マップチップ」という小さな画像を組み合わせてマップを作る手法が流行っていました。 これにより大きな画像を用意しなくても小さな画像データだけで広大なマップを表現することができるようになりました。
今では作れるファイルのサイズにほぼ制限が無くなっているためマップチップを使わなくてもマップを表現できるようになりましたが、 マップチップによるマップ制作は非常に手軽なので今でもよく使われる手法です。
Unity では比較的最近マップチップによるマップ制作がサポートされたので、今回はこの機能を使用して RPG によくある見下ろし方マップを作ってみます。
ちなみにマップチップのサイズは様々であり 16x16px や 32x32px, 64x64px などがあります。基本的に形は正方形となります。 今回は 32x32px のサイズを使用します。
マップ素材の借用について
以下のサイトからお借りしたものに対してサンプルとして不要部分を削除して使用しています。
プロジェクトの作成と画像の用意
2D のプロジェクトを作成したらマップチップとなる画像をプロジェクトに追加します。
このままではただの１枚画像なので、Unity でチップ単位で扱えるように分割します。 プロジェクトに追加されたマップチップを選択してインスペクターを表示します。
インスペクターに各項目が表示されるので設定します。
| 項目名 | 値 | 備考 |
|---|---|---|
| テクスチャタイプ | スプライト | |
| スプライトモード | 複数 | |
| ユニット毎のピクセル数 | 32 | 基本的にはマップチップのサイズと同じ方がいいですが作るゲームによります |
| メッシュタイプ | 完全な矩形 | |
| フィルターモード | ポイント | 必要であれば |
| 圧縮 | なし | 必要であれば |
設定したら下にある「適用する」ボタンをクリックします。
次に真ん中あたりにある「Sprite Editor」ボタンをクリックします。
スプライトエディターダイアログが表示されるので「スライス」ドロップダウンをクリックし、 タイプを「Grid By Cell Size」にし、ピクセルサイズの XY をマップチップと同じサイズに指定したら「スライス」ボタンをクリックします。
すると画像が白い線で区切られると思います。線が分かりにくい場合は Ctrl キーを押すと緑色になります。
確認できたら「適用する」ボタンをクリックしてダイアログを閉じます。
プロジェクトにあるマップチップ画像の右のボタンをクリックしたときに分割された画像が表示されればＯＫです。
タイルマップの追加
ゲーム画面にタイルマップを作ってみます。ヒエラルキーの追加ボタンから「2D オブジェクト -> タイルマップ -> 矩形」を選択して追加します。
するとヒエラルキーに Grid と Tipemap が追加されどちらかを選択している状態だとビューにグリッドが表示されます。
タイルパレットの設定
タイルパレットのタブを選択します。無い場合はメニューから「ウィンドウ -> 2D -> タイルパレット」を選択します。
「新しいパレットを作成」を選択し名前を分かりやすい名前にします。ここではとりあえず「MapChipPalette」としています。 入力したら「作成」ボタンをクリックします。
フォルダの指定ダイアログが表示されるのでパレット名と同じ「MapChipPalette」で作成しておきます。 これから作成するパレットはここで作成したフォルダの中に作られます。
パレットを作成したらマップチップ画像を新しく作ったパレットにドロップします。
再びフォルダの指定ダイアログが表示されますが、先ほど作成したフォルダをそのまま指定します。
タイルパレットにマップチップが追加されたことを確認できます。
また、作成したフォルダの中を見てみると分割された画像は入っていることを確認できます。
これでマップを作る準備が出来ました。
マップの作成
準備ができたので後はマップを作成するだけです。 タイルパレットからスポイトアイコンを選択します。
すると使用するマップチップを選択できるので配置したいマップチップを選択します。
ビューに表示されているグリッドをマウスでクリックしてみてください。クリックした場所にマップチップが配置されるはずです。
そのままドラッグすれば連続で配置することもできます。
他のマップチップを選択して配置することもできます。
まとめて配置したい場合はタイルパレットから矩形アイコンを選択します。
このように範囲で配置することができます。
マップチップを消したい場合はタイルパレットから消しゴムアイコンを選択して消したい場所をクリックします。
また、パレットの複数セルにまたがるオブジェクトを配置したい場合はパレットで範囲選択します。
するとビューでその範囲が表示されるのでクリックするとまとめて配置することができます。
他にも「選択」「移動」「塗りつぶし」などのアイコンがあるので使ってみてください。
後は好きなようにマップチップを配置していけばマップの完成となります。
今回カメラの範囲にしか配置していませんがもっと広い範囲でマップを作成すれば、 ゲームでキャラクターを移動させてマップをスクロールしながら歩かせるようなこともできると思います。