このページの本文へ

NHN Japanの勉強会に行ってみた

Flash→HTML5移植は本当か? ハンゲームの事例

2011年04月27日 11時00分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5(+JavaScript)で置き換えた、なんて話は(少なくとも日本では)ほとんど聞かない。本当にFlashコンテンツをHTML5で(しかも商用レベルで)置き換えられるのだろうか?

 そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」(2月25日開催)に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。

NHN主催のHTML5勉強会の様子。同社オフィス内にある、広々としたカフェで開かれた

Flashをプロトタイピングに利用、Canvasでアニメーションを実装

 「FlashからCanvasへの移植は正直、とても大変だった」。NHN Japan UIT室Mobile UIチームの野津手 昌美さんは、シミュレーションゲーム「激闘!戦国絵巻」の開発をこう振り返った。

野津手昌美さん

 野津手さんが手掛けた「激闘!戦国絵巻」は、もともとは携帯電話(フィーチャーフォン)向けのミニゲームアプリ。携帯電話版ではフロントエンドをFlash Liteで実装していたが、スマートフォンへの移植にあたってはHTML5を採用した。最近ではFlash Playerを搭載するAndroid端末も多いが、「iPhoneとAndroidの両方に対応することを考えると、HTML5が効率的」と判断。iPhone/Android版ともに外枠だけをネイティブアプリとして用意し、表示するゲームコンテンツそのものはHTMLを表示することで開発コストを下げた。

 携帯電話版でFlash Liteが担っていたアニメーション処理は、HTML5のCanvasを使って実装した。CanvasはJavaScriptでビットマップ画像を描画するAPIで、今回のゲームでは背景画像を表示したCanvas上にキャラクター画像をタイムラインに沿って配置する処理を繰り返してアニメーションに見せている。「Flashをプロトタイピングとして使い、実際のアニメーションの動きを見ながらコードを考えた」(野津手さん)という。


 HTML5を使った本格的なゲーム開発のノウハウはまだ少ないことから、開発にあたっては苦労も多かったようだ。APIが標準化されているとはいえ、環境によってレンダリング結果には違いがあり、Android OSの同一バージョンでも端末によって「透明効果が効かない」「画像がぼやける」などの細かな問題が発生したという。結局、国内で販売されているAndroid端末すべてで検証した結果、端末ごとに処理を書き分け、「ゲームの進行に直接関係ない違いはある程度割り切る」ことで乗り切った。

 野津手さんは「手軽にアニメーションを作れるツールがない、ライブラリーが少ないなど、現状、CanvasはFlashに比べてマイナスの要素が多い」と話す一方、「時間が経てば解決できる要素も多い」と話す。「これからもHTML5/Canvasを使ったゲームを積極的に世に送り出していきたい」(野津手さん)。

 HTML5とともに話題に上ることも多い「CSS3」についても、NHN Japanは採用を進めようとしている。Mobile UIチームの馬場宣孝さんは昨年、スマートフォン版の「対戦リバーシ」で、CSS3を使って石を描画・アニメーションさせるプロトタイプを作成した。ユーザーテストまで漕ぎつけたものの、テストの結果、ゲームが進むにつれて十分なパフォーマンスが得られないことが分かり、最終的にはJavaScriptと画像を使うことに。「スマートフォンではどこでJavaScriptを使うか、CSS3を使うか、見極めが重要。3か月から半年に一度は技術を見直していきたい」(馬場さん)という。

NHN HTML5勉強会 CSS3アニメーション
View more presentations from nhn_hangame

 勉強会ではこのほか、実験中のプロジェクトとして、WebSocketを使ったリアルタイムコミュニケーションサービスのデモも紹介された。勉強会を主催したNHN JapanでもHTML5やCSS3を使ったゲーム開発はまだ試行錯誤の段階で、必ずしもFlashゲームをそのまますべて置き換えるような状況というわけではない。だが、スマートフォンの普及、特にiOSとAndroidのクロスプラットフォーム開発を考えると、同社のようにHTML5+JavaScript/CSS3を積極的に採用する動きが今後、ゲーム業界でも加速しそうだ。

カテゴリートップへ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング