【Unity】GameObjectメニューの2D Objectについて解説【初心者向け】
- 2019.05.23
- GameObject
- GameObject, Unity, メニューバー
メニューバーの『GameObject』から作成できるGameObjectの種類について解説するシリーズ第3弾。
今回は「2D Object」のメニューから作成できるオブジェクトについて解説を行います。
2D Objectと言ってもスプライトかタイルマップか、ぐらいの感じなので気楽に内容を把握できると思います。
環境
macOS 10.14 Mojave
Unity2018.3.14f1
Unity Hub 1.6.2
メニューバーの『GameObject』について
『GameObject』は画面左から5番目、『Assets』と『Component』に挟まれています。
個々のGameObject作成に関してはそれぞれ別記事として作成し、それ以外の項目については以下の記事で解説を行なっています。
この記事では以下の項目を解説していきます。
便宜のため区切り線で領域を分け、それっぽく名前を付けます。
上から、スプライトの作成、タイルマップの作成と呼びます。この呼び方は私が勝手に呼んでいるだけのものなので注意。
タイルマップの作成の領域にSprite Mask入っちゃってるなぁ。
スプライトの作成
2Dのオブジェクトであるスプライトを作成します。
スプライト(Sprite)とは、ゲームにおける画像合成の仕組みのこと。
背景となる大きな画像の上に、小さな画像を重ねていって最終的にゲーム画面になる訳ですが、この時の小さな画像がスプライト画像です。
キャラクターが動くのに合わせて画面に表示する絵を1枚ずつ作っていたらゲーム開発者はデスマーチ確定なので、レイヤーを分けて表示して、ハードウェアで合成して描画しているのです。
……とまぁこれを知らなくても、「2Dで使う画像のこと」くらいの認識で大丈夫です。
Sprite
Sprite Rendererを持つGameObjectを作成します。
デフォルトの状態ではスプライト画像がセットされておらず透明なので、丸の画像をセットしています。
スプライト画像として表示できるのは、インポートした画像を選択した時に表示されるImport Settings画面で「Sprite(2D and UI)」を選択した画像です。
スプライトは重ね合わせがポイント。表示順を意識しておく必要があります。
表示順を決める要素は、Sorting Layer、Order in Layer、カメラからの距離です。
Sorting Layer
まず「Sorting Layer」でレイヤーの区別を行います。このレイヤーはProject Settingsの『Tags and Layers』で追加できます。
最初は「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 Rendererで設定できます。
None
同じ位置にSprite Maskのオブジェクトがいても切り抜きません。
Visible Inside Mask
マスク画像と同じ形で切り抜かれます。マスク画像の範囲内だけ描画したい時に使います。
Visible Outside Mask
マスク画像の部分だけ切り抜かれます。暗闇のステージで操作キャラの周りだけ表示されている、みたいな演出も可能。ヨッシーアイランドで隠し通路の中を通っているときに、ヨッシーの周りだけ表示されているアレです。
マスクしたいスプライトだけ相互作用させられるのがとても便利なんです。切り抜かなくていいスプライトはデフォルトのままNoneにしておけば良い点もグッド。
Tilemap
タイルマップを表示・配置するためのグリッドと、Tilemap Rendererを作成します。
どのタイルを配置するかは、[Window] -> [2D] -> [Tile Palette]から開けるタイルパレットから選択します。
上の例では、ぴぽやさんで公開されているチップセットをタイル化しました。
タイルアセットの作成方法については、このブログの以下の記事でまとめているので、こちらをご覧ください。
タイルパレットからパーツを選択し、グリッドにパーツを塗っていきます。この作業が特に楽しいんです(ご満悦)
タイルパレットのウィンドウはホバー状態だとすぐに後ろに回ってしまうため、Hierarchyウィンドウのあたりにタブとして留めておくといい感じです。
また、スプライトのImport Settingsで『Pixels Per Unit』の項目がありますが、この値によっては以下のようにグリッドより小さく表示されることがあります。
この例ではタイルの大きさが32*32なので、32ピクセルで1ユニットとなるように設定するとうまくいきます。
地面の上に木が生えている、みたいな感じの表現をしたい場合は、下地レイヤーとオブジェクトレイヤーのように分けておくとグッド。下の画像では、下地を「Tilemap_Ground」に描画し、オブジェクトを「Tilemap_Objects」に描画しています。
マップチップの作りにもよりますが、地面の上に配置する木などは、多くの場合下地が見えるように透明ピクセルを含んでいます。これを同じレイヤーに配置しちゃうと、下の画像のように謎の透明感が生まれます。なのでレイヤーを分ける必要があったんですね。
タイルマップに関しては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で、値を増やせば通常のタイルの上に乗っているように描画されます。
また、『Isometric Z As Y Tilemap』でマップを作るにあたっては、Project SettingsのGraphicsで設定を入れる必要があります。設定値はマニュアルに書かれているのでそのまま入れるのがベストです。
詳しい話をし始めると地獄めいた長さになりそうなので、詳細についてはマニュアルをご覧あれ。
正直、初心者のうちは普通のTilemapを使うのが一番楽です。
まとめ
このページではメニューバーの『GameObject』から作れる『2D Object』の項目について解説を行いました。
ほとんどTilemapの解説でしたね。2Dオブジェクトはスプライトかタイルマップかの2分野なのでやむなし。
スプライトは意識せずともめっちゃ使うし、通常のタイルマップもどんどん使ってみてくださいな。
ゲーム開発の攻略チャートを作りました！
「ゲームを作ってみたいけど、何から手を付けていいか分からない！」
そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。
ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう！
-
前の記事
【Unity】GameObjectメニューの3D Objectについて解説【初心者向け】 2019.05.21
-
次の記事
【Unity】GameObjectメニューのEffectsについて解説【初心者向け】 2019.05.25