enchant.jsを使ったゲーム作り実習をやったので、その時のメモを公開。
jsdo.it で作ると、スマフォで動かすのが楽。
ちなみに私はスマフォ用に「シュシュっと手裏剣」を作りました。
(1) jsdo.it でアカウントを作る
http://jsdo.it/ で好きなサービスを使ってログイン。アカウント名はログイン後に決める。
(2) Hello World
画面に文字を表示しよう! by shi3z – code.9leap.net
http://code.9leap.net/codes/show/203
をコピペして動かしてみる。
手順:
1. Start coding を押下。
2. JavaScript タブを選択。
3. + Add Library を押下。
Major Library から enchant.js v0.6.2 – js を選択し、Add ボタンを押下。
4. 9leapのサンプルから main.js をコピペ。
5. Save ボタンを押下。実行結果を確認。
もし正しく動作しない場合は、JavaScript コンソールを確認。
(3) Start 画面追加
jsdo.it 上の別コードをインポートして、Start 画面を表示してみる。
手順:
1. JavaScript タブを選択。
2. + Add Library を押下。
Input URL に 9leap / nineleap.enchant を入力し、Add ボタンを押下。
3. ソースコードを修正。
// game = new Game();
game = new enchant.nineleap.Game();
(4) 画像を表示
スプライトを表示しよう by shi3z – code.9leap.net
http://code.9leap.net/codes/show/202
をコピペ＋修正して動かしてみる。画像ファイルのURLを指定する必要がある。
使える素材は
Image Materials | enchant.js – A simple JavaScript framework for creating games and apps.
http://enchantjs.com/ja/image-materials/
を参照。商用利用でなければ、画像を改変して使うのも自由 (by @enchantjs_jaさん)。
手順:
1.
// var game = new Game(320, 320);
var game = new enchant.nineleap.Game(320, 320);
2.
// game.preload(‘chara1.gif’); // chara1.gifを読み込む
var chara1 = ‘http://enchantjs.com/images/materials/chara1.png’;
game.preload(chara1); // chara1.gifを読み込む
3.
// bear.image = game.assets[‘chara1.gif’]; // chara1.gifの中にある
bear.image = game.assets[chara1]; // chara1.gifの中にある
(5) 操作パッド
十字キーは Pad, アナログの操作キーは APad。
ソースコードは http://jsdo.it/takatama/Tn9F/ を参照のこと。
手順:
1. JavaScript タブを選択。
2. + Add Library を押下。
Input URL に 9leap / ui.enchant と入力し Add ボタンを押下。
3. ソースコードを入力。
var pad = new enchant.ui.Pad();
pad.moveTo(10, 220);
game.rootScene.addChild(pad);
bear.addEventListener('enterframe', function () {
var input = game.input;
//キーに応じて移動
if (input.left) {
this.x -= 4;
}
if (input.right) {
this.x += 4;
}
if (input.up) {
this.y -= 4;
}
if (input.down) {
this.y += 4;
}
if (game.frame %4 === 0) {
this.frame = 2- this.frame;
}
});
var apad = new enchant.ui.APad();
apad.moveTo(120, 220);
game.rootScene.addChild(apad);
bear.addEventListener('enterframe', function () {
if (apad.isTouched) {
this.x += apad.vx*4;
this.y += apad.vy*4;
}
});
(6) スマフォで操作する
URLを jsdo.it から jsrun.it に変更して、スマフォのブラウザーからアクセス。
例えば http://jsdo.it/takatama/Tn9F/ なら http://jsrun.it/takatama/Tn9F/ にすればよい。
(7) End画面を追加
上記(3)でStart画面を追加済みなら、ゲーム終了時に、game.end(score, message); を呼び出せば良い。
(8) Clear画面を追加
ちょっとした工夫が必要。Gameをnewする前後にソースコードを追記する。
enchant.nineleap.assets.push('http://wise9.github.com/enchant.js/images/clear.png');
var game = new enchant.nineleap.Game();
game.clear = function(score, message) {
this.endScene = new SplashScene();
this.endScene.image = this.assets['http://wise9.github.com/enchant.js/images/clear.png'];
this.end(score, message);
};
3-6-4 力をためる、をベースに作ったコードを jsdo.it で公開してみた。
@takatama_jp 
