『ヘブンバーンズレッド』における、演出の最大化手法　Unity Timelineを活用したバトルスキルシステム作成事例

『ヘブンバーンズレッド』で多く活用されているUnity Timeline

伊藤栄治氏：続きまして、伊藤から「Unity Timelineで作る！　『ヘブンバーンズレッド』バトルスキルシステム作成事例」について紹介します。よろしくお願いします。

本パートの目次です。初めに、Unity Timelineとは何かをざっくりと紹介し、そこから『ヘブンバーンズレッド』でTimelineを利用している箇所に触れ、その中でもスキルの要素を分解した上で、いかにしてバトルに組み込んでいくかをお話しします。

それでは、Unity Timelineについてざっくりとお話しします。Timelineは、カットシーンなどの映画的なコンテンツを作りやすい機能です。複数のオブジェクトが同時に管理しやすい作りになっており、画面全体を使った演出作りに適しています。

Timelineの話をするにあたって、『ヘブンバーンズレッド』でTimelineが使われている場面についてお話しします。まずはスキル演出。後ほど深く掘り下げますが、キャラクターが飛びかかって敵に攻撃する一連の動きを、Timelineで制御しています。また、敵の攻撃も味方と同様にTimelineで作られています。ダイナミックな動きを取る敵もいるため、幅広い演出作りが求められます。

物語を彩るのに欠かせないカットシーンもまた、Timelineで作られています。さらには敵や味方の登場演出も同様にTimelineでできています。このように、『ヘブンバーンズレッド』では至るところでTimelineが活用されています。

スキル演出のデモ紹介

数あるTimelineの中でも、さまざまな機能要件を含むスキルについて、実例を踏まえて要素を分解していきたいと思います。『ヘブンバーンズレッド』のスキル攻撃の一例を、10秒ほどの動画でご覧ください。

この動画の中で行われている要素を分解します。まず、キャラクターが飛びかかるモーションを取ります。その際ワープのエフェクトを再生し、同じタイミングで攻撃時のボイスを再生しています。その後カメラをぐるっと回して敵を画角に入れます。あとの演出を際立たせるために、このあたりからゆっくりと背景を暗くしています。

先ほどまでキャラクターの背中を映していたものとはまた別のカメラに切り替えて、キャラの正面からかっこいいカットを映します。

このあとの処理は一部省略して、いざ攻撃を行います。斬りかかる効果音を再生しつつ、斬撃のエフェクトを映し、システム面で必要な要素、ダメージの表示とゲージの減少を行います。その後、2撃目が命中するタイミングに合わせてBREAK！　『ヘブンバーンズレッド』では敵の1つ目のゲージを削り切ると敵がBREAK状態となるため、そのラベル表示を行います。

このスキルは全体攻撃2ヒットのスキルなので、2ヒット目のタイミングに与えたダメージの平均値を表示させます。さらにBREAK時や撃破時には、専用のヒットストップをかけています。そうでない場合にも、攻撃に少しだけヒットストップをかけていることがあります。

ここまで、スキル演出中に行っている処理を紹介しましたが、その中のうちTimelineで制御すべき要素はどれでしょうか。まずはキャラクターとカメラの動き。これらは演出内容に直結する部分なので、なるべくコードで制御せずアセットに逃したい部分です。

エフェクトや効果音も、演出内に組み込みたいため、再生タイミングをTimelineに埋め込む必要があります。そして重要なのがヒットタイミング。システム側で必要なものと演出を組み合わせるために重要な役割を担っています。攻撃が命中したタイミングで敵のゲージを減らしたり、ダメージを表示したり、といった部分に使います。

スキルTimelineの実例紹介

これらの要素を実際に組み込んだ実例のTimelineを見ていきましょう。（スライドを示して）こちらが先ほど動画でお見せしたスキルのTimelineです。

もう少し拡大して、各要素について触れてみましょう。キャラクター関連がこのあたり。『ヘブンバーンズレッド』では同じスキルモーションを複数のキャラクターが行うケースがあるため、TimelineへのBindを動的に行える仕組みで、同じTimelineを複数キャラクターで使い回せるようにしています。

続いてカメラ関連がこのあたり。オブジェクトのアクティブ・非アクティブを切り替えることができるアクティブトラックを使って、3つのカメラを切り替えています。先ほどの例にあった正面を映すカットは、真ん中のこの部分です。最初に敵に向かって行くカット、正面を映す見せ場のカット、その後再び敵を映して攻撃するカットの3つを切り替えて表示しています。

次にエフェクト関連がこのあたり。こちらも再生タイミングをTimelineで制御しています。ここまでのキャラ、カメラ、エフェクトをつなげてみると、時系列での演出の概要が見えてきます。

冒頭は、1つ目のカメラで飛びかかるモーションとワープエフェクトを映し、2つ目のカメラで着地するキャラクターをしっかりと映し、3つ目のカメラで攻撃モーション、斬撃エフェクトを映していることがわかります。

そして、上下にある黄色いピンと赤い剣のマーク。これらがサウンド周りとヒット周りを制御しています。このTimeline Markerについて、このあと紹介します。

Timeline上で関数を呼び出しをするMarker

「Timeline Markerでつながるシステムと演出」ということで、まずはMarkerについて。Markerとは、Timeline上に配置してその時点で関数呼び出しをするものです。アニメーターで言うところのアニメーションイベントに近いかたちで配置することができます。Markerは自作ができ、呼び出し時の挙動はもちろん、引数も自由に作ることができます。

例えば、この2つ目のピンはボイスを再生するための自作のボイスマーカーで、ボイス差し替え用のキーなどが設定されています。

一方、この3つ目のピンはサウンドマーカーです。主に効果音で使われる汎用的なサウンド用マーカーとなっています。ボイスマーカーとは一部設定項目が異なっており、用途に応じて使い分けることができます。

Markerを活用してシステム面の処理を演出に組み込む

攻撃のヒットタイミングを制御するヒットマーカーを使って、Markerでシステム面の処理を演出に組み込む方法を追っていきましょう。ヒットマーカーは、ヒットストップの有無や掛け方を設定することができます。

（スライドを示して）一部割愛していますが、こちらがヒットマーカーのコードです。マーカー側に必要なのは、先ほど定義した引数で入力する部分です。ヒットストップ周りの設定は頻繁に変えるものでもないため、デフォルト値があらかじめ入るようにしています。追加でMarkerのインデックス、Markerの数、最終ヒットかどうかの情報も持たせています。

こちらは再生時に情報が入るように、トラック側から渡すようにしています。トラック内に含まれるヒットマーカーを集めてきて、各マーカーに自分が何個目のマーカーなのか、全部でマーカーはいくつあるのかを覚えさせます。

ここまでが事前準備で、こちらが受け取り側のコードです。マーカーからの通知は、OnNotify関数に届きます。さまざまなMarkerから通知が届くため、switch文で分岐させます。今回は省略していますが、スキルの追加効果用のヒットマーカーなどもあり、本来はここで処理を分けています。このように情報が受け取れてしまえば、あとは必要な処理を入れていくだけです。この先の処理でMarkerの持つ情報を利用して、ダメージラベルの表示、ヒットストップ情報の更新、最終ヒット時の合計ダメージの表示などの処理を行います。

ここまでの話を踏まえて、もう1度最初の動画を見てみましょう。

演出の裏側でどんなことが起こっているのか、なんとなく見えてきたのではないでしょうか。

バトルにおけるLuaスクリプトの活用事例

Timelineで作るスキルの作成事例についてのお話は終了となりますが、おまけとしてバトルにおけるLuaの活用事例と、Luaを使ってバトル中にカットシーンを差し込んでいる例についてお話しします。まずはこちらをご覧ください。こちらはストーリー上でのバトルの1つです。

敵をBREAKすると、このようにバトルの最中に会話パートが挟まります。その後、シームレスにカットシーンにつなげて、第2形態とのバトルが始まります。

今回の例で必要な要件は、まず敵がBREAKしたらバトルの進行を一時停止させること。そして裏でバトルの状態を維持したまま、会話パートを再生させることです。

会話パートの途中でカットシーンを挟み、戦闘中のBGMをフェードアウトさせています。演出を映えさせるためと、このあとに別のBGMを再生させるためです。そして敵の形態変化に合わせて、別の戦闘BGMを再生します。この再生タイミングの制御にも、Markerが使われています。

これらの実現には、Luaスクリプトを使っています。Luaスクリプトを並列で実行してバトルの状態を監視し、バトルからイベント通知が来たらバトルを一時停止して演出を行います。演出が終わったら、バトルの一時停止を解除してバトルを本流に戻します。

（スライドを示して）Luaとバトルの関係性を図示すると、Luaはバトルが処理している間、敵がBREAKするまで待機しています。敵がBREAKしたらバトルから通知が届き、今度はLuaからバトルを一時停止するよう命令します。そうしたらバトルはLuaのイベントが終了するまで待機します。

バトルを止めたらここからはLuaのターンです。ADVを再生し、BGMをフェードアウトさせ、カットシーンを再生します。次のBGMを再生するべく、TimelineからMarker通知が届くまで待機します。TimelineからMarker通知が届いたらBGMを再生、カットシーンがすべて再生しきるまで待機し、第2形態バトル開始およびLuaイベントの終了をバトルに通知して、いよいよバトル処理が再開されるという流れになります。

ここまでの処理を踏まえて、あらためて見返してみましょう。

ここでBREAK！　敵のBREAK済みフラグが立ち、味方ターン開始処理後、このタイミングで待機していたLua処理が開始されます。ここでカットシーンを開始し、BGMをフェードアウトさせます。ここで次の戦闘BGMをフェードインしています。

第2形態とのバトルを開始します。戦闘前の会話パートもバトル側からバトル開始通知を受け取った上で再生しています。これまでなんとなく受け止めていた演出も、処理の裏側を意識して見てみると、また違った見え方をしておもしろいのでお勧めです。

Timelineを活用して演出を最大化している

まとめに入ります。『ヘブンバーンズレッド』では、Timelineがスキル、カットシーン、登場演出などがさまざまなシチュエーションで活躍していることを紹介しました。そして、Timelineでモーション、カメラ、エフェクト、サウンド、ラベル表示など、演出のほぼすべてを制御している一例をご覧いただきました。

中でも、Markerを活用して演出側で指定したタイミングにダメージ処理やSE再生などを行う事例をコードを踏まえて紹介しました。また、Luaスクリプトを使った方法で、バトル中に会話パートやカットシーンを差し込んでいる例も紹介しました。

以上をもちまして、「『ヘブンバーンズレッド』×バトル×アドベンチャー〜WFSのゲーム制作・演出の最大化手法〜」の発表を終了とします。ご清聴いただき誠にありがとうございました。