『呪術廻戦 ファントムパレード』の「夢幻廻楼」背景演出について、サムザップが技術ブログで解説。無限に続く塔、天候の変化を表現する方法とは

2024.06.26
ニュースゲームづくりの知識Unity
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

この記事の3行まとめ

  • サムザップ、『ファンパレ「夢幻廻楼」技術の裏側 ~ 天候変化編~』と題した記事を公開
  • スマホゲーム『呪術廻戦 ファントムパレード』内の「夢幻廻楼」の背景演出の仕組みについて紹介している
  • 無限に登り続けられる塔と、天候変化などの実装手法をコード例とともに解説

サムザップは2024年6月24日(月)、『ファンパレ「夢幻廻楼」技術の裏側 ~ 天候変化編~』と題した記事を、自社エンジニアブログ「Sumzap Engineering Blog」にて公開しました。

(画像はブログ記事より引用)

同記事では、スマートフォン向けゲーム『呪術廻戦 ファントムパレード(以下、ファンパレ)』内のコンテンツ「夢幻廻楼」を主題に、Unityを用いた「無限に登れる塔×天候変化を実現する仕組み」「塔の背景だけを歪ませる表現」について解説しています。

無限に登れる塔×天候変化を実現する仕組み

「夢幻廻楼」は、塔の各階層で発生する戦闘をクリアし、上層を目指すコンテンツ。上層に行くほど敵が強くなり、定期的な階層追加も予定されています。

そのような要件を満たせるよう、強敵の気配を表現するために特定の階層を超えた際に天候を変える仕組みと、どこまでも登れる塔を表現する仕組みを実装したといいます。

「夢幻廻楼」ゲーム画面(画像はブログ記事より引用)

まず無限に登れる塔を表現するために、塔や空、エフェクトの一部をひとまとまりのブロックとして制作し、ブロックを積み上げれば塔になるようにしています。

各アセットは切れ目を曖昧にし、違和感なくつながるようデザインされています。

1ブロック分の塔(左)と、2ブロックを積み重ねた塔(右)(画像はブログ記事より引用)

また、パフォーマンス維持のため、ブロックは見える範囲だけ生成し、カメラの移動に合わせて適切にブロックを瞬間移動させています。

(画像はブログ記事より引用)

天候の変化は、ライトマップやカラーマップ、パーティクルなどを天候ごとに用意し、テクスチャの切り替えで表現。

特定の階層では、シームレスな天候の切り替えを行うためにブレンディングで対応しています。

記事では、ライトマップのブレンディングを「あまり一般的ではない」とし、実際に開発したカスタムシェーダーのコード例とともに紹介しています。

テクスチャの一部。天候は、夕焼け(左)と夜(右)(画像はブログ記事より引用)

塔の背景を歪ませる表現

「夢幻廻楼」上層では、強敵の気配を表現するため、塔の背景を歪ませる効果も追加しています。

この効果には、「NOVA Shader」のDistortion機能を一部導入して実装しています。ただし、この機能だけでは「Distortionの処理に塔の一部が巻き込まれてしまう」課題が発覚したとのこと。

塔そのものの歪みはないものの、右側のパイプのようなオブジェクトに歪みが適用されてしまっている(画像はブログ記事より引用)

この課題に対し、Distortionによるフレームバッファから塔が描かれている範囲のマスク画像を取得してぼかし、ぼかしたマスク画像をもとに塔周辺の画素の歪みの強度を下げる形で解決しています。

また、歪みの強度の調整に関しても、コード例とともに解説が行われています。

内容の詳細は、Sumzap Engineering Blogのブログ記事をご確認ください。

Sumzap Engineering Blog『ファンパレ「夢幻廻楼」技術の裏側 ~ 天候変化編~』『呪術廻戦 ファントムパレード』公式サイト

関連記事

Unityのバージョン管理システムやプロジェクト整理の知見、Unity 6のURPなどを解説した電子書籍が日本語版に。Unity公式サイトで無料公開中
2024.12.10
Unity 6の理解に役立つコンテンツを公式が続々発信。「Unite2024」の日本語吹き替え版動画や、「Unity Learn」のチュートリアルなど
2024.11.30
『あんさんぶるスターズ!!Music』MVをさまざまな端末で違和感なく表示する手法、Happy Elements カカリアスタジオが解説記事を公開
2024.11.27
2024ブラックフライデーセール情報まとめ。ゲーム開発に役立つ、Unity Asset StoreやAdobeなどの大幅値下げセール(随時更新)
2024.11.22
「Unite2024」講演の日本語訳動画、ユニティ・テクノロジーズ・ジャパンが順次公開中。Unityのロードマップを紹介した講演など全6本が公開予定
2024.11.20
Unity 6のグラフィックスに関する学習リソースまとめ、Unity Technologiesが公開
2024.11.19

注目記事ランキング

2024.12.05 - 2024.12.12
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

ブレンド(Blend)
ブレンド 2つ以上のものを混ぜ合わせることを意味する英単語。 ゲーム制作においても、2つ以上の要素を特定の割合によって合成することを示す。
VIEW MORE

Xで最新情報をチェック!