HTML5ゲームのいま

「ネイティブシフト」が叫ばれて久しく、かつてのHTML製ブラウザゲームは選択肢の一つに過ぎなくなってしまった。
だが、これはそれとまた違ったいまどきのHTMLゲームのはなし。

海外のHTML5ゲーム

▶ FacebookがMessenger上で遊べる「Instant Games」を計画中——HTML5ゲームデベロッパへの高まる期待感
▶ Tencent、来年度HTML5ゲームのKPI50億元に設定

昨年末あたりから、FBメッセンジャーやWeChatなどのメッセンジャーサービスにゲーム機能が追加され始めた。

ここで言う「HTML5ゲーム」とはどちらかというと『Candy Crush』みたいなカジュアルゲームに近い形で、メッセージのやりとりのスキマに遊んでもらってハイスコア情報などをそのままメッセージとして友達に送って競い合ってもらう…といったもの。

課金まわりもガチャではなく 時短アイテム または 使い捨てアイテム の購入がメイン（いまのところは）。
ゲームの雰囲気としては『LINE ウィンドランナー』や『LINE ドラゴンフライト』みたいな初期のLINEのゲームに近く、やればすぐわかるシンプルなゲーム性でプレイ時間もだいたい30 -60秒程度と短く抑えられている。



「EverWing」の飛び散るパーティクル

例えば、ドラゴンフライトそっくり（パクリ…?）な『EverWing』。
これはHTMLゲームエンジン「Blackstorm」で作られており、レスポンスもビジュアルもネイティブアプリのドラゴンフライトと遜色ない仕上がり。
FBメッセンジャーをインストールしていれば、フッターの「ゲーム」メニューから見つけられると思う。試してみてほしい。

これらは、なぜネイティブではなくていまさらHTMLでゲームなのか?というと、以下のような理由かなと考えている。

  1. 各デベロッパに作らせたゲームを、比較的簡単にメッセンジャーアプリに組込可能（大雑把な言い方をすると、ほぼ webview を開くだけ）
  2. アプリのインストール不要、メッセンジャーから離脱せずに即プレイ開始させられる
  3. 端末が高性能化しつつあるため、表現的に十分になりつつある
  4. 高性能・高機能なHTMLゲームエンジンがでてきた

日本のHTML5ゲーム

ここまでは基本的に海外の話。
では、日本国内ではどうなのか。

▶ 高品質なゲーム配信が可能になる次世代型ブラウザゲームプラットフォーム 『Yahoo!ゲーム　ゲームプラス』を本日オープン
▶ 楽天ゲームズ 荒木重則代表に聞く。新プラットフォーム「RGames」は何を目指すのか。HTML5と楽天のネットワークがもたらすゲーム体験とは
▶ 「BXD」が狙うHTML5活用ブラウザゲームの需要–ファミスタ、アイマス新作を投入

すでにオープンしているサービスとしては以下。

つづけて、来春にはバンナム x ドリコムの「BXD」が立ち上がるそう。
アイマスの新作、ブラウザ上で無料で遊べちまうんだ!
まさか、リズムゲーだったらもっと驚いちゃうな。

…ともあれあらためてタイトルを見ると、楽天のようにカジュアルゲームメインのところもあるけれど、Yahoo!とBXDはいわゆるソシャゲっぽいラインナップ。
配信先としてもFBメッセンジャーなどではなくて、自前でプラットフォームを用意するところからなのでやはりちょっと方向性が異なる。

可能な限りいまのネイティブアプリのゲームと変わらないものを用意するつもりのようで、『ワンピース トレジャークルーズ』がそのまんまブラウザで動くデモや、『アンティーク カルネヴァーレ』のようなHTML5ゲームとしてわざわざ用意した新作もある。



「アンティーク カルネヴァーレ」のクエスト

これはすでにリリース済みなのでプレイしてみたけれど、もうパっと見ではブラウザ上で動いていることに気づかないレベルだった。
（iPhoneでは、アドレスバーを消して全画面表示にするのにちょっとコツが要るが…）

かつてとは作り方が違う

さて、冒頭で「かつてのHTML製ブラウザゲームと違う」と書いたが、遊ばせ方だけではなくてゲームの作り方の点でいまのHTML5ゲームは大きな違いがある。
かつては一般的なWebサイト制作の延長として、四苦八苦しながら無理やり凝ったレイアウトやアニメーションを実現していた。
（そもそもHTMLはゲームを表現するものではないので、凝ったビジュアルやアニメーションを見せるにも限界がある）

が、いまや各種ゲームエンジンの支援があればネイティブアプリを作るのと同じような過程で開発でき、ゲームらしさにあふれるさまざまなビジュアル表現が可能となる。
『EverWing』の紹介で触れた「Blackstorm」などはかなりできがよいエンジンで、様々なオブジェクトを動かしながら同時にパーティクルを撒き散らかすこともできる。しかも、操作のレスポンスは維持したままで。
楽天は「Rakuten Games」を立ち上げるにあたって開発元の Blackstorm Labs と提携を結んでいる。また、FB Instant Games でも多くのゲームがこのエンジンを採用している。

一方、Yahoo! の「ゲームプラス」は Wizcorp の「Spear.js」を推奨しており、前述の 「アンティーク カルネヴァーレ」はこれを採用している。

ところで、”HTML5ゲーム”とはいうものの…。いずれのエンジンも1枚の canvas 要素にまるっと描画しているようなので、HTMLの役割はもはや単なるハコのようなものだ。

実際にブラウザのデベロッパーツールで覗き見してみると、

  • ゲームエンジンの js
  • ゲームアプリの js
  • プラットフォームに連携する都合で必要な大量の js
  • ぽつんと置かれた canvas 要素

が見られると思う。

また、これらのエンジンは商用で、体験版なども見当たらなかったので実際どんな使い勝手なのかは分からなかった。
機会があれば、どんなものかぜひ見てみたいけれど…。