『りあーずだんじょん』を作ろう第４話

arg[0] | Hello.

どうも。flanny（ふらんにぃ）です。
今回も『ダンジョン探索ミニゲームを作る』を始めて参ります。

前回は「環境構築その２」ということで「Git のお手入れ」と「ルール決め」について書きました。
今回は「マップデータを考えるその１」です。
とりあえず、スクリプトは書かずマップを表示させてみます。

arg[0] | Hello.
arg[1] | atlas map chips
arg[2] | put map chip renderers
- Sprite を綺麗に描画するためのカメラの設定
  - Clear Flags
  - Projection : Orthographic
- SpriteRenderer の配置
return;
- Comment

arg[1] | atlas map chips

How To

Unity には TileMap という比較的新しい機能があります。
まるで RPGツクールのようにマップを作るツールで便利らしいです。

が、今回は使いません。~~使い方を知らないから。~~
既存ツールの使い方よりも「マップってどう作る？」という視点に注目して進めます。

仕様

マップに関して、呼び名を統一しておきます。

マップチップ（MapChip）
- １マスに描画するマップのこと
- 64×64の画像（Sprite）
マップチップセット（MapChips）
- マップチップの集合体
- いわゆるパレット
- 複数のマップチップを "アトラス化" したもの
マップチップスペース(MapChipSpace)
- マップチップを埋めるスペース
- １つのスペース（１マス）に１つのマップチップを持たせる
- SpriteRenderer
マップ（MapChip）
- ゲーム上で見せるマップ
- マップチップスペースの集合体

マップチップとアトラス化

画像を用意する

さて―
まずはマップチップを作ります。
Adobe社に課金しているので、Illustratorを使います。

マップチップは、64×64 (px) の png形式とします。
とりあえずなんでもいいので、番号を振った16枚を用意しました。

ここで、その16枚のマップチップを１枚の画像にまとめてしまいます。
縦４枚横４枚の計16枚で全体で 256×256 (px) になります。

Unity 上では、まとめた１枚の画像を切り分けて使うことにします。
このように複数の画像を１枚にまとめ、切り分けて使うことを "アトラス化" と呼んだりします。
複数の画像を１枚にまとると、画像の読み込み回数を減らすことができます。
"アトラス化" にはメリット・デメリットがあるので、興味のある方は調べてみてください。

Sprite を Slice する

"アトラス化" した画像をマップチップセットと呼ぶことにします。
マップチップセットを Unity に読み込ませます。
そして Inspector で次の箇所を編集します。

TextureType      ： Sprite (2D and UI)  
Sprite Mode      ： Multiple  
Pixels Per Unit  ： 1  

Filter Mode      ： Point (no filter)

ポイントは３つ。
Pixels Per Unit と Filter Mode と Sprite Mode です。

Pixels Per Unit

Pixels Per Unit は画像の大きさに関する値です。
言葉通り、１Unit あたり何 Pixel で表示するかという意味です。
"Unit" とは Unityで定義されている大きさの単位です。
Scale１ = １Unit と考えてください。

通常は「100」ですが、２Dの画像を扱うときは「1」の方が直感的に配置できるはずです。

Filter Mode

Filter Mode は画像の圧縮方法です。
今回のマップは 64×64 (px) といった小さい画像の集合になります。
そのため Point (no filter) にして綺麗に描画できるようにしています。

Sprite Mode : Multiple

Sprite Modeは Multiple にします。
これによりマップチップセットを切り分けることができます。

「Sprite Editor」をクリックします。
「Slice」の「Type」を Grid By Cell Size にして切り分けます。
画像全体の大きさは 256×256 (px) でマップチップ１枚の大きさは 64×64 (px) です。
「Pixel Size」を X：64 Y：64 にして「Slice」をクリックし、合計16枚のマップチップにしましょう。

上手く切り分けられたので、右上の「Apply」をクリックして確定します。

arg[2] | put map chip renderers

ここからは、マップチップを置く場所を用意します。
ここではマップチップを置く場所をマップチップスペースと呼ぶことにします。

Unityは Sprite を描画するために SpriteRenderer に Sprite を渡す必要があります。
つまり、今回は以下のように考えるわけです。

Sprite = 切り分けたマップチップ
SpriteRenderer = マップチップスペース

ということで、10×10 (マス) のマップチップチップスペースを配置します。

Scene は SampleScene のままです。
解像度は Standalone (1024×768) です。

Sprite を綺麗に描画するためのカメラの設定

まずはカメラの設定をしておきます。
Main Camera の Camera を以下のように編集します。

Clear Flags : Solid Color

Projection  : Orthographic
Size        : 384 (height/2 の意)

Clear Flags

Clear Flags を Solid Color にします。
２Dを扱うときは、こちらの方を選んでおくと見やすいです。

Projection : Orthographic

Projection を Orthographic にします。
Perspective は「透視投影」、 Orthographic は「平行投影」です。
３DCGを扱ったことのある方なら何となくわかるかもしれません。

Size は「解像度の高さ / 2」にします。
今回は Standalone (1024×768) なので 768 / 2 = 384 です。

[

SpriteRenderer の配置

10×10 (マス) の計100個を配置していきます。

まず、親となる GameObject を用意します。
名前を「Map」とし、左上端の位置になるように座標を X = -288, Y = 288 とします。

次に、「Map」の子オブジェクトとして SpriteRenderer をアタッチした GameObject「MapChipSpace」を左上から左へと順に配置していきます。

SpriteRenderer の Sprite には、先ほど用意したマップチップの０番目を渡します。

inspector の値を入力するときは、計算式を使うことができます。
例えば (3) を配置するときに、(1) をコピぺして X に「0 + 64 * 2」のように入力すれば、「128」にしてくれます。
あとは「(1) ～ (10) までを配置したら、(1) ～ (10) をコピペして、Y の値だけ編集する」を繰り返せば、比較的楽に配置できます。

手入力で地道に配置できました。
SpriteRenderer の Sprite に違う画像を渡せば、ちゃんと置き換わるはずです。
しかし、さすがに全種類のマップ１つ１つの Sprite を置き換えるのは地獄でしょう。

return;

ひとまず、計100個のマップチップスペース(SpriteRenderer)を配置することができました。
次回は、簡易的なマップデータを用意して、マップチップスペースたちに反映させていきます。

Comment

今回のキーワードアトラス化：画像を１つにまとめて切り分けて使うこと