【乖離性MA】開発者必見！PC版『乖離性』で採用されたWebGLの魅力を聞いてきた

WebGLでブラウザゲーの未来がアツい！！

スクウェア・エニックスから好評配信中のキャラクターコマンドRPG『乖離性ミリオンアーサー』（以下、『乖離性』）。

2016年10月より、本作のPCブラウザ版（以下、PC版）が、Yahoo! JAPANの運営するオンラインゲームサービス”Yahoo!ゲーム”で配信中だ。

【Yahoo!ゲーム版はコチラ！】

すでに体験した人なら分かるように、スマホ版の魅力である3Dグラフィックを使用した派手な戦闘演出はPC版でも健在。そうしたブラウザベースでの動作にひと役買っているのが、WebGLという技術である。

今回は、PC版『乖離性』開発ディレクターの加島直弥氏、Mozilla Japanの清水智公氏、そしてUnity Technologies Japanの大前広樹氏に、WebGLについて話を伺った。

※本インタビューはPC版配信前の9月末に実施されたものです。

WebGLの鍵を握るのはasm.js

――『乖離性』のPC版ではWebGLという技術が使われていると伺ったのですが、こちらはどのようなものなのでしょうか？

清水智公氏（以下、清水）　WebGLにはふたつの意味がありまして、まずはUnityで作られたプログラムをWeb用に書き出す機能という意味ですね。そしてもうひとつは、Webブラウザ上で3Dグラフィックを動かす技術という意味です。

――なるほど。

清水　ブラウザに実装されている機能として、C言語のプログラムをJavaScriptに変換して安全に動かす、asm.jsというものがあります。これがUnityのWebGL出力における中核的な技術となっています。

――そのasm.jsという技術は、今回のWebGLがもとで誕生したのでしょうか？

清水　いえ、もともとMozillaの中でJavaScript（※）の動作をもっと速くしたいという研究がありました。そこでいろいろ考えた結果、JavaScriptの機能を絞ることで速くなるんじゃないか、ということで完成した技術になります。なのでasm.jsはJavaScriptの動作を速くするものと考えていただければ。

※JavaScript：プログラミング言語のひとつ。本記事で登場するC言語やC++、C#といったものも同様にプログラミングに使用する言語。

大前広樹氏（以下、大前）　asm.jsはasmと付いているように、アセンブラ（※）に近いんですよ。たとえばMacの上でWindowsを動かす場合には、仮想マシンを作って、その仮想マシンの中でWindowsを動かすんですが、それと同じようなことをJavaScriptでやっているんです。

※アセンブラ：アセンブリ言語（C言語などよりもコンピューターが理解しやすい言語）で書かれたプログラムを機械語に変換するソフトウェア。

――JavaScriptに特化した仮想マシンの中で処理をすることで動作が速くなる、というイメージですね。Webのゲームではプログラムが速くても、通信量が増えると結果的に動作が重くなってしまう、ということを聞いたことがあるのですが、この問題は解決されているのでしょうか？

大前　通信の量や回数もゲームごとに最適化していく必要がありますが、これを上手く行うための仕掛けがUnityには用意されています。ただ、Unityのような大型のゲームエンジンの場合、JavaScriptでゲームを動かす時の動作の重さについては、通信の量というより、プログラムそのものの大きさがまず一番の問題ですね。むしろこの部分が最も大きなチャレンジでした。これまでエンジン側のコードは、プラグイン（※）として提供しているものをインストールしておけば、あとはコンテンツをダウンロードするだけで遊べるものでした。

※Unity：ゲームエンジンのひとつ。複数プラットフォームに対応しているため、多くのゲームで利用されている。

※プラグイン：特定の機能を追加するプログラム。今回で言えばUnityで制作したゲームを動かすためのプログラムなど。

――逆に言えばプラグインをインストールする必要があったと。

大前　はい。プラグインのインストールまでで躓いてしまい、ゲームで遊ぶのを諦める方も少なからずいました。WebGLのメリットとしては、そのプラグインが不要になることなんですよ。ただ、Unityのエンジンプログラムは30MB超えとかで、かなり大きいんです。WebGLでは、それを元々のC/C++言語からJavaScriptに変換してゲームと一緒に転送したうえで、ユーザーのブラウザ上でコンパイル（※）する必要がありまして。

※コンパイル：プログラミング言語で書かれたプログラムをコンピューターが理解できるかたちに翻訳、変換すること。コンパイルを行うソフトがコンパイラ。

――やはりエンジンプログラムともなるとデータが大きすぎる、と。

大前　そうなんです。すると転送も遅いしコンパイルも遅い、しかもコンパイルの処理が重すぎてブラウザが落ちちゃうこともあって、それが大きなネックでした。asm.jsはMozillaさんが研究開発されたすばらしいプログラムなんですが、黒魔術の類に近くてですね（笑）。

――黒魔術！？

大前　「やればできることは分かっていたけど、本当にやりやがったぞ」みたいな。私たちがasm.js向けに使っているのが、Emscriptenというコンパイラなのですが、これを使うと、C言語のプログラムをJavaScriptに変換して動かすことができるんです。

――そもそもブラウザで動かせるはずのないC言語のプログラムが動いちゃう訳ですね。

大前　さらに、Emscripten自体がブラウザでCのプログラムを動かす前提なので、、C言語に用意されている文字列を処理する機能やメモリを確保、開放する機能なども、同じように動くものを作ってくれるんです。おかげでUnityのエンジンの大部分を占めるC/C++言語からJavaScriptへの変換は楽になったのですが、Unityの場合はひとつ大きな障壁がありまして。

――障壁と言いますと？

大前　EmscriptenはC言語のプログラムには対応しているのですが、我々はUnityユーザーさんにC#でプログラムを書いていただいているんです。Unityというのは、ユーザーさんの書いたC#のプログラムと、我々がC++で書いたエンジンプログラムとを合体させて動かしています。これをJavaScriptで動かすということは……。

――変換する前からC#とC++、複数の言語が混在している訳ですね。

大前　その通りです。しかもEmscriptenはC#をJavaScriptに変換することができないので、JavaScriptで動かす前にまずC#をILという中間言語にコンパイルして、その中間言語を今度はC++にコンパイルして、さらにC++をコンパイルしてJavaScriptにしています。

――変換の手間がだいぶ大きいんですね。

大前　そんな黒魔術的な手順の果てにゲームが動いてるんですよ（笑）。

一同　（笑）

大前　つまりasm.jsのおかげで、Unityのエンジンコードが仮想マシンの上で動き、そのおかげでゲームが動くようになるわけです。

スマホ版に見劣りしない動作を見せるPC版『乖離性』

――ブラウザ用に移植するにあたって、『乖離性』側ではどのような対応が必要だったのでしょうか？

加島直弥氏（以下、加島）　根本の技術部分についてはUnityさんに対応していただいているので、こちらはモバイル向けに作っていたものをWebGL向けにビルドし直した、という感じですね。

――それはデータの処理方法を変更するなどでしょうか？

加島　そうですね、ブラウザ版はスマホ版と違って逐次ダウンロードを行いますから、その仕組みを作りました。実際に動かしてみると、ブラウザはシングルスレッドなので並行処理ができず、重い処理があったときにカクついてしまったんです。そこをMozillaさんにご協力いただいて、パフォーマンスのチューニングなどのアドバイスをいただきました。

――なるほど。PC版の実物をまだ見ていないのでこちらとしてはまだ分からないのですが、動作は快適なものになっているのでしょうか？

加島　いまちょうど開発版を動かせるので見てみますか？

――おお、ぜひお願いします！

加島氏のノートPCでPC版『乖離性』を見せてもらうこと数分。

――ほぼほぼスマホ版と遜色ない動きですね。これはターンごとにデータを読み込んでいるのでしょうか？

加島　その場に応じてロードすることもあれば、必要なデータはロードしたまま保持するなどして、できるだけロードが短くなるようにはしています。モバイル版に比べて若干ロードが長くなる部分もありますが、基本的には快適に遊べるようにしています。

大前　Unity自体にアセットバンドルという機能があって、3Dモデルのデータなどゲームで使う要素をその場その場で読み込んで使うことができるようになっています。ゲーム全体を動かす基本のプログラムなんかは最初にダウンロードが必要ですが、ゲーム要素のデータは逐次ダウンロードで対応できます。

――キャッシュしたしたデータを使うこともできるのでしょうか？

清水　HTML5からデータをローカルにキャッシュできるようになっていますので、仮想的なファイルシステムも作れるようになっています。ブラウザによって上限はありますが、けっこう大きいサイズまで扱うことができますよ。

――『乖離性』はカードの出しかたで展開が変わるゲームですが、これも効果が変わる前後のスキル内容をキャッシュしておいて、ロードなしで対応ができると。

大前　作った人に聞かないとなんともですが、そこは『乖離性』の内部でうまいこと処理していただいているのではないでしょうか（笑）。

清水　デッキに入っているカードの情報は戦闘が始まる前にロードしておく、というかたちで対応しているのかもですね。

――てっきりカードを出すたびに読み込みが入るのかと思いました。

大前　それをやっちゃうとお客さんに怒られてしまいますから（笑）。

一同　（笑）

UnityのWebGL対応はChromeのプラグイン廃止がきっかけ

――UnityがWebGLに正式対応したのはいつごろなのでしょうか？

大前　Unity5.3から正式になったので、去年の12月ごろですね。大きなきっかけとして、WebブラウザのGoogle Chromeが、ネイティブプラグインのサポートをやめるという発表が2014年の10月ごろにあったんですよ。

清水　ChromeやFirefoxなどを含め、ブラウザベンダーはプラグインを省いていこうとしています。皆さんに身近なプラグインを挙げるなら、Flashがありますよね。いまは動画サイトのプレイヤーを使用する際にFlashが自動で使われていますが、こちらも来年ぐらいから使用するたびにクリックで起動させる必要が出てきます。

大前　我々のWebGLの研究については、もともとは社内の凄腕プログラマーのひとりが遊び半分で行っていたものなんです。ただそんな発表が出たこともあって、ブラウザ上でもプラグインなしでUnityのゲームが動かせるようにしなければ、となりました。そこで白羽の矢が立ったのが、社内でも研究がなされていたWebGLになります。

――プラグインがなくなったときのための突破口がWebGLだったわけですね。

大前　以降はかなりのパワーを割いてWebGLの研究を進めていきました。ただ、やはりフルフィーチャーのゲームを動かそうとするとブラウザの機能がまだまだ足りないのが事実です。そこでFirefoxを作られているMozillaさんはじめ、ブラウザベンダーさんに話をして、新しい機能をもっと作っていきましょう、と協力して開発を進めていきました。

PC版『乖離性』を遊ぶのに必要なスペックは？

――PC版の『乖離性』ですが、ひと通りすべてのブラウザで動作するのでしょうか？

加島　ひとまずリリース時はFirefoxとChromeを推奨しています。ほかのブラウザへの対応は社内でも検討していますが、やはりブラウザごとに仕様や扱えるものが違ってきますから。

――なるほど。PCのスペックなども現段階ではある程度絞られてきますか？

加島　3Dゲームなので少し重いこともあり、まだ低スペックのPCだとカクついてしまうこともあります。いまのところ最低スペックとしては、Core i3以上のCPUが入っていてほしい、というところですね。

大前　あとOSは64bitである必要がありますね。そもそもJavaScriptが重たいものを動かす想定でないところに、仮想マシンの上で重いものを動かしていますから、けっこうなメモリを使ってしまうんですよ。32bitですとメモリが4GBしか積めないので、現実的に厳しいかなと。

――そう言われると納得です。

大前　このメモリを大量に使う問題に関しては、ブラウザベンダーさんに協力を要請しないと解決できなかった問題のひとつです。WebAssemblyというasm.jsに代わるテクノロジーをMozillaさんが先頭に立って開発をしていて、これがそろそろブラウザに搭載される予定です。WebAssemblyが登場することで、このメモリ問題は解決されるでしょう。

清水　Firefoxのつぎのつぎのつぎ、くらいのバージョンではWebAssemblyがデフォルトONになると私は見ています。おそらく今年の年末か、来年の年明けぐらいには実装されるはずですよ。

プラットフォームとしてのブラウザの可能性

――WebAssemblyがデフォルトで実装され、必要なメモリが減ってくれば、いろいろなメーカーさんがWebGLでのゲーム制作に乗り出しそうですね。

大前　参入するメーカーさんは増えると思いますね。WebAssemblyというテクノロジーを導入すると、人間に読みやすいコードから変換していた部分が取っ払われて、最初からアセンブリ言語のコードを読む、というようなかたちにしているんですよ。

――そうするとメモリの負担も小さく？

大前　なりますね。コンパイルでメモリを大きく使うこともないですし、データ的にも人に読ませるために作らなくていいので、同じことがより小さいデータで表現できるんです。テキストになる必要がないので、より圧縮もきくようになります。

清水　だいたい3分の1くらいにはなります。

――それはだいぶ変わりますね。

大前　それにasm.jsからWebAssemblyに代わるのに際して、Unityもそれに甘んじるだけではなく、エンジンのデータ量を小さくしようと動いています。

――それは具体的にはどのような対応をされているのでしょうか？

大前　たとえばUnityには、2Dの当たり判定をするモジュールだったり、3Dの物理計算をするモジュールだったり、いろいろなモジュールが存在します。でも3Dのゲームには、2Dの当たり判定って必要ないじゃないですか。なのでビルドをする際に、そういう使用していない部分を自動的に外すという処理に変えたんです。そうやって最適化することで、最初70MBとかだったものが16MBくらいになりました。

――おお、かなり小さくなりましたね。

大前　これを圧縮して送って、圧縮したものをJavaScript上でいい感じに展開しながら読めるようにするプログラムを入れまして。圧縮したデータではエンジンのコードが4MBまで減りました。これをWebAssemblyに変えれば、1MBにまでなるはずです。

――70MBから1MBはすごいですね。1MBならモバイルベースでもぜんぜん問題ないと思いますが、そうするとスマホ向けのブラウザゲームなんかが出てくる可能性も？

大前　ただ、コンパイルする際のメモリの問題は解決しても、ゲームを動かすときに使うメモリの量や、そもそもスマホのCPUで耐えることができるかなど、まだ問題はありますね。

――確かにCPUなどはスマホのものだとまだ厳しそうですね。

大前　いまのところWebGLはPCブラウザで動かす前提のものなので、まだスマートフォンで動かすという想定はないですね。もちろんやりたくないということではないのですが、ブラウザですべてのアプリが動いてしまうと、既存のアプリ市場も壊れてしまいますし。

――逆にソフトメーカー側からすると、ブラウザ版なら審査が入らないというメリットもあるのでは？

加島　審査に出す必要がない分、バグの修正などでお客様をお待たせすることがないというのはありますね。

大前　その場合は課金システムのソリューションがほしいですよね。アプリだとアップルさんやグーグルさんが面倒を見てくれていますけど。

清水　課金を代行するサービスも出てきていますよね。それに使いかた次第だと思いますが、前にあった事例として、体験版をブラウザで公開するというプロモーションがありました。序盤だけ遊べるようにして、本編はアプリストアからダウンロードしてね、という。

――そうしたプロモーションは最近よく見かけますね。

清水　ブラウザで体験版をリリースする利点のひとつが、TwitterなどのSNSでURLを流せばすぐに遊んでもらえる、というところにあります。

――アプリストアからインストールする、という手順を省けるのは大きいですね。

清水　あとは、Facebookのゲームプラットフォームに置くという展開もできますね。iOS、Android、Facebookで同時にリリースした会社さんの中には、最初の1週間の売上がFacebookがいちばん良かったというケースもあるんですよ。

本格的なWebブラウザゲーム制作の幕開け

――では最後に、開発者の方々に向けて、WebGLのアピールといいますか、メッセージをお願いします。

大前　いま、ようやく本格的なブラウザゲーム制作のスタートラインに立てたのだと思います。Webでどんなゲームを出していくか、というのはまだ基準ができていないので、いろいろなゲームをたくさん出してほしいですね。インストールなしでゲームが遊べること、そしてそれをURLで簡単に共有できること、ここを活かしてWebらしさを出してもらえれば。

――3Dのモデルが動いているということで、今回の『乖離性』はいい事例となりましたね。

大前　ですね。いまですと、まだ新しめのPCじゃないと動作が難しいというような問題はありますが、これも加速度的に解決されていくというのは見えています。皆さんにぜひ『乖離性』を遊んでほしいんですが、触ってみると衝撃を受けると思います。「え、これが動くの？」みたいに。

清水　ブラウザでこのレベルのものがふつうに動いているというのは、けっこうな衝撃だと思いますよ。

――『乖離性』に触れたほかのメーカーさんがどんな反応をするか、いまから楽しみですね。

大前　現状、ブラウザのJavaScriptエンジンは動かせるプログラムがシングルスレッドなこともあって、WebGLはまだ計算量がすごく多いゲームには向いていません。ですがプラットフォームごとの特性というのはどこにもあるので、その特性に合わせて、「ここはやろう」、「ここはやめよう」という判断が適切にできれば、すばらしいゲームを作ることができると思います。

清水　機能の拡張なども実装できるところまではきていて、バグの修正やパフォーマンス調整が終われば製品に乗せていくことができるという状況です。今年の年末ぐらいにはひと通りが揃う予定ではあるので、ぜひいまからWebGLを触ってもらえればと思います。

大前　『乖離性』を「ちくしょうおもしろいな！」と思いながら遊んで、「自分たちも負けずにいいものを作るぞ！」となっていただければ。

――では加島さんからもメッセージをお願いします。

加島　今回、WebGLという新しい技術を扱い、挑戦的な面もありましたが、それだけ技術の成長を感じることができました。モバイルに加えてブラウザという市場が広がることで、ユーザーも増えて今後のゲーム市場もアツくなっていくと思います。なので、ぜひとも開発者の方々には、ブラウザでのゲーム開発に挑戦していただきたいですね。

【Yahoo!ゲーム版はコチラ！】

▼動画もやってます

▲『乖離性ミリオンアーサー』攻略wikiはこちらから

『乖離性』のプロデューサーが期間限定でツイート中！　意外な情報が呟かれるかも!? @iwano_hiroaki

弱酸性ミリオンアーサー 2016年3月31日発売！ ★Amazonでの購入はこちら！ ★ebtenでの購入はこちら！

乖離性ミリオンアーサー

対応機種	iOS／Android／ブラウザ
価格	無料（アプリ内課金あり）

このゲームの詳細を見る

ジャンル	RPG
メーカー	スクウェア・エニックス
公式サイト	http://www.kairisei-ma.jp/
公式Twitter	https://twitter.com/kairiseiMA_PR
配信日	配信終了
コピーライト	(c)2014-2018 SQUARE ENIX CO., LTD. All Rights Reserved.