パシフィコ横浜にて8月22日~24日にわたって開催の「CEDEC 2018」。ここでは、8月24日に行われたセッション「モバイルブラウザ上で実現させた『アイドルマスター シャイニーカラーズ』の作り方」の内容をお届けする。

冒頭ではバンダイナムコエンターテインメント兼BXD「アイドルマスター シャイニーカラーズ」(以下、シャニマス)制作プロデューサーの高山祐介氏が本セッションの趣旨を説明。その後、enza-game.jsの開発および保守・運用プロジェクトのディレクター・プロデューサーを務めるSmith氏から、「シャニマス」の提供、そして現在に至るまでの取り組みから得られた知見を紹介していった。

高山祐介氏 Smith氏

すでにプレイしている人にはご存知のとおりだと思うが、「シャニマス」はBXDが提供するスマートフォン向けブラウザゲームプラットフォーム「enza」で提供されている。

現在、スマートフォンブラウザではWebGLが普及していることから、ネイティブアプリと同等のクオリティで、高い表現品質の実現およびパフォーマンスの維持が十分に可能な時代に突入しているが、その一方で実際にブラウザ上のゲームサービスとしてそれらが実現できるのは未知の領域だった。それに挑戦したのが「シャニマス」というわけだ。

挑戦するにあたって、enzaとそれを取り巻く環境を学び、適切な道具・手法を選択していくことが重要だと話したSmith氏。ここからは実際の流れに沿って、技術・ツール・手法をいかに選択していったかが紹介された。

まずは基本となるゲームエンジンについて。enzaのプロジェクト構想当時、すでにHTML5に対応していて2D表現ができるゲームエンジンは存在したそうだが、スマートフォンブラウザに特化したゲームエンジンはまだ用意されておらず、パフォーマンス面での懸念があったという。

そこで、スマートフォンブラウザ特化の2Dゲーム用ゲームライブラリの開発プロジェクトがローンチされ、そして生まれたのがブラウザWebGLで動作するJavaScript 2Dゲーム制作用エンジン「enza-game.js」だ。画面表示までの簡便さと高速な動作を実現した同エンジンは、そのまま「シャニマス」でも採用されている。

サウンドミドルウェアとエフェクトツールに関してはHTML5版が用意されているサービスの試験導入と検証を行ったものの、開発における以下の懸念から導入を見送り。サウンドについてはenza-game.jsで提供されている、ブラウザ標準のWebAudioで実装されたサウンドシステムを、エフェクトについてはenza-game.jsで描画のバックエンドに使用しているpixi.jsの専用モジュールで親和性が高く、パフォーマンス面での懸念が低いpixi-particlesを利用することに。

また、アニメーションについては、pixi.js向けプラグインが公開されていることから親和性が高く、導入およびチームでの対応に関するコストからSpineを採用。リンクアピール時など多くのキャラクターを動かす際には重くなるという課題はあるが、画面上のキャラクター数など一定の運用ルールを設定することで対応しつつ、表現品質を優先しているそうだ。

これらのミドルウェア選定を通じてSmith氏が感じたのは、全体的にWebGL/HTML5は実験領域であるということ。特に描画に関するミドルウェアへの対応コストの高さ、判読の難しいコードで構成されたasm.jsで提供されているモジュールの導入への課題などが浮き彫りになったようだ。

続いては画面遷移について。enza-game.jsでは単一のステージではなく複数のシーンを扱う前提の設計にしており、「シャニマス」ではUX(ユーザーエクスペリエンス)を尊重して、新たにページを読み込むことなく、異なる画面を表示する「SPA(Single-Page Application)」を採用。ルーティングで任意のシーンに遷移するようにした。

その結果、思わぬ副産物としてURLから直接任意のシーンに遷移することができるようになり、デバッガビリティが向上。その一方で、自由に遷移させたくない画面などでは同一のルーティーンで状態を持つなど、導線設計・制御が困難になるというデメリットも。

そのほか、上記の課題はあるものの、ゲームとしての体感を考慮した上でSPAを選択したそう。

そしてネイティブアプリと違い、ブラウザはファイルシステムを直接扱えないため、通信量を抑える意図でのリソース永続化は重要な課題のひとつ。「シャニマス」では、HTTPヘッダの適切な設定によるブラウザキャッシュの制御、という手法を用いることでその課題に向き合っている。

これまで触れてきたことは全て準備段階でのことになるが、実際の開発上ではさまざまな問題が発生したという。ここからは、その一部を実際に起きたことを交えながら説明していった。

まずはAppleが導入したITP(※)でenzaが動いたことについて。ここでは、enza独自の仕様である、ユーザー登録をしなくてもゲストユーザーとしてゲームが遊べることが問題になってくるという。

※ITP(Intelligent Tracking PreventionIntelligent Tracking Prevention):ユーザーが意図しないサードパーティドメインから発行されるCookieは保持せず破棄するという、ユーザーを守るためのWebkitの仕様

enzaでは、ゲストユーザーのゲームプレイ進行状況は、発行されたCookieが残存している限り保持される仕組みとなっている。ただ、ITPの環境下では、ゲームサーバーがenza.funには関係のないドメインである場合、enza.funが発行したCookieはすぐに削除されるため、次回プレイ時にプレイ状況は復元されないのだ。

一方、ゲーム側のサーバーがenza.funのサブドメインである場合にはCookieそのまま保持されるため、続けてのプレイが可能となる。つまり、ITPの環境下で適切に動作するためには、ゲームサーバーのドメインを全てサブドメインにする必要がある。現時点でもITPのバージョンは上がり続けており変化しているということで、注意を促していた。

また、ブラウザ上では動画やサウンドの再生にユーザーのタップが必要となる。そのタップを契機に一度再生させれば、その後のメディア制御が可能になるということで、いかにタップさせるかが大きなポイントになってくる。

サウンドの場合は初めて画面をタップした時点で空のサウンド再生処理を実行することで以降の処理は必要ないのだが、動画に関しては各動画ファイルごとにタップ処理を行う必要が出てくる。

実際、「シャニマス」では思い出アピールやガシャでのSSR演出など要所で動画を用いているが、その都度タップをするようになっている。また、ガシャの連続排出時は当初タップを必要としない仕様だったが、上記の制約によって、タップを必要とする仕様に変更されたのだとか。なお、メディア再生にタップを要するかどうかは、ブラウザやそのバージョンによって異なるそうだ。

そのほか、SafariのUIにおけるゲームの遊びづらさを解消するため、ボタン類が小さくなりすぎないようにしたり、画面上部には使用頻度の高いボタンを置かないようにするなどの配慮をしていることや、ブラウザ上で発生する不具合への対応など、まさに開発中ならではの問題が語られた。

そして最後に触れたのが、SafariのWebAppモードについて。先述したiOS SafariのUI問題を解消する上ではWebAppモードの利用は効果的であり、UX的にも推奨したいものではあったが、結果的に公式としてのサポートはしないという判断になったそう。

その要因となったのは、またしてもCookieに関する問題。WebAppモードで起動後、enzaへのログインをする際、外部アプリでログインすると通常モードへ切り替わってしまう。WebAppモードとSafariとではCookieが共有されないため、WebAppモードに戻るとログイン情報がリセットされてしまうという問題が起こるのだとか。

こうした苦労を経てリリースされた「シャニマス」だが、引き続きネイティブと同等のクオリティへの挑戦は続けているそうで、その一環として挙げたのが、通信環境に左右されずに利用でき、ユーザー操作に対してスムーズに反応し、ネイティブアプリと同等のUXを提供する、PWAへの挑戦だ。

具体的な取り組みとしては、Lighthouseを用いた定性評価、通信量の削除、セキュリティ品質の向上の3点を挙げた。専門的な話が多くなるので、ここでは説明そのものは割愛するが、これらの改善を経て、よりネイティブに近いUXをユーザーに提供できるようにしていきたいという展望を語っていた。

コメントを投稿する

画像一覧

全ての画像を表示(67枚)

(C)BANDAI NAMCO Entertainment Inc.

※画面は開発中のものです。

関連ニュース

関連ニュースをもっと見る

あわせて読みたい

この記事のゲーム情報

  • セガ特集ページ
  • プリコネR特集
  • 「黎の軌跡(くろのきせき)」特設サイト
  • セール情報

人気記事ランキング

RANKING

定期配信

REGULAR
  • ゲーム発売日・配信日カレンダー
1月11日(火)
ジャックと探偵
マジカルデスペア
ランダム・ポーカー・ディフェンス:デュエル
1月13日(木)
雄才三国
ASTRONEER -アストロニーア-
G-MODEアーカイブス40 カムラ -神々と契りし者-
Hell Let Loose
SNK VS. CAPCOM 激突カードファイターズ
アンデッドパーティ
アーケードアーカイブス ガンネイル
ダイイングライト プラチナエディション
ツクールシリーズ GAME BATTLE TYCOON
デュエルプリンセス
ヘッドランド
モンスターハンターライズ
モンスターハンターライズ デラックスエディション
ヴァジアルサーガ愚民化戦略 XX
作戦名ラグナロク アケアカNEOGEO
風乗り勇者の物語
1月14日(金)
Blast Beat
Idle Siege
Kansei ~豪邸殺人事件~
Rescue Party: Live!
1月15日(土)
ゴッド・オブ・ウォー
異世界サキュバス搾精記
1月18日(火)
Blade Evolution
センチメンタルフォトグラフィ
1月19日(水)
D_CIDE TRAUMEREI
1月20日(木)
GRAND CROSS: ReNOVATION
Lovelydoll/Wildmachine
Mindcell
RPGolf Legends
おじさまと猫 スーパーミラクルパズル
メンヘラフレシア フラワリングアビス
ラッキードッグ1
レインボーシックス エクストラクション
レインボーシックス エクストラクション デラックスエディション
1月21日(金)
NinNinDays2
カンパニーマン 社畜の下剋上
1月25日(火)
インフィニティ キングダム-諸王の戦争
束縛彼氏
1月26日(水)
KINGDOM of the DEAD
1月27日(木)
COGEN: 大鳥こはくと刻の剣
COGEN: 大鳥こはくと刻の剣 限定版
Strawberry Nauts -ストロベリーノーツ-
Strawberry Nauts -ストロベリーノーツ- 完全生産限定版
WRC9 FIA ワールドラリーチャンピオンシップ
ウォーハンマー 40,000:メカニカス
ガラス姫と鏡の従者
ガラス姫と鏡の従者 完全生産限定版
グランド・セフト・オート:トリロジー:決定版
スターメロディー ユメミドリーマー
スターメロディー ユメミドリーマー 限定版
ブレイブリーデフォルト ブリリアントライツ
マガツバライ
マガツバライ 限定版
僕の彼女は人魚姫!?My Girlfriend is a Mermaid!? 5周年記念特装版
屍喰らいの冒険メシ
白き鋼鉄のX 2
白き鋼鉄のX 2 限定版
神々の悪戯 Unite Edition
1月28日(金)
Pokémon LEGENDS アルセウス
アンチャーテッド トレジャーハンターコレクション

コメントランキング

COMMENT