Monacaプラットフォームでenchant.jsを動かしてみます。
スマートフォンアプリを作って見ようと調べていると「HTML+Javascript」で開発できる環境「Monacaプラットフォーム」を見つけたので使ってみます。
Monacaとは、 アシアル株式会社 が開発、運営する、クラウドベースのスマートフォンアプリ（iPhoneやAndroidのネイティブアプリ）開発プラットフォームです。
Monaca環境の準備
・まずはユーザー登録をしてプロジェクトを作成します。
プロジェクトのテンプレートは「HelloWorldデモ」を選択します。
・AndroidアプリMonacaデバッガーをスマートフォンにインストールします。
・自動生成された「js」フォルダーに「enchant.js」を「img」フォルダーに 「droid.png」をアップロードします。
コーディング
・自動作成された「index.html」に以下の２行を追加します。
<script type="text/javascript" src="js/enchant.min.js"></script> <script type="text/javascript" src="js/game.js"></script>
・jsフォルダーに「game.js」を新規作成し以下のソースを入力します。
enchant() ; // ライブラリの初期化
window.onload = function()
{
var x = 1 ;
var y = -1 ;
//使用する画像のファイル名
var pic_name = “img/droid.png” ;
//320×240ピクセルサイズの画面(Canvas)を作成する
var game = new Game( 640, 480 ) ;
//フレームレートの設定する
game.fps = 140 ;
//画像データをあらかじめ読み込ませる
game.preload( pic_name ) ;
//データの読み込みが完了したら処理
game.onload = function(){
//Spriteを作成する
var droid = new Sprite( 32, 32 ) ;
droid.image = game.assets[ pic_name ] ;
droid.x = 20 ;
droid.y = game.height – droid.height ;
droid.scale( 4, 4 ) ; //画像ちょっと縮小
game.rootScene.addChild( droid ) ;
// フレームイベントが発生したら処理
droid.addEventListener( Event.ENTER_FRAME, function(){
// ドロイド君斜めに移動してみる
if( droid.y === 0 || droid.y < game.height - droid.height ){
y *= -1 ;
}
if( droid.x === 0 || droid.x < game.width - droid.width ){
x *= -1 ;
}
droid.y = droid.y + y ;
droid.x = droid.x + x ;
});
};
game.start() ; // ゲーム処理開始
};
[/javascript]
ファイルを保存して、スマートフォンのデバッガアプリから作成したプロジェクトを選択すると無事動作しました。
簡単に「enchant.js」のアプリがスマートフォンアプリにできました。
Spriteの動作がブラウザよりかなり遅い感じがします。
デバッガで動かしているからかも知れません。
