Skip to content

onGameStartで見えてきたHTML5+ゲーム技術の最新トレンドまとめ

「世界初のHTML5ゲームのカンファレンス」と銘打ったイベント、「onGameStart」はポーランドの首都ワルシャワで9月22日、23日に開催されたのは既報の通り。

昨今HTML5技術の動向が非常に注目される中、このイベント中に重要なキーワードとなった言葉は3つありました。

・クロスプラットフォーム(PC & スマートフォン)

・3D表現(WebGLとその他)

・ゲームエンジン

というわけで、それぞれのテーマについて具体的なプレゼン例を交えながら紹介したいと思います。

 

クロスプラットフォーム

まず、最初にクロスプラットフォーム(マルチプラットフォーム)であること。HTML5技術が注目されている最たる理由の一つは、このプラットフォームや端末を超えた互換性にあります。PCやMac、またAndroidやiPhoneといったスマートフォンなどでも、同じHTML5で書くことが出来る。これがHTML5に最も期待されていることです。

ただ、実際には使用する端末やブラウザによって処理速度や挙動の違いというのはどうしても生まれてしまいますし、今でもプレフィックスコードを初めとする文法の差異、ブラウザ毎に少なからず解釈に差がでてしまうこともあります。

こういった問題をどう解決するか?

「On Game Start」のセッションでは十人十色、各エンジニアが様々な形でこの問題を解決しようとしています。

例えば、IdentecaはHTML5で書かれたコードを、各端末毎に最適化するという手法をとっています。彼らのゲームはiPad2で15fpsしか速度がでないものに徹底的な最適化を施して、iPhone3GSで50fps、iPad2で95fps以上のスピードを出すことに成功しました。1つのコードをベースに<canvas>やCSS、openGLなどレンダリングエンジングを端末毎に使いわける最適化をします。

IdeatecaのIbon Tolosana氏にポーズをとってもらいました。

実際に触らせてもらったゲームも本当にネイティブコードで書かれたアプリとしか思えないほど非常にスムーズに動作していました。

Ideateca

http://ideateca.com/

この「クロスプラットフォーム」というキーワードは、後に登場する「ゲームエンジン」というキーワードとも密接に関わってきます。

というのも、ゲームエンジンの開発される目的そのものが、クロスプラットフォームのゲームを簡単に開発する、というところにあるからです。

enchant.jsも広い意味ではこのクロスプラットフォームを意識した開発環境になっています。

 

3Dの表現(WebGLとその他)

さて、今の時代HTML5技術まわりではWebGLはホットなトピックな一つです。「onGame Start」でもWebGLをベースにする、しないに関わらず、様々な3Dエンジンが紹介されました。

j3dエンジンは、Unityでモデリングしたものをjson形式でエクスポートして使えるようになっており、WebGLで実装されるという仕組みになっていて、かなり手軽に扱えるエンジンとなっています。

驚くべきは既にAndroid版のFirefoxではWebGLが限定的ながらサポートされていて、このj3Dエンジンがそのまま動作するということです。ただ、さすがにまだ動作速度そのものはちょっと苦しい感じでした。

githubにはj3dのデモが沢山あるので是非見てください。Chrome、Safariなどで動作します。

j3D webGL Engine

https://github.com/drojdjou/J3D

また、このこのj3dを紹介したBartek Drozdz氏はPlay with Chromeでおなじみの「RO.ME」の開発もしていたそう。何とこの作品は40人のチームで5ヶ月かかったそうです。まだ見てない人はChromeで今すぐチェックすることをお勧めします。

RO.ME

http://www.ro.me/

RO.MEのデモはスクリーンショットだけ撮影してもわけわかんない、というレベルなので、ぜひ実際に体験してみてください。

「これがブラウザで動いてるのか!!!」と感動するくらいのインタラクティブムービーになっています。

 

Play With Chrome

http://www.google.co.jp/chrome/intl/ja/playwithchrome.html

Steppe

http://steppe.fleetingfantasy.com/

SteppeはWebGLを使わない2.5Dの表現を可能にするエンジンです。レンダリングレベルを変えられたり、反射エフェクト、アンチエイリアスなどを用意しているそうです。

この他にも、Raycastingなどを採用したOrigami3Dエンジンの紹介などもありました。

http://projects.mariusgundersen.net/Origami3D/examples/

他にも日本では馴染みが薄いものの海外の3Dゲーム開発では常識となっているBSP(バイナリ空間分割法)ツリーをJavaScriptで構築するテクニックの紹介など、3Dに関してはかなり突っ込んだ内容の解説をするセッションが目立ちました。

そしてQuakeIIIのWebGL版への移植を行ったHTML5ハッカー、ブランドン・ジョーンズ()が、id softwareの最新作、「Rage」をWebGLで実装。

正気を疑うようなレベルの出来に会場からため息が漏れた。

この画面がWebブラウザだけで描画されているとはとても信じられません。

さらに「会場初公開」の隠し球(One More Thing)として、「チームフォートレス2」のマップの再現もデモ。

HTML5の大いなる飛躍や可能性を感じざるを得ない出来でした。

ここまで来ると、UnityのランタイムエンジンはHTML5に集約されていって、Unityは単なるオーサリングツールとしてより先鋭化していくのでは?・・・なんていう妄想も浮かびました。

Rageのデモビデオは以下

 

ブランドンのブログ(http://blog.tojicode.com/)に行くと、様々なテクニックが惜しげもなく公開されています。

気合いのあるときに一気読みすることをオススメします。

 

ゲームエンジン

そして、ゲーム開発をより簡易に、多くの人が簡単に使えるゲームエンジンのセッションは「onGameStart」のメインセッションと言っても良いほどの活気がありました。

gameJS

pygame(http://pygame.org/news.html)でもおなじみのゲームエンジンです。githubなどで入手することができます。

詳しくはこちら

http://gamejs.org/

Alice.js

リサーチ・イン・モーション(BlackBerryを開発した会社)が開発したHTML5開発環境です。ブラウザ内で端末のエミュレーションからスーパーインポーズでCSSの調整も可能となっています。BlackBerryのAndroidアプリエミュレーションやこのHTML5開発環境などがあります。

BlackBerry専用のゲームアプリを作って欲しい、と言ってもなかなか作り手がいないので、HTML5にすることで作り手の間口を広げて行こう、というのがねらいのようです。

Alice.jsのデモやソースコードはここからどうぞ。

http://blackberry.github.com/Alice/demos.html

また、いかに簡単にするか?クロスプラットフォーム対応の手間を省いてくれるか?ということのみならず、WebSocketやnode.jsを用いてリアルタイムなインタラクションができるHTML5ゲームエンジンの開発も行われています。

つまり本格的なMMORPGをHTML5だけで作ることも可能であり、それを指向したゲームエンジンもあります。

Isogenic Engine

http://www.isogenicengine.com/

Rob Evans氏曰く、

現在流行しているソーシャルゲームは全然ソーシャルじゃない。リアルタイムインタラクションこそ真のソーシャルゲームを可能にする!」とのことでした。

そしてゲームエンジンといえばwise9読者には御馴染みのenchant.js

9leapの開始後わずか10日間で100本ものゲームが投稿された、という紹介のくだりでは会場全体から拍手が巻き起こる展開も。

他の3DエンジンやIsogenicのネットゲームエンジンに比べると、機能面で単純比較した場合、決して過剰にパワフルだったり、凄いテクニックが用いられたりはしていませんが、逆にenchant.jsを世界の他のゲームエンジンと比較した場合、教育用途だったりとか、昔ながらの(Old fashioned)ゲーム開発にはより向いていたりとか、そういう特徴が浮き彫りになりました。

ゲームエンジンは単に高機能であるというだけでなく、取っ付きやすいというのもひとつの重要な性能指標になるので、enchant.jsのこの切り口は世界的に見ても十分個性として成立して行ける。そんな手応えを感じました。

 

総評

「世界で初めてのHTML5ゲームカンファレンス」がなぜか東欧ワルシャワで開催される、ということに最初は違和感というか、不思議な感じを抱いていたのですが、いざ蓋を開けてみると、世界中からHTML5の開発者が集まり、文字通り「世界初」の名に恥じないものになったと思います。

けっこうアメリカからの参加者も多かったです。

年内にはボストンとサンフランシスコで、さらにHTML5ゲームにフォーカスしたカンファレンスの開催が予定されており、enchant.jsも招待されているので、またレポートをお届けできると思います。

また、WebGLまわりは非常に先進的なんだけれども、同時にまだピーキーでブラウザごとの実装が安定していない、という印象を持ちました。

ブラウザの実装が未熟なせいで何日もバグで悩む・・・なんてこともまだまだありそうです。
実際、ブラウザで動かす「チームフォートレス2」のデモは200MBものメモリを要求するので、まだまだ普通に重たいゲームを動かす、というのは厳しそうです。

しかし速度の問題にしても日々JavaScriptエンジンの最適化も進んでいますし、さらに高速化する方法としてIntelが開発したJavaScriptで並列計算を実装するプラグインなどのように、かなり本格的な高速化を実現するためのテクノロジーが出始めています。

そういう意味でHTML5は今最も活気のある、将来が期待されるプラットフォームであると言えます。

Window8も本格的にHTML5に対応するし、これからしばらくはHTML5が主流化する波が続きそうです。

取材・ショーヤマ
文・ショーヤマ/shi3z

 

ポーランドこぼれ話

ポーランドの食事は正直言って我々日本人にはちょっとキツいものが多かったです。
到着した日の夜にホテルのレストランで頼んだ「ポーランド伝統のスープZurek」は、しょっぱすぎて飲めませんでした。

あまりのしょっぱさに、人生で初めて、ウェイターさんに「これ味見してみてください」って言いたくなりましたが、もしかしたらこれが本場の味というものかもしれず、悶々としているうちにスープが冷めてしまいました。

翌日からはもうポーランド料理でなんとか美味しいものはないか探す旅の始まりでしたね。
しかしことごとく失敗しました。

中でも寿司は・・・なにか寿司っぽい形をした別の食べ物という感じでした。

コレだけ見ると楽しくて美味しそうなんですけど、信じられないくらい砂糖が入っていて、「マグロ入りアボカドケーキ」を食べているような気分でした。もう完全にグロッキー状態。

いろいろと有名なレストランガイドをもとになんとか「おいしい料理はないか」探したのですが、欧米人の好む味覚と日本人の味覚は根本的なところで乖離があるようでした。

意外と屋台のソーセージとかピエロギ(ポーランド風餃子)が美味かったです。

で、最も美味かったのは最終日に行ったポッド・ギガンタミというお店。
発音しにくいですね

とっても美味しかったです。
このお店、結局「地球の歩き方」で紹介されていたお店でした。
下手にレストランガイドに頼るよりも観光ガイドブックに乗っているお店の方が日本人の口には合いますね。

勉強になりました。

このエントリーをはてなブックマークに追加
はてなブックマーク - onGameStartで見えてきたHTML5+ゲーム技術の最新トレンドまとめ
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.js用マップエディタenchantMapEditorが大幅にパワーアップ!
  2. 世界初!のHTML5ゲームカンファレンス onGameStart 講演まとめ
  3. [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!
  4. 9leap Camp@Tokyoレポート:4時間でスマートフォン対応のHTML5ゲームをゼロから創ってみる
  5. Canvasで3Dワイヤーフレームに挑戦!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*