ゲーム制作   Unity ソフトウエア 

Unity ソフトウエアでゲーム制作#1モグラたたき編(16.レイヤーとZ-Fighting)

キャッチ画像モグラたたきレイヤーとZ-Fighting

本投稿は2024年9月時点の内容になります。アップデートにより変更となる場合があります。また環境によって違いがあると思いますのであくまで参考として、ご了承ください。

様々な書籍、ブログや動画を参考にさせていただきました。多すぎて一つ一つはtお紹介できませんが感謝です。

初心者の自分がUnity ソフトウエアでゲームを作ってみました。とりあえずシンプルなものということでモグラたたきに挑戦です。ゲーム作ってみるかという感じになったときに、いいタイミングで某ゲームのイベントシナリオ内ミニゲームにモグラたたきが実装されていたのでUIとかエフェクトとか、諸々の仕様をぱくって参考にして作ってみましたよ。様々なHowToの中の選択肢のひとつとして、同じ初心者さんの参考になればよいです。

\ チェック /

今回はレイヤーの管理と2DにおけるZ-Fightingについて解説

前回GameManagerも作成して、だいぶ完成に近づいたので、ここからは少しずつ装飾をしていこうと思います。

本記事のポイント

  • 2DにおけるZ-Fightingについて
  • ソートレイヤーについて解説

背景を設定してみます

背景を準備します

とりあえず背景を準備します。自分が使い慣れたアプリで描いてもいいですし、ユニティちゃん2Dデータや他のアセットを使ってみてもいいかもです。ちなみに自分は素材をAIに描かせてIllustratorで調整しました。学園ぽいものと地下ゲームセンター的な感じで遊んでみました。

背景をシーンに配置します

背景をシーンにドラッグアンドドロップします。Transformプロパティなど適宜調整します。

ゲーム再生してみましょう。

もしかしたらユニティちゃんがチカチカと明滅して見づらくなっているか、または、ユニティちゃんが背景の後ろに隠れて見えなくなっているかもしれません。チカチカと明滅して見づらく現象は「Z-Fighting Z-ファイティング」 といいます。どちらもZ方向を調整かソートレイヤーで解決できます。

Z-Fighting Z-ファイティングとは

Z-Fighting Z-ファイティングとは

  1. 複数のプリミティブ図形(CGの基本となる図形)がカメラから同じような位置にあるときにちらつきが生じる現象。主な原因はZバッファ(深度バッファ)の精度の低下でレンダリング(描画)において競合がおきること。どちらが手前か奥かわからなくなってる状態です。

2DゲームのZ-Fightingや背景被りの解決法

Z-Fightingは3Dだとカメラの距離と位置の関係が複雑な場合もあって解決が難しい場合も多いですが、2Dなら簡単です。深度をずらしてあげればいいので、主な方法は2つ。

2DゲームのZ-Fightingや背景被りの解決方法

  1. Zの位置(Z座標の値)をずらしてあげる。
  2. ソートレイヤーを使って異なるレイヤーに設定してあげる。

解決策その1 Zの位置(Z座標の値)をずらしてあげる

早速試してみます。今回は背景の方のTransformプロパティのZ座標を変更します。

解決策その1 Zの位置(Z座標の値)をずらしてあげるを実証

  1. まずメインカメラのZ位置を見てみましょう。デフォルトのままなら「-10」になっていると思います。
  2. Z位置の値が小さいほど手前、大きいほど奥です。ゲーム再生して背景のZ位置の数値を弄ってみましょう。UnitychanはZ位置「0」にスポーンしています。
  3. 背景のZ位置を「1」にしてみましょう。Z-Fightingによるちらつきが収まった(もしくは背景被りがなくなった)はずです。
  4. カメラの位置とゲームオブジェクトのZ位置の関係を知るために少し遊んでみましょう。試しに背景のZ位置を「-1」にしてみます。背景がUnitychanより手前に来たのでUnitychanが見えなくなってしまったはずです。さらに「-11」にすると背景が消えてしまったと思います。カメラより手前になったのでカメラに映らなくなったからです。

解決策その2も見ていきましょう

ソートレイヤーの使い方

解決策2の前にソートレイヤーの使い方です。

ソートレイヤーの使い方

  1. まずは新しいソートレイヤーを追加します。右上の「レイヤー」ドロップダウンから「レイヤーを編集」をクリック
  2. もしくはインスペクターでゲームオブジェクトの「ソートレイヤー」プロパティをクリックして「Add Sorting Layer」をクリック(今回の背景[スプライト]の場合「SpriteRenderer」の「追加設定」の中にあります。
  3.  ソートレイヤーのリスト項目が隠れているときはさらに「ソートレイヤー」をクリックすると項目が展開されます。
  4. ソートレイヤーのリストの下「+」をクリックします。適宜レイヤーの名前を付けます。今回は「BG」としました。
  5. ソートレイヤーを削除するには「-」をクリックします。
  6. ソートレイヤーの順番はドラッグで変更できます。

2DゲームのZ-Fightingや背景被りのソートレイヤーによる解決法

解決策その2 ソートレイヤーを使う

  1. ソートレイヤーは下にあるものが手前になります。Unitychanは「Default」にあるので、「BG」をドラッグして「Default」より上にします。
  2. 背景のオブジェクトの「ソートレイヤー」プロパティを「BG」に変更します。

ゲーム再生してみます。ちらつき(もしくは背景被り)がなくなったと思います。「ユニティちゃん2Dデータ」アセットのblockを使っていきます。

ブロックを置く

  1. ソートレイヤーの「Block」レイヤーを追加。「Default」より下にドラッグして手間にします(おそらく最初から下にあると思います)。
  2. 整理するためヒエラルキー上に「Blocks」の名前で(0,0,0)に「空のオブジェクトを作成」します。
  3. ブロックに使う「ユニティちゃん2Dデータ」のblockのデータの「単位ごとのユニット数」を「14」(適宜お好みで)にしてシーンの大きさと合わせます。
  4. 「Blocks」オブジェクトを親にしてブロックを配置します。名前はわかりやすいものに変えてください。今回は穴の番号と合うように「Block数字」にしました。
  5. 配置したブロックのソートレイヤーを「Blocks」にします。
  6. 同じ要領で9つ配置して、Unitychanのスポーン位置に合わせて調整します。今回はX方向が左から-2.5、0、2.5 Y方向は下から-6.75、-4.5、-2.25 としました。

ゲーム再生して背景、Unitychan、ブロックの描写を確認します。だいぶステージ感が出てきましたね。

まとめ

まとめ

  • Z-Fightingは複数のプリミティブ図形(CGの基本となる図形)がカメラから同じような位置にあるときにちらつきが生じる現象。
  • 2DにおいてZ-Fightingを解決するにはZ位置をずらすか、ソートレイヤーを使おう。(ソートレイヤーの方がおすすめ)
  • 背景が被る場合も、Z位置をずらすか、ソートレイヤーを使うと解決できる。
  • 2Dのカメラとオブジェクトの位置関係はざっくり覚えておくといい。(何かの拍子でオブジェクトが映らなくなっててしまったときの原因かもしれない  体験済み)
ユニティちゃん公式ホームページへ
ユニティちゃん公式ホームページ
ユニティちゃんライセンス
ユニティちゃんの画像、素材、ライセンスロゴはユニティちゃんライセンス条項を元に使用しています

\ 初学に使った書籍です /

動画×解説でかんたん理解! Unityゲームプログラミング超入門

大角 茂之/大角 美緒

マケイヌ的おすすめ度

わかりやすい度

提供素材がよくてテンション上がる度

〇おすすめポイント

素材が良くてモチベがあがります。

×よくないポイント

動画解説前提なので図版が小さいのが玉に瑕

おすすめ記事

 

プロフィール

マケイヌ

人生のメインストリームから外れた40代の♂。

90年代オルタナにはまり、文字通りメインストリームから逸脱。 その後もたびたび人生から逃亡。

心が動いた作品の紹介や 自分のちいさな経験、HowToを発信できればと日々模索中。

1年後までにイラストと写真のポートフォリオをつくりたい。

記:2019年12月

▼プロフィールはこちら

Follow me

アーカイヴ