【Unity】GameObjectメニューの2D Objectについて解説【初心者向け】

【Unity】GameObjectメニューの2D Objectについて解説【初心者向け】

メニューバーの『GameObject』から作成できるGameObjectの種類について解説するシリーズ第3弾。

今回は「2D Object」のメニューから作成できるオブジェクトについて解説を行います。

2D Objectと言ってもスプライトかタイルマップか、ぐらいの感じなので気楽に内容を把握できると思います。

 

環境

macOS 10.14 Mojave

Unity2018.3.14f1

Unity Hub 1.6.2

メニューバーの『GameObject』について

『GameObject』は画面左から5番目、『Assets』と『Component』に挟まれています。

左から5番目にあるのだポッター
左から5番目にあるのだポッター

 

個々のGameObject作成に関してはそれぞれ別記事として作成し、それ以外の項目については以下の記事で解説を行なっています。

 

この記事では以下の項目を解説していきます。

2D Object
2D Object

 

便宜のため区切り線で領域を分け、それっぽく名前を付けます。

上から、スプライトの作成、タイルマップの作成と呼びます。この呼び方は私が勝手に呼んでいるだけのものなので注意。

タイルマップの作成の領域にSprite Mask入っちゃってるなぁ。

スプライトの作成

2Dのオブジェクトであるスプライトを作成します。

スプライト(Sprite)とは、ゲームにおける画像合成の仕組みのこと。

背景となる大きな画像の上に、小さな画像を重ねていって最終的にゲーム画面になる訳ですが、この時の小さな画像がスプライト画像です。

キャラクターが動くのに合わせて画面に表示する絵を1枚ずつ作っていたらゲーム開発者はデスマーチ確定なので、レイヤーを分けて表示して、ハードウェアで合成して描画しているのです。

……とまぁこれを知らなくても、「2Dで使う画像のこと」くらいの認識で大丈夫です。

Sprite

Sprite Rendererを持つGameObjectを作成します。

Sprite
Sprite

 

デフォルトの状態ではスプライト画像がセットされておらず透明なので、丸の画像をセットしています。

スプライト画像として表示できるのは、インポートした画像を選択した時に表示されるImport Settings画面で「Sprite(2D and UI)」を選択した画像です。

Import Settingsの画面
Import Settingsの画面

 

スプライトは重ね合わせがポイント。表示順を意識しておく必要があります。

表示順を決める要素は、Sorting Layer、Order in Layer、カメラからの距離です。

Sorting Layer

まず「Sorting Layer」でレイヤーの区別を行います。このレイヤーはProject Settingsの『Tags and Layers』で追加できます。

Project Settingsウィンドウから追加
Project Settingsウィンドウから追加

 

最初は「Default」しかないのですが、必要に応じてここにレイヤーを追加します。例えばノベルゲームであれば、背景レイヤー、立ち絵レイヤー、メッセージウィンドウレイヤーのように分けておくと、メッセージウィンドウの前にキャラクターが出てきたりしないようになります。

このSorting Layersの設定では上の方にあるレイヤーから描画されていきます。先に描画される=最終的な画像では後ろに隠れる、です。なので背景レイヤーはこの設定で上の方にしておくといいですね。

Order in Layer

同じレイヤー内の順番はOrder in Layerで決めます。

レイヤー内の順番
レイヤー内の順番

 

数字が小さいほど先に描画されます。画面の手前に表示したい場合は数字を大きくします。

先ほどのノベルゲームの例であれば、立ち絵レイヤーの中でキャラクターごとの順番を決めておけば、どちらが画面手前に描画されるかを制御できます。

カメラからの距離

レイヤー内の順番が同じ場合はカメラからの距離で判断されます。カメラから遠ければ先に描画し、カメラに近ければ後に描画されます。

画面の手前に表示したいオブジェクトはカメラに近づけておくのがベスト。TranformのPositionでZを操作するのが簡単ですね。

この時、カメラのモードが『Orthographic』になっているか確かめておくと吉。プロジェクトを3Dで開始した場合は『Perspective』になっているため、カメラからの3次元的な距離で近い/遠いが判断されます。なので単純にPositionのZ軸だけで判別できないんですね。

それでも決まらない場合

Sorting Layerも同じ、Order in Layerも同じ、カメラからの距離も同じ場合はどうなるのでしょうか。

その答えは……謎です。

作成順? とも思いましたが、色々と実験してみても法則性が分かりませんでした。

なので私から言えることはひとつ。

それぞれの順番をちゃんと定義して、思った通りの順番で表示されるようにしましょう。

タイルマップの作成

この領域では各種タイルマップの作成が行えます。

タイルマップとは、16*16や、32*32などの小さな画像をタイルのように敷き詰めて、大きなマップ画像を作成する機能です。RPGツクールをやったことのある人だったら、マップチップとかマップパーツといった呼び方でピンと来るかも。

『Sprite Mask』は上の『Sprite』と同じグループでいいんじゃない?

Sprite Mask

Youはなぜここに?

スプライト画像をマスクするGameObjectを作成します。

丸画像でマスク
丸画像でマスク

 

「なぜここに?」なんて言いましたが、超お役立ちの機能です。

このオブジェクトを配置した位置にあるスプライトを切り抜いてくれるんです。

マスク画像はSprite MaskコンポーネントのSpriteで指定できます。上の画像で丸く切り抜かれているのは、ここで丸い画像を指定しているためでした。

Sprite Mask
Sprite Mask

 

マスク画像と相互作用するかどうかは、各スプライトオブジェクトのSprite Rendererで設定できます。

マスクとの関わり方
マスクとの関わり方

 

None

同じ位置にSprite Maskのオブジェクトがいても切り抜きません。

None
None

Visible Inside Mask

マスク画像と同じ形で切り抜かれます。マスク画像の範囲内だけ描画したい時に使います。

Inside
Inside

Visible Outside Mask

マスク画像の部分だけ切り抜かれます。暗闇のステージで操作キャラの周りだけ表示されている、みたいな演出も可能。ヨッシーアイランドで隠し通路の中を通っているときに、ヨッシーの周りだけ表示されているアレです。

Outside
Outside

 

マスクしたいスプライトだけ相互作用させられるのがとても便利なんです。切り抜かなくていいスプライトはデフォルトのままNoneにしておけば良い点もグッド。

Tilemap

タイルマップを表示・配置するためのグリッドと、Tilemap Rendererを作成します。

このグリッドにタイルを配置する
このグリッドにタイルを配置する

 

どのタイルを配置するかは、[Window] -> [2D] -> [Tile Palette]から開けるタイルパレットから選択します。

タイルパレットからタイルを選ぶ
タイルパレットからタイルを選ぶ

 

上の例では、ぴぽやさんで公開されているチップセットをタイル化しました。

 

タイルアセットの作成方法については、このブログの以下の記事でまとめているので、こちらをご覧ください。

 

タイルパレットからパーツを選択し、グリッドにパーツを塗っていきます。この作業が特に楽しいんです(ご満悦)

ぺたぺたーっと塗っていこう
ぺたぺたーっと塗っていこう

 

タイルパレットのウィンドウはホバー状態だとすぐに後ろに回ってしまうため、Hierarchyウィンドウのあたりにタブとして留めておくといい感じです。

また、スプライトのImport Settingsで『Pixels Per Unit』の項目がありますが、この値によっては以下のようにグリッドより小さく表示されることがあります。

グリッドより小さい
グリッドより小さい

 

この例ではタイルの大きさが32*32なので、32ピクセルで1ユニットとなるように設定するとうまくいきます。

Pixels Per Unitを調整する
Pixels Per Unitを調整する

 

地面の上に木が生えている、みたいな感じの表現をしたい場合は、下地レイヤーとオブジェクトレイヤーのように分けておくとグッド。下の画像では、下地を「Tilemap_Ground」に描画し、オブジェクトを「Tilemap_Objects」に描画しています。

Hierarchy
Hierarchy

 

地面の上に木などのオブジェクト
地面の上に木などのオブジェクト

 

マップチップの作りにもよりますが、地面の上に配置する木などは、多くの場合下地が見えるように透明ピクセルを含んでいます。これを同じレイヤーに配置しちゃうと、下の画像のように謎の透明感が生まれます。なのでレイヤーを分ける必要があったんですね。

謎の透明感
謎の透明感

 

タイルマップに関してはUnityの公式ブログがとても分かりやすいので、興味があればこちらもぜひ。

Hexagonal Point Top Tilemap

六角形のタイルマップを配置します。「Point Top」なので、上がとんがっている六角形のマップになります。

下の『Hexagonal Flat Top Tilemap』は上が平ら(フラット)な六角形です。向きが違うんですね。

六角形のグリッド
六角形のグリッド

 

六角形のマップは主に戦略シミュレーションゲームでよく使われます。射程距離の計算がしやすいですよね。

六角形のマップ
六角形のマップ

 

六角形のマップチップを作るのはちょっと面倒ですが、四角形のマップチップを使うと枠からはみ出てしまうので、ここは頑張って作りましょ。

パレットでは六角形の向きを選択できます。ここでは[Point Top]を選択してパレットを作りました。

パレットで六角形の向きを選べる
パレットで六角形の向きを選べる

Hexagonal Flat Top Tilemap

六角形のタイルマップを配置します。「Flat Top」なので、上が平らな六角形のマップになります。

上が平らな六角形のグリッド
上が平らな六角形のグリッド

 

こちらもマップを作ってみました。Point TopとFlat Topではパレットの使い回しができないため、それぞれでマップチップ、パレットを作る必要があります。ちょっと大変。

フラット六角形のマップ
フラット六角形のマップ

 

あくまで印象ですが、Point Topの方は上下が尖っているので1マスあたりの安定感はないかも。でも並べて全体を見ると、上下のギザギザ感はそんなに無いですね。

Flat Topは逆に1マスあたりの安定感があります。でも並べて全体を見ると、ちょっと上下のギザギザ感が気になるかも。

Point TopとFlat Topのどちらがいいかは好みで決めていいと思います。ゲームをプレイするユーザーが「やっぱFlat Topの方が上下フラットで安定感あるよね」みたいなことは言わないでしょうし。むしろそこまで分かっているユーザーだったら、あなたの開発チームにスカウトした方がいいかもしれません。

Isometric Tilemap

アイソメトリックビューのタイルマップを配置します。日本だとクォータービューの方が聞き慣れているかも。

クォータービュー
クォータービュー

 

こんな感じでマップを作れます。こちらもレイヤーを分けて海とオブジェクトみたいにすればいい感じになります。画像ではサボりました。

クォータービューのマップ
クォータービューのマップ

 

ここで使用しているマップチップはすき(suxamethonium)さんの素材を使わせていただきました。

Isometric Z As Y Tilemap

Z Positionを高さのオフセットとして使えるアイソメトリックビューのタイルマップを配置します。

グリッドに関しては通常のIsometricと一緒なのでそちらをご覧くださいな。

以下の画像は、高さが0のタイルの上に、高さ1、あるいは2のパーツを描画したものです。左の広い床の上に白いブロックや石を置いてみました。右上のタイルでは、タイルの上にタイルを配置しています。空中に浮いてる感じですね。

高さを表現できる
高さを表現できる

 

高さの設定はパレット画面の下の方にある[Z Position]から行います。デフォルトだと0で、値を増やせば通常のタイルの上に乗っているように描画されます。

Z Positionの設定
Z Positionの設定

 

また、『Isometric Z As Y Tilemap』でマップを作るにあたっては、Project SettingsのGraphicsで設定を入れる必要があります。設定値はマニュアルに書かれているのでそのまま入れるのがベストです。

Project Settingsで設定を入れる
Project Settingsで設定を入れる

 

詳しい話をし始めると地獄めいた長さになりそうなので、詳細についてはマニュアルをご覧あれ。

 

正直、初心者のうちは普通のTilemapを使うのが一番楽です。

まとめ

このページではメニューバーの『GameObject』から作れる『2D Object』の項目について解説を行いました。

ほとんどTilemapの解説でしたね。2Dオブジェクトはスプライトかタイルマップかの2分野なのでやむなし。

スプライトは意識せずともめっちゃ使うし、通常のタイルマップもどんどん使ってみてくださいな。

アセット作ってます!

CTA-IMAGE

Unityでの開発に役立つアセットを作っています。

3DダンジョンRPGを開発するスピードを200%加速するAssetや、ファンタジーRPGのダンジョンを彩るパーツを取り揃えています。

特に3DダンジョンRPGのゲームを1から作るのは結構時間がかかります。ダンジョン部分の作成はこうしたアセットを使って、開発をブーストさせてみませんか?