[第14回UE4ぷちコン]振り返り:カットシーン

概要

    • Post Processでカットインと謎空間表現

    • 実はバグってたけど活用

    • Time Of DayとWater Planeで手軽に夕焼けの海

導入シーン

要件

    • 夏休み中のグレイマン達が

    • 操られたロボに襲われたので

    • 巨像を操って戦う

というのをどうにかして説明する。

あと

実装

カットシーンに凝りすぎるとゲームを作る時間が無くなる。

どうにか手短に説明したい。

    • 夏休み → ベッドを並べて解決

    • 操られたロボ → UFOが謎のビームをロボの頭に浴びせる

    • 巨像で戦う → 変身シーン風に謎空間に飛んでControl RigのGizmoが全身に装着されていく様をシャキーンのピカーッて感じでやって巨像とのシンクロをカットインで表現してから最後にみんなでポーズ取って爆発

熱量の偏りがおかしいし全然手短になってない。

だが、やりたいのでやる事にした。

確かに偏りがあるが、変身や爆発をやる時間を確保する為に

いかに他のシーンを手間なく作るかという風に思考が働き、

変身用のカットインを状況説明でも使って

カメラワークで考える事を減らすなど

良い方の作用はあったのかもしれない。

これを制御できるようになりたい。

カットインPost Process

カットフェードも兼ねている。

https://lh3.googleusercontent.com/pw/ACtC-3eNBaova3Dcmr6o98QuBol9RDsrFGtccC0Zoo91n9WETMHJoBAx-6yrVbL6ilf3Raeqkudt-ZL6C5AdjhMSkcTgNOZcb83vGH0Y6_QVBLAwkYnBBjGIeiMB04qpgcJngekj5WYrjYK7pA_7cCkpdH2y=w2229-h562-no

Material Parameter Collectionによる変数制御と、

後述のScene Capture設定のコピーにより

Sequencer Previewを見つつカットイン調整ができる。

StepはCustomノードだが、中身はstep関数だけ。

Custom RotaterのRotation Centerへの入力と組み合わせて、

任意の傾きでカットインできるようにしている。

ただ、パラメータが直感的ではないので慣れが必要かも。

CaptureTextureノードには

1920x1080のRender Targetを指定している。

このRender Targetへの書き込みを行うScene Capture 2Dは、

カットインしてくる方のカメラの子にしている。

さらに、Repeater Event Trackで、

常にCamera ParameterをCapture Componentにコピーしている。

これでカメラだけ触っていれば済むようになり便利。

    • Copy Camera Settings to Scene Captureノードは

    • PluginからComposureを有効にすると使える

毎フレーム2画面分描画しているので重い。

まぁカットシーンだからええやろと思って諦めた。

本当は最小限な領域をCaptureするとか、

カットインされる側の更新を減らすとかの工夫が必要な気がする。

謎空間Post Process

キャラをCustom Depthに描いて、

背景はTextureにすればいいやと思って

以下のようなMaterialを作った。

しかし、これはSky Sphereなど対象のPixelが遠い時に意図しない結果を得る。

以下のシーンは、DefaultのMapにグレイマンをCustom Depth描画指定して、

上記のPost Processを適用したもの。

グレイマン以外は指定Textureになって欲しいが、

Sky Sphere部分だけ謎の緑(Textureの中央Pixelかな?)が出ている。

この不具合に気づかず変身Sequenceを作っている時に

偶然イカス絵が撮れた。

空が真っ赤になるのおかしくない?と思ったが

かっこいいのでバグは直さずイキとなった。

…が、バグったままなのは困るので一応対策を考えておく。

Virtual Planeを使わずに、単純にScreen Positionノードを使えばよい。

ちなみに、謎空間のモワモワしたTextureは

VR Editorから拝借している。

虹色グレイマン

Color Pickerをぐるぐる回す感じで色が取れれば良いかな、と思って

以下のような組み方をした。

HSV2RGBの中身は以下の通り。

const float H60 = Hue * 6.0f;

const float H60_Floor = floor(H60);

const float H60_Fraction = H60 - H60_Floor;


const float RGBValues[4] = {

Value,

Value * (1.0f - Saturation),

Value * (1.0f - (H60_Fraction * Saturation)),

Value * (1.0f - ((1.0f - H60_Fraction) * Saturation)),

};

const int RGBSwizzle[6][3] = {

{0, 3, 1},

{2, 0, 1},

{1, 0, 3},

{1, 2, 0},

{3, 1, 0},

{0, 1, 2},

};

const int SwizzleIndex = (int)H60_Floor % 6;


return float3(RGBValues[RGBSwizzle[SwizzleIndex][0]],

RGBValues[RGBSwizzle[SwizzleIndex][1]],

RGBValues[RGBSwizzle[SwizzleIndex][2]]);

特にグレイマンが虹色に輝く予定はなかったのだが

強引に装着シーンにぶっこんでみた所、

Gizmo装着状態への切り替えが明らかになるので結果としてイイ感じになった。

なん先生ありがとうございます!

終了シーン

要件

    • 水平線に沈む夕日

    • それを背景に握手

    • BGMはムーディーなトランペット

実装

夕焼けは、4.25の新機能である

Sky Atmosphereを使ってみる事にした。

これで夕方状態にして

Water Planeを置き、

Post ProcessでちょっとBloomを強化すれば

なんかそれっぽいアトモスフィアが出た。

数日かかるかなと思ったのに一瞬で解決したので逆に焦る。

ロボ側の手がデカすぎて握手できない。というかグー固定。

グータッチ(Fist Bump)に変更。

ゲーム部分のフィニッシュでUFOをダブルパンチで押しつぶす展開は

この都合から思いついた。

ほぼシルエットなので、左右どっちの手でトドメさしても

なんとなく繋がるので一石二鳥。

BGMについては

STAR DUST BGM様がこのジャンルに強く、

選ぶのに困るほどムーディーなトランペットBGMが揃えられていた。

作業BGMとしても超おすすめ。

反省

    • 導入はさすがにテンポが速すぎ

        • 一刻も早く変身と爆発を見せたい思いが前に出すぎ

        • 間を調整した方が良い気がする

    • 終了シーンはやはり海のパターンが見えるのが気になる

        • 欲しい海面反射とのトレードオフだったので仕方ない部分もあるが

        • Materialの仕組みを学んで改善したい

以上