パソコン入れ替えによるプロジェクト復旧の第二弾。今回はマップを創ります。以前の記事であいまいだった部分を少し明確にしました。
マップを創る段階には、パレットの作成、ゲームオブジェクトの作成、描画 の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
をクリック。
(4) ファイルエクスプローラ:保存先のフォルダを選択します(今回はAssetsの直下にしました)
(5) Projectウィンドウで先ほどのフォルダを選択して、New Palette (Prefab Asset) のアイコンが追加されていることを確認します。
これで、Tile Paletteウィンドウにグリッドが表示されて、マップ用の画像を展開する準備ができました。
画像の分割(省略)
今回は分割済みの画像があるため省略します。そのうちチャレンジしたいと思います。
画像が分割されているかどうかは、以下のように見分けます。
分割されていない画像
分割された画像
パレットに画像を展開
(1) Projectウィンドウ にある 分割された画像を Tile Paletteウィンドウ にドラッグ&ドロップ。
※Tiny RPG Forest を使った場合、Project > Asset > Tiny RPG Forest > Artwork > Environment にある tileset-sliced.png になります。
(2) ファイルエクスプローラが表示され、作業フォルダを選択します。デフォルトは分割された画像があるフォルダです。フォルダの選択
をクリック後、かなり時間がかかりますが、Tile Paletteウィンドウ に分割された画像が展開されます。
(3) 展開が完了すると、Projectウィンドウ上に、先ほど選択したフォルダに分割された画像が展開されます。(今回はAssets > TilePallette > TinyRPGForest フォルダを作成して、その下に展開してみました)
Tilemapゲームオブジェクトの作成
Hierarchyウィンドウ: +▼
> 2D Object
> Tilemap
Grid
の下に新しい Tilemap
が作成されます。
※Grid
が無ければ、Grid
が一緒に作成されます。
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ウィンドウ内の欄内の空いているスペースをクリック
(3) 以下の警告が出た場合は、Apply を選択
Tilemapに描画された画像がグリッドとぴったり合うようになりました。
描画する
描画は、TilePaletteウィンドウでタイルを切り替えながら、Sceneビューで描画します。
主に使用するツールは ブラシ(Paint with active brush)
と 消しゴム(Erase with active brush)
です。
各ウィンドウでの主な操作は以下と思います。
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 にした場合、以下の図のようになります。
ただし、Z軸で表現はいろいろと面倒なので、Z座標を無視して描画順を決定する Sorting Layer で指定します。
(1) Unityメインメニュー: Layers
> Edit Layers...
(2) Inspectorウィンドウ: SortingLayers
> [+
] を選択
最初は Layer = Default
だけ定義されていて、すべての Renderer
に適用されています。今回は Obstacle
、WalkLayer
、ForeGround
の3層を追加しました。
新しく追加されたレイヤほど下に追加されますが、順番は後から入れ替えができます。下のレイヤほど手前に描画されます。
(図)
層の設定
キャラクター(Sprite)、マップ(Tilemap) それぞれに層を設定します。
キャラクター(Sprite)への層の設定
Inspectorウィンドウ: Sprite Renderer
> Additional Settings
> Sorting Layer
マップ(Tilemap)への層の設定
Inspectorウィンドウ: Tilemap Renderer
> Additional Settings
> Sorting Layer
今回は、Foreground
、WalkLayer
、Obstacle
の3つの Tilemap に、それぞれ Sorting Layer として Foreground
、WalkLayer
、Obstacle
を割り当てました。また、キャラクター(Player
) の Sorting Layer も WalkLayer
を割り当てました。これでZ座標が変わっても、意図した順番に描画されるようになりました。
(以上)