CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

今回のテーマは「HTML5+ゲーム」でした。
ゲームのお題は人気だったらしく定員100人のところに200人以上の方が応募されていました。

アジェンダ:
「Smartphone 向け HTML5 ゲームの作り方」 株式会社ディー・エヌ・エー 城戸氏 (@sou
「アメーバピグのスマフォ化」 サイバーエージェント dating ariane pictures 原一成氏(@herablog)
「HTML5 ゲームと WebUI アーキテクチャ」 グリー 米川氏(@yonekawa
「JSクイズゲームの作り方(HTML5実力テストの紹介)」 面白法人カヤック 吾郷氏(@kyo_ago
「あなたを”魅了する”開発環境 enchant.js / enchant PRO 」 株式会社ユビキタスエンターテインメント 伏見氏(@sidestepism

今回は、ディー・エヌ・エーやグリーなどのソーシャルゲーム開発に利用されているHTML5の紹介や、JavaScriptでゲーム開発を行う為の和製ゲームエンジンについての紹介などがありました。

ゲーム開発に利用されているHTML5/CSS3関連技術

まずは、ゲーム開発に利用されているHTML5/CSS3について。

Canvas

Flashを利用できないスマートフォン環境で、ビジュアル表現を行う為には必ず利用されるCanvasは欠かせないHTML5の技術です。

各社Canvasをフルに利用されていました。

plus size dating

ディー・エヌ・エーの場合

ディー・エヌ・エーさんでは、独自にCanvas用ライブラリ(Arctic.js)を開発し、利用されています。現在は非公開ですが、近々公開されるそうです。また、Flashが利用出来ない環境でも、Flashが実行出来るようにExGameというSWF用ライブラリも開発されています。

モバゲーの様々なゲームがスマホ対応済み

サイバーエージェントの場合

サイバーエージェントさんでは、AI2Canvasを利用して、IllustratorのデータをCanvas用のデータに変換して利用されています。

アメーバピグのスマートフォン対応でCanvasを利用

sound of singles racing

グリーの場合

グリーさんでは、FlashをCanvasに変換するライブラリ(Reel)を開発されています。

FlashをCanvasに変換するReel

まとめ

ディー・エヌ・エーさん、グリーさんは、それぞれモバイルから展開されている為、Flashで作られたゲームが多く、それを再利用するために、スマートフォンでもSWFを利用出来るようCanvasを使ったライブラリを開発されていて
サイバーエージェントさんは、データ容量を圧縮する為にCanvasを利用されているようです。

http://polaindy.com/consumer-reports-web-cams-and-owhj/

CSS Animation/CSS Transition

これもまた、Flashが利用できないスマートフォン環境で、アニメーションを作る際に利用されるCSS3の技術です。

Canvas上でアニメーションも可能ですが、描画に時間が掛かってしまうので、Canvas自体をアニメーションさせたり、複数要素のアニメーションを管理するライブラリを開発されたり。各社工夫しながら利用されているようです。

JavaScriptゲームエンジンenchant.js

続いて、enchant.jsについて。

enchant.jsとは


enchant.jsは、様々な環境で動作するクロスプラットフォームのゲームを開発することが可能な、HTML5とJavaScriptで作られたゲームエンジン。
開発は、日本企業のユビキタスエンターテインメントさんが行なっており、リリースから2ヶ月で200本以上のゲームがenchant.jsを使って作られているそうです。

こういったライブラリは、大体が英語圏で作られていますが、これは和製で、日本語ドキュメントが充実しています。
日本のエンジニアさんには嬉しいライブラリではないでしょうか。

どんなことが出来るのか

enchant.jsで作られたゲームは、9leapで遊ぶことが出来ます。

SQUARE RACING

レースゲーム「SQUARE RACING」

フルーツパニック

パズルゲーム「フルーツパニック」

Speed glide

アクションゲーム「Speed glide」

2Dがメインですが、3Dのゲームも作ることが出来ます。
また、ノベル系のゲームも作れるそうです。

今回はご紹介だけ、機会があれば実際にサンプルを作って公開します!

まとめ

今回のHTML5とか勉強会は、HTML5+ゲームがテーマでした。
Webの技術HTML5がゲームで利用されている。
なんだか不思議な感じですが、HTML5の可能性を再認識した勉強会でした。

ゲームやアプリじゃない、普通のWebサイトでHTML5の技術がどれぐらい利用できるのでしょうか。その辺りの勉強会もあったらいいなぁと思いながら、第22回を楽しみに待っています。

Subscribe:
pagetop