大人気のHTML5+JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく
「enchant.js」とは、ユビキタスエンターテインメント(UEI)が2011年4月にリリースした、HTML5+JavaScriptベースのゲームエンジンです。enchant.jsはオープンソースでGitHubでソースコードを公開しています。ライセンスは、MITライセンス/GPL2のデュアルライセンスです。もともとはプログラミング学習を目的として開発されましたが、現在では世界中で多く利用されているHTML5向けゲームエンジンとなりました(2012年6月UEI調べ)。
実際に活用された事例としては、サントリータウンの会員コンテンツであるFlashミニゲームが、enchant.jsを用いてHTML+JavaScriptに組み直されました。これはiPhoneなどのFlash非対応端末からでも楽しめるようにするためです。サントリータウンはPCからアクセスするとFlash版が、スマートフォンからアクセスするとenchant.js版が遊べます。Flash版のゲームと同程度のゲーム性を保ったまま移植ができているのではないでしょうか。
本連載では、このenchant.jsを使って、モバイル向けの簡単なゲームからやや複雑なゲームの作り方まで解説していきます。
enchant.jsで作られたゲームはいわゆる「ブラウザゲーム」と呼ばれる、Webブラウザ上で遊ぶゲームです。HTMLが表示でき、JavaScriptが動くWebブラウザが搭載されていれば、PCでも、スマートフォンでも遊べます。
これはenchant.jsだけではなく、HTML+JavaScriptで作られたゲームならいえる特徴ですが、enchant.jsはあらかじめ多くのWebブラウザで動作しやすいように考慮して設計されているため、特に意識することなく開発できるところにメリットがあります。
ゲーム用ライブラリとされるだけあり、豊富なゲーム向けの機能も魅力です。開発元であるUEIがフリー素材として画像(キャラクター、ボタン、マップなど)を配布しているほか、十字キー/アナログパッド/ボタンのUI部品用ライブラリなど、開発をより手軽にするためのさまざまなプラグインが、あらかじめ用意されています。
また、プラグインはユーザー自身で開発したものが配布されていたりするので、必要に応じて探してみるのもいいでしょう。下記にその一部を記します。
■公式提供プラグイン
これらのプラグインは冒頭で紹介したサントリータウンでも利用しています。
■サードパーティープラグイン
プラグインのダウンロード先としては、以下があります。
これらをうまく活用すると開発スピードが格段に違ってきますので、enchant.jsを採用する決め手の1つになるのではないでしょうか。
原稿執筆時のenchant.jsのバージョンであるver0.5.x系までですが、ゲームライブラリとしては珍しく、HTMLそのものつまりDocument Object Model(DOM)を主に利用するように構成されています(先日発表された0.6.x系以降はHTML5のCanvasメインに移行しました)。
HTML自体の機能や、CSS、DOMベースの他のJavaScriptライブラリと相性が良く、部分的にCSS3のアニメーション機能を利用したり、enchant.jsで作成した部品にjQueryの処理を与えるなど、目的に応じて柔軟に対応可能です。
冒頭で紹介したサントリータウンのゲーム開発においても部分的にCSS3やjQueryを利用していますが、具体的な部分や利用方法については今後、サンプルを用いたゲーム開発で説明する予定です。
これまでは、ほぼすべてのオブジェクトを<div>要素に描画していましたが、0.6からはそれらをデフォルトでCanvasに描画するようになりました。これにより、PCブラウザにおけるパフォーマンスは向上しましたが、Android 4.1の標準ブラウザによる描画に不具合が出ているようですので、モバイル向けのゲームを作る際はまだ0.5.2以前のバージョンを利用した方が良いでしょう。
これまで「tl.enchant.js」と呼ばれていたアニメーション用プラグインがenchant.js本体に統合されています。大変汎用的に使える便利な機能ですが、統合に伴い、enchant.js本体の容量が増加しています。
その他にもいくつか変更がありますので、こちらをご参照ください。
Copyright © ITmedia, Inc. All Rights Reserved.