その「enza」で株式会社バンダイナムコエンターテインメントが提供するブラウザゲーム『クイーンズブレイド WHITE TRIANGLE（以下、クイブレWT）』。本作に、『OPTPiX SmartJPEG』が活用されているとのことで、お話をお伺いしました。
――まず初めに『クイーンズブレイド WHITE TRIANGLE』についてお聞かせください。
クイーンズブレイドとは、2005年に発売された対戦型ビジュアルブックをはじめとして、アニメやフィギュアなどマルチ展開をするシリーズです。本作の『クイブレWT』は、カットインやカメラアングルに凝った戦闘シーンと、バトル終了時の演出までがシームレスに繋がる気持ちよさが売りの“アーマーブレイクRPG”です。遊んでいただければ、ブラウザゲームでもここまで動くのか！ と、驚いていただけると思います。
――アニメーション自体はOPTPiX SpriteStudioとのことですが、ということはアニメーションに使われている画像データの形式は…。
ご想像の通り、ほとんどが“PNG”です。戦闘シーンのアニメーションもそうなのですが、お知らせなどのバナーも“PNG”、戦闘シーンの背景や高解像度のイラストなどで、“JPEG”も使用しています。ブラウザゲームであること、多くの機種への対応が前提なので、これらのポピュラーな画像データ形式を選択しています。その点では、ネイティブアプリと大きく異なるかもしれません。
――なるほど、リソースの構成はWebサービスと言えますね。
ブラウザゲームに『OPTPiX SmartJPEG』を選択した理由
――さて、画像圧縮に“OPTPiX SmartJPEG”を選択した経緯についてお聞かせください。
開発の後半ごろから、改めて画像リソースやアニメーションのリソース類のファイルサイズの圧縮に着手し始めました。ブラウザゲームである以上、プレイ中はリアルタイムにサーバーとの通信が発生します。そうなると、画像やアニメーション、サウンドやムービーなど、リソースの一切合切が“通信”に乗ってくるわけです。この通信量を削減するのは見えていた課題でした。
この画像リソースの容量削減には、元々「OPTPiX imésta 7」を使用していたのですが、『クイブレWT』では、ユーザーのプレイ環境に応じて高解像度版と低解像度版、それぞれを別リソースとして、デザイナーが作り分けるという手間が発生しました。これは効率が悪い、どうにか自動化できないかと感じていまして…ウェブテクノロジ社の『OPTPiX SmartJPEG』に目をつけたのです。
――“自動化”というワードが登場しました。というと、『SmartJPEG』の採用を進めたのは…？
はい、インフラを担当しているメンバーです。トライアルしよう、と決めてから、SmartJPEGの実行ファイルをダウンロード→インストール→コマンドを叩いて検証開始、と。SmartJPEGの圧縮パラメータの検証に1日程度で。そうそう、「あ、（SmartJPEGには）Linux版があるんだ」というのがトライアルのきっかけになったのは間違いありません。
――インフラ主導というのは面白いケースですね。では、圧縮パラメータのお話が出ましたので、具体的なパラメータ（注：SmartJPEGのmode設定。画質を重視したmode1から、圧縮率を重視したmode8まで段階的な設定が可能。この各mode設定ごとに、イラストや写真別に適した圧縮処理が行われる）の設定値をお聞かせください。
SmartJPEGの検証にあたり、全てのパラメータを試しました。当初は、最も圧縮率が高く、つまり一番小さくなるパラメータを検討してみたのですが、SDキャラの色が、キャラクターの設定画と乖離してしまいまして…これは不味いなと。いろいろ考えた結果、SmartJPEGがインデックスカラーに変換しない程度のパラメータで、mode3を選択することにしました。
――mode3ですと、画質を比較的重視する代わりに、圧縮率はそれほど高くならないのでは？
ところが、実データで実行した結果では、『クイブレWT』の画像リソース、トータル3ギガバイトあったデータが、2ギガ程度まで小さくなりました。4割まではいかなかったのですが、これは十分な成果と感じました。また、この圧縮作業自体を、完全にSmartJPEGにおまかせできたのは大きいです。
――まさに“自動化”できたわけですね。では、自動化のワークフローについてもお聞かせください。
画像データに限らないのですが、データの管理はSVN（注：Apache Subversion。ソースコードなどを集中管理するバージョン管理ツールのひとつ）を使用しています。デザイナーからのSVNコミットを検知、そのタイミングで、SmartJPEGを起動～変換、完了報告をメンバー宛に自動通知、という仕組みを構築しました。ごくごく単純なフローではありますが、元々デザイナー側で画像の圧縮～チェックを手作業で行っていたものですから、これがゼロになったわけです。
ブラウザゲームにSmartJPEGはオススメできるのか？
――最後に、SmartJPEGについての感想をお聞かせ頂けますでしょうか。
当初考えていた画像リソースの圧縮、ひいては転送量の削減を通じたレスポンスの改善に大きく寄与しました。圧縮結果は安心の“OPTPiX”クォリティですし、更に自動化で手数を大きく減らすこともできました。今後の開発プロジェクトもそうですが、他の方にもおすすめできますね！
――本日はありがとうございました。
●クイーンズブレイド WHITE TRIANGLE
こちらからすぐに遊べます！
（C）HobbyJAPAN
（C）BANDAI NAMCO Entertainment Inc.
OPTPiX SmartJPEGとは
『OPTPiX SmartJPEG』は、画像はきれいなまま「画像ファイルを軽量化するソリューション」です。ファイルの軽量化で、転送量やサーバー・ストレージのコストを削減、運用型のサービスにとてもフィットします。『OPTPiX SmartJPEG』のラインナップは様々。オンプレミスはもちろん、クラウド環境にインストールしての運用も可能です。
・製品ページへ
株式会社ウェブテクノロジでは、「クリエイターを笑顔に」をモットーに、開発メンバーを募集しています。お気軽にご応募ください。
ウェブテクノロジ キャリア採用ページ
