スマホ向けHTML5ゲーム開発の最前線　主要デベロッパーから人気ゲームエンジンまで解説

HTML5ゲームのプラットフォーム

山田元康氏（以下、山田）：ここまでが市場全体の話です。それでは、スマホ向けのHTML5市場にはどんなプレイヤーがいるのかというと、一番上に書いてあるのがプラットフォームです。プラットフォームを大きく3つに分けています。

一番左に書いたのがオンチャットと呼ばれているものです。HTML5ゲームの市場が成り立ってるのは、基本的にオンチャット分野です。Facebookでいうとメッセンジャーの中にゲームがあると思います。これはHTML5で作られてるゲームです。これはInstant Gamesと言っていますが、このオンチャットにおいてはFacebook Instant Gamesと、WeChatミニプログラムが二大巨頭です。

それ以外に、日本ですはLINE QUICK GAMEというものがあります。あとはWeChatと同じ会社がやってるメッセンジャーで、QQというものがあります。そのQQにもゲームがついていたりとか、楽天さんもViberにゲームをつけていたりします。

他には、オープン系のプラットフォームがあります。これは特定のチャットの上で動くものではなく、本当にピュアなブラウザ上で動くものです。

国内では、ヤフーさんが提供されている「Yahoo! かんたんゲーム」、「Yahoo! ゲームプラス」。「enza」というのはバイダイナムコさんとドリコムさんがメインで提供されているHTML5のプラットフォームです。他には、中国系のゲームをコーディングして配信しているG123という会社さんなどがオープン系のプラットフォームにおけるメインの会社になります。

海外では、先ほどの話の4399という中国のオープンなプラットフォームであったり、これはヨーロッパ系ですがSOFTGAMESさんなどで、HTML5のオープン系のプラットフォームを提供しています。

次にゲームエンジンについてです。日本ではあんまり知られていませんが、すでにいくつか存在しています。「HTML5でゲーム作る」というと、みんな「enchant.jsですか」みたいに言うんですが、enchant.jsでゲーム作ってる人はもういないと思ったほうがいいかと思います。これはすごくレガシーなテクノロジーだと思っていまして、実際に商用のゲームを作ってらっしゃる会社さんは、ここに書いてあるゲームエンジンを使って開発しています。ネイティブアプリと同じようにゲームエンジンで開発するのが基本的なスタンスです。

2D／3DのゲームだとEgret Engineという中国のエンジンか、PlayCanvasというエンジンの2つがあります。2Dのほうで多いのはCocosという中国のエンジンです。他にはPhaserというエンジン。これもあまり使われていませんが、Adobe AnimateもFlashの延長線上で、ゲーム的なものも作れます。

あとはこれは正式にリリースされてないんですけども、UnityさんからTiny Modeというプラグインのようなものがあります。新しいUnityに作ってるんですけれども、そのTiny Unityって呼ばれてるものを使うと、HTML5のゲームを作ることができます。もう1つは、中国にあるLayaboxという、3つ目に有名な人気ゲームエンジンです。これが市場の全体像になります。

主要なデベロッパー

デベロッパーはここに4社書いたんですが、デベロッパーさんはこの4社以外にも、本当に数社あるくらいです。デベロッパーさんもほとんどいません。パブリッシャーさんも下に書いたLINE QUICK GAMEさんなどです。「Yahoo! かんたんゲーム」も、アプリ数は一見多いんですが、本当に数社しかゲームを提供していない状況です。

WeChatのほうはすでにぜんぜん追えない状況ですが、Facebook Instant Gamesは日本でもいろいろな会社さんが参入されていて、パブリッシャーをやっているケースもあります。

オープンなプラットフォームを簡単にまとめていきますと、Facebook Instant Games、これはメッセンジャーの上で動くプラットフォームです。課金モデルも用意されるという話なんですが、基本は広告モデルです。ゲーム数は現在400以上で、オープン化したあとに大量にゲームが配信されて、どんどん競争が激化していっている状況です。

LINEのゲームに関しては、これもLINEのメッセンジャー上で動くゲームなんですが、残念なことにゲームの数が9本以下です。ここに配信されているゲームも最近どんどん打ち切られていく状況で、もしかするとLINE QUICK GAMEはなくなるんじゃないか、というレベルでうまくいっていません。

これは調べている時期が古いですが、バンダイナムコさんとドリコムさんのプラットフォームであるenzaは、導線はとくにありません。自前で広告宣伝の資金をかき集めている状況です。ただここに提供されてるゲームはバンナムさんの強力なIPを使った課金系のゲームで、どちらかというと純粋なソーシャルゲームのようなものを提供しています。

ヤフーさんでは、「Yahoo! かんたんゲームプラス」と「Yahoo! ゲームプラス」というオープンプラットフォームを出しているんですけれども、実はタイトル数は多いけれどもぜんぜんうまく行っていないと言われています。これはなぜかというと、ご存知の方もいらっしゃるかもしれませんが、ヤフーさんはこれらのサービスを始めた当初はめちゃくちゃ力を入れてやる予定でした。

ですがサービスを始めたあとに何が起きたかというと、AppleからヤフーのネイティブアプリがことごとくBANされるという騒ぎがありました。つまり、報復されたと。LINEさんも実は報復されたらしくて、去年の11月に1回、LINEさんのQUICK GAMEは1ヶ月ぐらい長期メンテナンスに入って、全ゲームが遊べない時期がありました。

基本的にHTML5のゲームに関しては、プラットフォームを作ってやろうとすると、Appleから制裁を食らってしまうので、及び腰になってる会社さんもあります。

ゲームエンジンを比較する

ここからは、「どんなゲームエンジンがあるのか」という比較をしていきたいと思います。

まず元ネタは、中国でHTML5の各ゲームを比較して記事を書いてらっしゃる方がいまして、その方に許可を取って翻訳しています。

まずはゲームエンジンです。この方が比較したゲームエンジンがいっぱいあるんですが、黄色い色がついてるところが、「みんなが使ってるゲームエンジン」と考えてもらうといいかなと思います。

Phaserは、欧米で主に使われているゲームエンジンです。Egret Engineは中国人が作って、中国で主に使われているエンジンです。Cocosも、HTML5向けのCocosエンジンに関しては中国の人が作って、中国で主にメンテされ、中国で使われているエンジンです。もう1つ、PlayCanvasは欧米でメインに使われているエンジンです。

先ほどの中国の比較記事には書いていなくて僕が追加したものとしては、1つはTiny Unityです。これはまだベータ版ですので正式なものではありません。あとはAdobeさんがもともとAdobe Flashという名前で提供されていて、最近名前が変わったAdobe Animate CCでも、HTML5で書き出すことができるので、ゲームを作ることができます。

Phaserは基本無料で、2Dに特化したゲームエンジンです。JavaScriptでもTypeScriptでも書けるエンジンです。Egret Engineは、無料で全部配信されてます。2Dの描画も3Dの描画も、エディタもついています。JavaScriptでもTypeScriptでも開発することができます。

Cocosのほうも、実はCocos Creatorという名前で無料で提供されています。Unityみたいな雰囲気のエンジンです。2Dの描画に特化したゲームエンジンで、JavaScriptがメインです。

PlayCanvasは無料ではあるのですが、PlayCanvasさんのプラットフォームに配信する限りは無料で、それ以外のところに配信する場合は無料ではなくなるので「△」という感じです。これは2Dもできるんですけど、主に3Dに特化したゲームエンジンです。

Tiny Unityは、これは無料ではありますが、Unityと同じライセンスモデルという感じです。現状は2Dの描画に特化しています。現状はJavaScriptとTypeScriptで書くことができますが、正式バージョンになったときにはそれらは使えなくなって、全部C＃に統一されます。

Adobe Animate CCに関しては、（表が）いろいろ間違ってるんですけど、2Dの描画がメインです。JavaScript、TypeScriptで作る感じで使われています。

パフォーマンスを比較する

一番気になるパフォーマンスの比較です。「ゲームエンジンでゲームを作って動くの？」という疑問がある方もいらっしゃると思います。ネイティブアプリも初期のころは、Unityで作ったゲームって重たいじゃん、全部自分で手で書いたほうがいいんじゃないの、という人もいましたが、今そんなこと言いだす人はいませんよね。やはりスマホのスペックが進化してきたからということもあると思います。

では、HTML5のゲームエンジンのパフォーマンスを何で比較しているかというと、一番右側のケースは2万個のオブジェクトを画面上に生成して、毎フレーム回転させるというベンチマークのプログラムです。

2万個ぐらい表示してしまうと、基本的には速いエンジンでも24フレームくらいしか出ません。EgretとCocosは20フレーム前後しか出ない状況です。60フレーム出すには5000個ぐらいしか表示できません。

Pixi.jsやほかのゲームエンジンは「2万オブジェクトも表示してるのに60fpsってめちゃくちゃ速いのか」と思うかもしれません。ですがこれらはゲームエンジンと言いながらも、どちらかというとゲームの描画ライブラリみたいな感じのものです。本当のゲームエンジンとはちょっと違うので、実際にゲームエンジンと呼んで商用に耐えられそうなパフォーマンスが出るのは、EgretとかCocosなんかが高速で動くので、おそらく期待値が高いのではないかと思います。

実はenchant.jsは、ローテクでレガシーなフレームワークであるにも関わらず、パフォーマンスがすごく悪くて。5000オブジェクト表示するだけでも7fpsに落ちてしまうので、正直、あえて使う必要はないんじゃないかなと思います。

Adobe Animate CCやTiny Unityはどうなのかというと、前のものでは環境が違うので、数字は比較できません。（スライドには）1000と書いてありますが、1万オブジェクトの表示と回転でいくと、この環境でもEgret Engineはだいたい60fpsぐらいが安定して出ます。それに対してTiny Unityは同じ環境で5fpsしか出ない。Animate CCも10fpsしか出ません。

Tiny Unityは、現状においてはまだ商業ゲームを作るには導入は難しいんじゃないのかと思います。パフォーマンスがすごく悪いというのが一つ目、二つ目は商用になってしまうとTypeScriptはサポートされなくなってしまい、C#で書かなければいけなくなるという状況です。

現在のUnityで開発してしまうと、Tiny Unityが正式リリースになったときには、そのオブジェクトはもう開発・メンテできなくなってしまいます。ですので現時点では、まだTiny Unityを使うわけにはいかないなという状況です。

人気のゲームエンジンは？

では、利用実績です。どのエンジンが実際使われてるのかというと、先ほどの中国の人が出している資料では、Egret Engineが一番多いです。これは実際に世の中にリリースされてるアプリを調べていって、ソースコードを見て、どのエンジンが一番使われてるを調べたらしいんですが、Egret Engineが60パーセント。Cocosは27パーセント。

……という話をTwitterでしていたら、Cocosの社長の（Zhe）Wangさんという人から、この写真が送られてきまして（笑）。「そんなことねぇ」と。これはWeChat上で、TOP100のモバイルWebゲームのシェアがこんなもんだよ、という。Cocosが50パーセントで、Egretは27パーセントだと。これはCocos社の数字なので彼らのバイアスがかかってると思いますが、トップゲームのほとんどはCocosだよ、というのが彼の主張です。

WeChatだけでなく、FacebookのInstant Games上でも、Cocosが30パーセント近くで一番多い。中国勢ではなくて欧米勢だと、Phaserを使って開発している人たちが多い、という感じです。詳しくはQiitaに記事がありますので、こちらを読んでいただければと思います。

ということで、本日は以上になります。細かいHTML5のことに関しては、実際ネットで調べていただいたり、SNSで情報を見ていただければと思いますが、実際に作ってらっしゃる人、もしくは情報を発信してる人ってほとんどいません。

去年の夏明けぐらいに、いろいろなエンジンがある中で、僕はEgret Engineにしようと思いました。ですが、日本にまだ進出してないので、どうせ担ぐなら誰も担いでないもののほうが、自分が一番になっていいかなと思って（笑）。一時期、毎日Qiita書いたり、TwitterでEgretと検索しても、自分しか出てきませんでした。

（会場笑）

「Egret Engine」でサーチすると、毎日自分が出てくる（笑）。でもそれをやり続けて、何人か使う人も増えてきたんですが、本当数人、全員名前を挙げられちゃうんじゃないか、みたいなレベルでしかまだやってない状態です。正直な話、HTML5のゲームが来るか来ないかは、来ない可能性もぜんぜんあるなと半分思うわけです。でもだからこそ、今からやってたいたら、もし市場が伸びていったときに自分が一番になれるかもしれない、という考えもあって参入しています。

キーは、やはりHTML5だからできる新しい体験です。これをユーザーに提供できない限り、我々のような作り手の都合だけでHTML5だね、というのはうまくいかないんじゃないのかなと思います。なにか新しい体験を発明できないと、未来はないと思ってかんばっている状況です。以上になります。ありがとうございました。

（会場拍手）

中国語への耐性を上げておいたほうが良い

司会者：ありがとうございました。簡単に質疑応答の時間をとっていければと思います。なにかご質問等ある方はいらっしゃいますでしょうか。

山田：なんでもどうぞ。

（会場挙手）

質問者1：Egret Engineで生成したアプリの最終的な出力されるファイルサイズは、画像などのリソースを抜いて、どのくらいになりますか？

山田：うーん、全部のアセットを入れて数100キロバイトとか。1メガはぜんぜんいかないですね。

質問者1：ありがとうございます。

司会者：ほかにありますでしょうか。

山田：実際に作ったことがある、作ってる方っていらっしゃいますか？　HTML5で。

（会場挙手）

おぉ。何を使ってらっしゃいますか？

参加者1：今はPixi.jsと、あとはAnimate CCを組み合わせて使ってます。

山田：何を使ってらっしゃいますか？

参加者2：Pixi使ってます。

山田：Pixiって高速というか、パフォーマンスが良いんですかね。さっきのデモの「チャリ走」のほうもPixi.jsで作ってるんですよね。何で作られてる感じですか。

参加者3：先ほどのはPixi.jsなんですけども、以前はcreate.jsを使ってました。

山田：なるほど。Cocosとかは使ってらっしゃる方、います？　いないのか。Cocosのほうは若干情報ありますよね。Egret Engineに関してはもう中国語への耐性度を上げていかないと。我々って、検索して中国語が出てくるとすぐ閉じるじゃないですか。わけわかんないなって。でもそこを乗り越えていかないと、情報もまったくないので（笑）。

司会者：ほかにありますでしょうか。大丈夫そうですね。では改めて、ありがとうございました。

（会場拍手）