FANTASIANの明日使えない特殊テクニック教えます

639 Views

June 16, 21

スライド概要

坂口博信の最新作「FANTASIAN」。ジオラマを使ってマップを作るという、ゲーム業界でもおそらく初の試みをどのようにして実現したか、またそのために使ったテクニックを中心に紹介します。ジオラマを使う予定のあるクリエイターは必見(そんな人いるのか?)です。

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

明日使えない FANTASIAN的テクニック教えます! 1

2.

自己紹介 中村 拓人 (なかむら たくと) 「Blue Dragon」でプログラマーとして初め て坂口さんのプロジェクトに参加。 その後「Last Story」でリードプログラマー を務め、「Terra Battle」ではマルチプレイ などのプログラムを担当した。 本作「FANTASIAN」ではディレクター兼 リードプログラマーという無謀な立場で参 加している。 2

3.

FANTASIANについて • 坂口博信さんが手掛ける最新RPG • ジオラマを使ったマップを歩き回る • 昔懐かしくも新鮮なゲーム性 • Apple Arcadeで配信中 3

4.

講演内容 • ジオラマを使ったマップ制作手法 • FANTASIAN特殊テクニック • 坂口さん的制作手法にどう対応するか 4

5.

ジオラマを使った マップ制作手法 5

6.
[beta]
マップ制作フロー

!
"
#
$
#

%
&
'
(
"
)
#
"

設
計
図

2
3
4
5
制
作

打
.
合
0
1

6

撮
影

:
;
<
化

組
?
込
?

7.

ジオラマ制作 基本方針: 自由に作って下さい! • ジオラマ制作会社といってもかなり幅広い。 • ストップアニメーション、ドールハウス、特撮、鉄道模型、建築模型などなど… • そのため制作手法もバラバラ。 • それ以前に自分たちがジオラマについて詳しくない。 • ならいっそ自由に作ってもらって、組み込み時に多少のテイスト合わ せを行う方針とした。 7

8.

ジオラマ制作例 魔導工場 タンクはガラス職人が吹いて作った。 辺境の街エンのバー 手作り感あふれる。実際に明かりがつく仕掛けも。 8

9.

ジオラマ制作例 スクラップ置き場 実際のジャンクパーツを大量に配置している。 ウズラ号 本当の船のように骨組みから組み立てている。 9

10.

ジオラマ制作例 南の森 模型用の汎用樹木パーツを大量に使用している。 水の都ベンスのバー 素材として紙が使われてる箇所も。 10

11.

撮影 • 自然光に近いライティングに。 • カメラはSonyのデジカメをメインで 使用。 • まずはモデル化に必要な写真を撮 影。あらゆる角度から200枚程度。 • 次にゲームで使用するカットを数十 枚撮影。 • これら写真をLightroomで一旦色調 補正する。 11

12.

3Dモデル化 • 写真から3Dモデルを生成す る技術はPhotogrammetry と呼ばれています。 • 今回はReality Captureを用 いて3Dモデルを生成しました。 • Reality Captureに撮影した 写真を投入し、3Dモデルとカ メラ情報を出力します。 12

13.

組み込み • Reality Captureから出力さ れたモデルデータからコリ ジョンを生成。 • カメラ切り替えBOXやイベ ントトリガーBOXを設置して いく。 • エフェクトなどを配置。 Unityの編集画面。背景モデルは編集専用でゲー ムには組み込まれない。 編集作業自体は殆ど通常の3Dゲームと変わらない。 13 • ライティング、ポストエフェ クトを調整。

14.

完成 14

15.

FANTASIAN 特殊テクニック 15

16.

写真でカメラ補間するテクニック (1/2) • FANTASIANでは背景は写真をそのまま使っており、写真と写真の中 間の写真などはないので、カメラ補間は基本できない。それを無理や りするテクニック。 上の2つの写真カメラを切り替えたい。 もともと瞬時にカメラを切り替えていたが、それだと自分の位置を見失いやすかった。 16

17.

写真でカメラ補間するテクニック (2/2) • Reality Captureから出力した3D モデルをリダクションしてローポリ ゴンにし、そこに写真を投影。プロ ジェクションマッピングの要領。 • そうすることで、多少カメラが動い ても破綻しないようになる。 • これにより、カメラを移動しつつ写 真をクロスフェードさせることで、 静的な写真画像を使ったカメラ 補間を実現している。 • さらに補間中に少しブラーをかけ、 破綻してるのをごまかしている。 17

18.

開かない扉を開けるテクニック (1/2) • ジオラマの扉開くように作ってないし、そもそも写真だから動かない。 これを無理やり開けるテクニック。 これを開ける。 ジオラマで作ったドア。当然開かない。 18

19.

開かない扉を開けるテクニック (2/2) 1. ステンシルで マップに穴をあけ る。 2. 内部を真っ黒 で作る。 3. Quadを置き、 写真のUVを計算 して貼って、頂点 シェーダーで曲 げる。 4. 扉の前に黒い ソフトパーティク ルを設置して、奥 ほど暗くなるよう にする。 19

20.

写真でカットシーンを作るテクニック (1/3) • 写真なので普通に作るとカメラを動かすことができない。そんな制限 の中でダイナミックなカットシーンを作るテクニック。 20

21.

写真でカットシーンを作るテクニック (2/3) 写真貼った板を後ろにおいてすべて目合わせでカットシーンを作る。 座ってるように見えて全然座ってない。 完全に目合わせ。 後ろにいる人はテクスチャに書き込んでる。 21

22.

写真でカットシーンを作るテクニック (3/3) レイヤーみたいにしていることも。立体感が出る。 写真の一部だけ使う。映らないところは部屋が 写っていようが気にしない。 22

23.

エフェクトのめり込み回避テクニック (1/1) • エフェクトがMapに埋まって見えないというよくある問題を回避して ダイナミックにエフェクトを表現するテクニック。 これは超簡単。 背景写真を置くだけで背景のZを 描かない。 なのでエフェクトは100%マップの 前面にくる。 この円形のエフェクトも本来地面 や壁に埋まってかっこ悪くなるが、 MapのZがないのでいい感じに出 る。 23

24.

空気感を演出するテクニック (1/2) • FANTASIANでは写真を使っているため、深度情報が完璧ではない。 そのため深度を使ったポストエフェクト(フォグ、DOFなど)が苦手。そ んな状態で空気感を演出するポストエフェクトテクニック。 Reality Captureから出力されたモ デルはあくまで近似であり完璧で はない。また、深度で使うのはさらに それをローポリゴンにしたもの。 なので下手にFogを使うと左のよう に・・・ 24

25.

空気感を演出するテクニック (2/2) • 拡張ビネットと呼んでいる。通常のビネットの処理を拡張し、2D的に 画面上部に色を加算したり、ボカすとかできるようにしたもの。 エフェクト無し 画面上部だけ白く加算、下部を茶 色乗算にすると、フォグのような空 気感がでる。 25 ぼかしを加えるとチルトシフトレンズ で撮影したような効果に。

26.

砂のようにキャラを消すテクニック (1/3) • キャラが砂になって消えていくような表現ができるテクニック。バトル でキャラが消える時などで使用している。 上の方から砂っぽく消えていく。 26

27.

砂のようにキャラを消すテクニック (2/3) • ディザ消しの応用で、上の方 から徐々にディザを強くしてい きつつ、頂点を動かすことで砂 になって消えていくような雰囲 気にしている。 ディザテクスチャ これをメッシュの上部からUV スクロールしていく。 • 単なるディザ消しの応用なの で軽量でモバイルもいける。 • ついでにエフェクトを炊いてあ げると完璧。 それと同時に頂点を上の方から後ろに曲げる。 27

28.

砂のようにキャラを消すテクニック (3/3) • ちなみにこれ、Unityアセットストアで売ってます! https://assetstore.unity.com/packages/vfx/shaders/sand-fade-shader-111448 安いですよ! ぜひ買ってください! 28

29.

坂口さん的 制作手法に どう対応するか 29

30.

坂口さんの制作スタイル とにかくプレイして要望を出し調整していくスタイル。 つまり、一度実装してからプレイしてもらう必要がある。 • メリット: ユーザー体験に近いところから細かく要望がもらえて、ゲームのクオリティがか なり上がる。 • デメリット: 面白さが足りないと、大きく設計から見直して修正する必要が出てくることもある。 このデメリットをどう対処するか、自分なりの手法をご紹介します。 30

31.

精神論 すべて調整と思い込む。 無茶振りとか仕様変更すぎるとか思っても思わないようにする。 • プレイヤーキャラのスキルを変更しよう。 →調整です。 • ボスの攻撃追加してAIも変えよう。 →調整です。 • この部分のストーリー変えてイベントの内容も変えよう。 • スタッフロール中にムービー流そう。ムービー追加で。 • 戦闘をリアルタイムからターン制にしよう。 31 →調整です。 →ちょ、調整です。 →ちょ…いや、仕様変更です。

32.

方法論 • スピード重視で作る。 • 経験上、丁寧に時間をかけて作ったものとそこまで違いはない。 • スピード重視で実装をこなしていく方が、プロジェクトで何を注視すべきか見 えてきて、結果クオリティが上がりやすい。 • 柔軟に作りすぎない。 • こういう場合にも対応できるように…って考えて作っても、こういう場合は経 験上ほとんど発生しない。 • 色々柔軟に対応できるように作っても、たいていその上を行く無茶振りと仕様 変更になりがち。 • クソ真面目に作らない。 • 似たような体感が得られるより簡単な方法を模索する。 32

33.

まとめ 33

34.

あなたが今日得られた知見 • ジオラマでゲームを制作する上でのノウハウ。 • ただし、今後の開発でこのノウハウを活かす場面は来ないかもしれません。 • ジオラマを使ったゲームを作る上での特殊テクニック。 • これも今後の開発で利用する可能性は低いかもしれません。 • プロデューサーの無茶振りへの心構え。 • これは役に立つことがあるかもしれませんが、これが役に立つと感じた場合、 そのプロジェクトは炎上案件の可能性があります。ご注意ください。 34

35.

以上。 ご清聴ありがとうございました。 35