シーク操作対応のデータ処理から編集支援まで、スクリプトエンジンの実装ノウハウ――「IDOLY PRIDE」における”動画のようなADV”の実現方法

2022.11.08
注目記事ゲームづくりの知識ゲームの舞台裏講演レポートイベントレポート
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

Unityに関する大規模オンラインカンファレンスイベント『SYNC 2022』が2022年10月25、26日に開催されました。10月25日には株式会社QualiArtsのエンジニア 山城 悠太郎氏が登壇し、『「IDOLY PRIDE」における動画のようなADVの実現方法』と題するセッションを行いました。

3Dモデルによるアドベンチャーパートを実現させるスクリプトエンジンの実装について、UnityのPlayable APIを活用した開発だけでなく、シーク操作に対応したデータ処理やシナリオ編集効率も考慮した機能など、ノウハウが詰まった本セッションのレポートをお送りします。

TEXT / 田端 秀輝

EDIT /  酒井 理恵

目次

IDOLY PRIDE』はアイドルをテーマにしたメディアミックス作品で、スマートフォン向けゲームの開発および運用はQualiArtsが行っています。本作はアイドルマネジメントRPGであり、アイドルたちとのストーリーは3Dモデルキャラクターによるアドベンチャーパート(以下、ADV)によって展開されます。

動画のようなADV

本作のADVについて山城氏は、「動画のようなADV」と紹介をしています。

その特徴として以下の3点を挙げています。

     

    1. 画面をタップしなくても自動で進行する
    2. リアルタイムレンダリングであり、動画ではない
    3. シーク操作や一時停止といったコントロールが可能

    なかでも3. は「動画のような」という点で最も特徴的な点であり、指定された時間のあらゆる状態を再現できるようにシステムを対応させる必要がありました。

    セリフ単位のシーク機能。画面の右端をタップすることで次のセリフに進むだけではなく、左端をタップすることで前の台詞にも戻る

    セリフのプレビュー機能。ADV中、シークバーを操作することで任意のシーンにシークさせることができる。動画サイトでシーク操作中にサムネイル画像が表示されるように、スライダーが指している時間のセリフの内容がプレビューとして表示される

    3Dモデルのキャラクターが豊かに動くADVであると同時に、動画のようにプレイヤーが自由に好きなシーンを見ることができるのが本作のADVパートの特徴です。

    自由に操作できるADVを破綻なく再生させ、かつスムーズに制作できるスクリプトエンジンには、どのような工夫があるのでしょうか。

    動画のようなADVの仕組み

    QualiArtsでこれまで開発してきたゲームにおけるADVでは、スクリプトに記述されたコマンドを上から順に実行していく仕組みになっていました。コマンドが各種演出の実装を持ち、それらが実行されることでADVが進行していきます。

    スクリプトの入力は、UnityのEditorWindowを拡張して作られた専用のGUIで行っていました。この仕組みは「Uguiss」というQualiArts内製のスクリプトエンジンをベースに実装されています。

    QualiArts社内用として開発されたスクリプトエンジン&入力支援システム「Uguiss」。汎用性を重視してUIやセリフ表示など具体的な実装は持たない。グループ会社でも利用されている

    「Uguiss」のエディタ機能。コマンド毎に編集機能をカスタマイズする機能があり、用途に合わせて作り込むことでスクリプト入力の効率を上げることができる

    『IDOLY PRIDE』における動画のようなADVの実現においては、スクリプターの学習コスト、あるいは開発側の実装・検証コストを考え、「従来の入力の仕組みを踏襲する」「ADVの挙動をPlayable APIで構築し、Timelineとして再生する」という方針が決まりました。

    今回の開発では下記のような実装を行っています。

    • Uguissをベースに実装
    • 各コマンドは基本的にPlayableの生成と値のバインドのみを行い、演出の実装は持たない
    • 再生開始時にすべてのコマンドを実行し、PlayableGraphの構築を行う
    • 再生中のADVの進行はPlayableGraphで制御

    内部の仕組みは従来とは大きく変わっていますが、「スクリプターがシナリオを編集するScriptEditorのインターフェースは従来と同じ形になるよう開発された」と山城氏は説明しました。

    画像右にあるのがシナリオ編集を行うScriptEditor

    PlayableGraphの構築について、対象のコマンドが実行されると、そのコマンドがリストに登録されるという処理が走り、各コマンドが発行するMixerIdをキーとしてリストからDictionaryを生成します。そして、MixerId毎に各Playableの生成、接続を行うという仕組みになっています。

    Playableの実行順については、コマンドに設定されたOrderプロパティでDictionaryをソートしている。コマンドの実行順を視覚的に把握できるようにするツールも実装している

    画像左にあるようなScriptEditorの入力から、画像右のようなPlayableGraphが生成される

    スクリプト入力の仕組み

    ScriptEditorは上から順にセリフが並んでいるため流れが把握しやすく、グループ化機能によってセリフに紐づく演出の一覧性も保たれています。一方で、時間を数値でしか確認・編集できないため、このEditorだけで全ての時間の設定をするのは難しいという課題もあります。

    この課題を解決するために、時間の設定に特化したTimelineEditorが実装されました。このTimelineEditorはScriptEditorと連動しており、トラックはScriptEditorでのコマンドの設定から動的に生成されます。

    TimelineEditorの様子。TimelineEditor上では時間調整を目的としたツールであり、コマンドの追加や削除はできない仕様になっている

    TimelineEditorの画面は縦にも横にも長くなってしまうため、ScriptEditor(画面右)とTimelineEditor(画面下)のどちらかでコマンドを選択すると、もう片方のエディタの対応するコマンドに自動でフォーカスするスクロール追従機能を実装し、編集効率を向上させた

    シーク対応

    本作のADVではシーク操作が可能となっています。シーク操作にまつわる処理はエディタ側で自動的に対応するよう実装されており、スクリプター側はシークを気にせず編集作業を行うことができます。

    シーク対応の例として、キャラクターのモデルの配置などクリップの範囲外でも影響が残る演出は、シークで指定した時間にアクティブ、または最後に影響するクリップを検索して反映させます。

    カメラの設定とカメラアニメーションなど、別々のコマンドで同じ対象を操作する演出は、それぞれのPlayableを共通のMixerに接続させ、Playableの型によって処理を分岐させることで対応しています。

    シークについて、演出によって対応すべき内容は異なるが、何に注目すべきかノウハウが全く無かったため、トライ&エラーを経ての実装だったとのこと

    目パチ(キャラクターの瞬き)について、従来のADVではランダムに目パチを行っていましたが、『IDOLY PRIDE』ではシークに対応するため、時間に応じてweightを指定することで制御できるようになっています。一方で、全ての目パチを手動で付けるのは工数的に現実的ではないため、スクリプト書き出し時に全コマンドをコマンドを解析し、手動目パチがない場所に自動的に目パチが配置されるようになっています。

    視線制御に関して、動かす対象(目、頭、体や眼球)を向かせる対象として方向やCamera、他のキャラクターのモデルのボーンがありますが、Cameraやモデルのボーンに関しては「単純にその方向に向かせてしまうと、シークさせた後は通常再生時とは異なる方向を向く」という問題が発生してしまいます。そのため、姿勢制御を実行するタイミングのカメラやモデルの位置を取得するようになっています。

    非同期処理の対応

    時間で制御するTimeline再生中に非同期処理を行うのは本来であれば避けたいところですが、「背景の切り替え」「モデルのロード」「動画の再生」といった処理については非同期で行っています。

    モデルのロードについて、メモリの都合で基本的には登場するキャラクター数を抑えているが、シナリオによって大人数のキャラクターが登場する場面もあるため、その場合は再生中にモデルの削除と生成を行っている

    対処方法として、非同期処理中はTimelineを一時停止させ、完了後にTimelineの再開とシークを行っています。

    非同期処理が複数走るケースに備えて、全ての処理が完了するかの監視もしている

    ユーザーが分かるところでは、非同期処理中はUIをブロックして操作できないようにしています。また、画面が固まっている様子やモデルの入れ替わりの場面を見せないように、非同期処理は必ず暗転中に行うような演出ルールにしています。シーク中に非同期処理が走るときは強制的に画面を暗転させる仕組みもあります。

    一方で、非同期処理中にTimelineを一時停止させるため、BGMも止まってしまうという問題も発生してしまいました。視覚情報ではないので暗転させて隠すという対応は取れません。そこで、BGMの再生はPlayableGraphから独立させることで対応しました。

    BGMの切り替えや停止、フェードの管理はPlayableで行う。また、シークや一時停止があった時は同期させる

    作業効率や品質向上のための工夫

    本セッションでは、スクリプターがシナリオの編集に注力できるよう、エディタの入力支援に関する解説もありました。

    スクリプトの編集において、入力と確認のイテレーション(繰り返し)を高速化させることが作業効率や品質の向上に大きくつながります。本作のエディタは編集した内容がその場で確認できる、リアルタイム編集に対応しています。

    編集時にPlayableGraphを再構築することでリアルタイム編集自体は比較的簡単に実現できたそうなのですが、コマンドの数が500を超えることもあるなか、単純に再構築をする仕組みだとスクリプトが肥大化し、重くなってしまうこともあったそうです。そこで、編集内容によってPlayableGraphの更新内容を変える、「差分更新」の仕組みが実装されました。

    コマンドが編集されただけの場合は関係するPlayableの破棄と生成、接続だけだが、Mixerの数が変化した場合はPlayableGraphの再構築を行う

    『IDOLY PRIDE』ではシナリオの管理をスプレッドシートで行っており、シナリオデータをScriptEditorにインポートを行う機能も実装されています。

    データはスプレッドシートで管理。ボイスのアセットを指定することでボイスの再生時間を設定、セリフの配置を自動的に行う仕組みもあるので、スクリプターは演出を作り込むことに集中できる

    その他の編集支援ツールも実装されている

    山城氏は全体の総括として「より高品質なものがユーザーに届けられるように、これからも改善を続けていきたいと思っています」と述べ、本セッションを締めました。

    本セッションの動画や講演資料は、下記ページをご覧ください。

    「IDOLY PRIDE」における動画のようなADVの実現方法 | Unity Learning Materials「IDOLY PRIDE」公式サイト
    田端 秀輝

    「ゲームと社会をごちゃまぜにして楽しんじゃえ」がモットーの、フリーのコンテンツ開発者。節電ゲーム「#denkimeter」やVRコンテンツ、体験型エンタメの開発をしています。モニター画面の中だけで完結しないゲーム体験が好きで、ここ十数年注目しているのはアイドルマスターです。

    関連記事

    大阪・日本橋の街並みがピクセルアートで描かれる。メイド喫茶ADV『電気街の喫茶店』プレイレポ&開発者インタビュー【BitSummit Drift】
    2024.07.25
    アクティブゲーミングメディアの新たなグローバルPRブランド「Graph」はパブリッシャーと何が違うのか?直接、話を聞いてみた【BitSummit Drift】
    2024.07.25
    SWERY氏・須田剛一氏が初コラボ。スラッシャーアクション『ホテル・バルセロナ』のプレイレポート、インタビューをお届け【BitSummit Drift】
    2024.07.24
    チュートリアルでプレイヤーが迷わない理由は「ユーザー文化の理解」と「ステレオタイプの利用」にあった。直感で理解できるゲームをどう作るか【cluster革命前夜 Unity賞受賞者インタビュー】
    2024.07.23
    口調もヒント。あえて日本語吹替をやめた『Gloomy Juncture』はヒッチコックなどの映画に影響を受けた高難易度パズルアドベンチャー(ビジュアルデザイン最優秀賞)【BitSummit Drift】
    2024.07.22
    韓国の爽快トップビューアクション『Kusan : City of Wolves』。ホットライン・マイアミのバトルに憧れ、6年を掛けて開発【BitSummit Drift】
    2024.07.22

    注目記事ランキング

    2024.07.20 - 2024.07.27
    VIEW MORE

    連載・特集ピックアップ

    イベントカレンダー

    VIEW MORE

    今日の用語

    フォグ(Fog)
    フォグ 「霧」を意味する英単語。3DCGにおいて、現実の霧による見た目をシミュレーションする画面効果やエフェクトを指す。代表的なものとして、カメラから遠くにあるオブジェクトの色調を変化させることで遠近感を出す手法がある。
    VIEW MORE

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