ゲーム化!tomo_manaのブログ

ゲーム化!tomo-manaのブログ

Unityでゲームを作る方法について紹介しています

Unity学習#4 マップを創る (Unity 2019.4.4f1)

パソコン入れ替えによるプロジェクト復旧の第二弾。今回はマップを創ります。以前の記事であいまいだった部分を少し明確にしました。

マップを創る段階には、パレットの作成ゲームオブジェクトの作成描画 の3つの段階があります。そのうち、パレットの作成 にいくつかハードルがあります。しかし、手順は決まっているので、以前記事を書いた当時も、手順を丁寧に紹介して下さっているサイトも見つけることができ、見様見真似でパレットを作成できた印象があります。

今回は、以前作成した第4回を参考にしています。
tomo-mana.hatenablog.com

パレットの作成

Tile Palette ウィンドウを開く

Unityのメインウィンドウ:Window > 2D > Tile Palette

新しいパレットの作成

(1) Tile Palette ウィンドウ:Create New Palette を選択します。
(2) Name にパレットの名前を入力します(デフォルトは New Palette になっています)。
(3) Create をクリック。

f:id:tomo_mana:20210101190625p:plain
Tile Paletteウィンドウ - Create

(4) ファイルエクスプローラ保存先のフォルダを選択します(今回はAssetsの直下にしました)
(5) Projectウィンドウで先ほどのフォルダを選択して、New Palette (Prefab Asset) のアイコンが追加されていることを確認します。

f:id:tomo_mana:20210101190715p:plain
Prefabアイコン (Tile Palette)

これで、Tile Paletteウィンドウにグリッドが表示されて、マップ用の画像を展開する準備ができました。

画像の分割(省略)

今回は分割済みの画像があるため省略します。そのうちチャレンジしたいと思います。
画像が分割されているかどうかは、以下のように見分けます。

分割されていない画像

f:id:tomo_mana:20210101190805p:plain
分割されていないアトラス画像

分割された画像

f:id:tomo_mana:20210101190827p:plain
分割された画像

パレットに画像を展開

(1) Projectウィンドウ にある 分割された画像を Tile Paletteウィンドウ にドラッグ&ドロップ。
 ※Tiny RPG Forest を使った場合、Project > Asset > Tiny RPG Forest > Artwork > Environment にある tileset-sliced.png になります。

f:id:tomo_mana:20210101190917p:plain
分割された画像をパレットに展開

(2) ファイルエクスプローラが表示され、作業フォルダを選択します。デフォルトは分割された画像があるフォルダです。フォルダの選択 をクリック後、かなり時間がかかりますが、Tile Paletteウィンドウ に分割された画像が展開されます。

(3) 展開が完了すると、Projectウィンドウ上に、先ほど選択したフォルダに分割された画像が展開されます。(今回はAssets > TilePallette > TinyRPGForest フォルダを作成して、その下に展開してみました)

f:id:tomo_mana:20210101191013p:plain
パレットに展開された画像(Projectウィンドウ内)

Tilemapゲームオブジェクトの作成

Hierarchyウィンドウ: +▼ > 2D Object > Tilemap
Grid の下に新しい Tilemap が作成されます。
Grid が無ければ、Grid が一緒に作成されます。

f:id:tomo_mana:20210101191050p:plain
GridとTilemap(Hierarchyウィンドウ)

Tilemapの名前、設定の変更はInspectorウィンドウで行います(省略)。

タイルのブロックサイズを変更する

このままでも描画はできますが、実際にTileMapに塗ってみると、小さい画像が表示されてしまうと思います。

(1) TilePalette に展開した画像をProjectウィンドウ上で選択すると、Inspectorウィンドウに画像の情報が表示されます。
 Tiny RPG Forest を使用した場合は、Project > Assets > Tiny RPG Forest > Environment > tileset-sliced をクリック。
(2) Sprite Mode 欄内の Pixels Per Unit 欄を 100 → 16 にして、変更を確定するため Projectウィンドウ内の欄内の空いているスペースをクリック

f:id:tomo_mana:20210101191931p:plain
Pixel Per Unit(Tilemap用画像)

(3) 以下の警告が出た場合は、Apply を選択

f:id:tomo_mana:20201231120621p:plain
Permission

Tilemapに描画された画像がグリッドとぴったり合うようになりました。

描画する

描画は、TilePaletteウィンドウでタイルを切り替えながら、Sceneビューで描画します。
主に使用するツールは ブラシ(Paint with active brush)消しゴム(Erase with active brush) です。

f:id:tomo_mana:20210101193711p:plain
Tile Paletteウィンドウ - 操作

各ウィンドウでの主な操作は以下と思います。

Tile Palette ウィンドウ

キー 操作
マウスホイール パレット画面の拡大縮小
左クリック ツール選択/タイル選択(単体)
左クリック(押しながら)+マウス移動 タイル選択(グループ)
右クリック(押しながら)+マウス移動 パレット画面スクロール
十字キー パレット画面スクロール

Scene ビュー

キー 操作
マウスホイール Sceneビューの拡大縮小
左クリック タイル描画
右クリック(押しながら)+マウス移動 Sceneビューのスクロール
十字キー Sceneビューのスクロール

マップ描画時につまづきやすいのは、マウスの右クリックで画面スクロールができることに気づくまで、キーボードの十字キーとマウスのホイールを間違えて、画面が拡大縮小されてイライラする点でしょうか。

Tilemapの多層化 (#5抜粋)

Tilemap を重ねることで、木や柵などの前景を配置したり、通れないエリア(障害物)を作成できます。

2つ目の Tilemap の定義

2つ目以降のTilemapも、1つ目のTilemapと同じ方法で作成できます。すでに定義済のGridの下に追加されていきます。

層の定義

複数のTilemapを定義通常はZ座標に従って描画順が決まります。通常はカメラを除くすべての2DオブジェクトのZ軸が0で、値が小さいほど手前に描画されます。例えば、歩けないフィールド (Obstacle) のZ座標が +2 、歩くフィールド (Walk Layer) が 0、キャラクター (Player) が -1、柵 (Foreground) が -2 にした場合、以下の図のようになります。

f:id:tomo_mana:20210102232026p:plain
重ね順をZ軸で決めた場合(3D)
f:id:tomo_mana:20210102225656p:plain
重ね順をZ軸で決めた場合(2D)

ただし、Z軸で表現はいろいろと面倒なので、Z座標を無視して描画順を決定する Sorting Layer で指定します。
(1) Unityメインメニュー: Layers > Edit Layers...

f:id:tomo_mana:20210102224344p:plain
Edit Layers

(2) Inspectorウィンドウ: SortingLayers > [+] を選択
最初は Layer = Default だけ定義されていて、すべての Renderer に適用されています。今回は ObstacleWalkLayerForeGround の3層を追加しました。
新しく追加されたレイヤほど下に追加されますが、順番は後から入れ替えができます。下のレイヤほど手前に描画されます。
(図)

f:id:tomo_mana:20210102224422p:plain
Sorting Layerの追加

層の設定

キャラクター(Sprite)、マップ(Tilemap) それぞれに層を設定します。

キャラクター(Sprite)への層の設定

Inspectorウィンドウ: Sprite Renderer > Additional Settings > Sorting Layer

f:id:tomo_mana:20210102223659p:plain
SpriteへのSorting Layer設定
マップ(Tilemap)への層の設定

Inspectorウィンドウ: Tilemap Renderer > Additional Settings > Sorting Layer

f:id:tomo_mana:20210102223745p:plain
TilemapへのSorting Layer設定

今回は、ForegroundWalkLayerObstacleの3つの Tilemap に、それぞれ Sorting Layer として ForegroundWalkLayerObstacle を割り当てました。また、キャラクター(Player) の Sorting Layer も WalkLayer を割り当てました。これでZ座標が変わっても、意図した順番に描画されるようになりました。

(以上)