0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2Dゲームのタイルマップを触ってみる

Posted at

はじめに

Unityでのゲーム開発初学者です。
2Dゲームのタイルマップ周りの用語や各機能の使い方がよくわかっていなかったので、
理解するためにいろいろと触ってみました。

環境

macOS Ventura 13.4
Unity 2022.3.2f1

タイルマップでタイルを配置してみる

1. タイル用の画像を作成してAssets配下に格納する(Sprite化する)

自分はFileAlpacaで作成した以下画像をAssets/Images配下に格納しました。

images
2. HierarchyにTilemapを追加する

以下手順で作成する。
「2DObject」→「Tilemap」→「Rectangular」

3. ProjectにTilePaletteを追加する

以下手順で作成する。
「Window」→「2D」→「TilePalette」

4. TilePaletteにSpriteをD&Dで配置する

TilePaletteのここにD&Dしてくださいとなっている箇所にD&Dする。
Spriteを全選択して行うと纏めて配置できる。

5. Sceneにタイルを配置していく

今回タイルに作成した画像は32x32で、各SpriteのPixelsPerUnitは100にしていたので、
GripのCellSizeはそれに合わせて0.32としている。

手順5までで以下のような状態。

screen_state

コライダーを設定してみる

1. タイルマップにコライダーを追加する

TilemapのInspectorからTilemapCollider2Dを追加する。
Tilemapを選択するとシーン上で配置したタイルの外側にコライダーが付与されているのが確認できる。

2. 適当なオブジェクトをタイルの上から落としてみる

HierarchyにCircleオブジェクトを追加してタイルの上に配置する。
CircleのInspectorからRigidbody2DとCapsuleCollider2Dを追加する。

これでゲームを実行するとCircleオブジェクトがタイルと接触したところで止まるのが確認できる。

3. 比較のため高さの違うタイルマップを作成して配置する

以下のような高さの低いタイルを追加してシーン上に配置してみる。
こういったタイルの場合、自動で色のついた部分にコライダーが付与される。
SprinteEditorのCustomPhysicsShapeでコライダーの範囲を好きなように設定することもできる。

screen_state

最終的には以下のようなフィールドを実装することができた。

ezgif.com-optimize.gif

タイルマップを使えば2Dアクションゲーム用のステージも色々作れそうだ。

タイルマップを使用するメリット

スプライトを1つ1つ使用するよりタイルマップを使用した方がパフォーマンスは改善するとのこと。詳細は以下の記事に記載されている。

※4年前の記事なので情報が古い場合があります。

その他参考にした記事

絵に例えると、Tilemapがキャンパス、TilePalleteがパレット、素材の画像が絵の具ですね。

この表現がイメージしやすくてとても分かりやすかった。

最後に

機会があればスプライトアトラスとかも自分で作って使ってみたい。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?