Osaki.js #1enchant.js Hands On

@hidesuke

今日やる内容

• なになに？ enchant.js• なんか動くゲームを作ってみよう• 好きなように拡張してみよう–次に何作るかをなんとなくかんがえよう

なになに？ ENCHANT.JS

enchant.js いまさら説明いらないですよね？

enchant.js とは

• http://enchantjs.com/• ユビキタスエンターテインメント社が

作ったゲーム制作用 JavaScript ライブラリ

• ブラウザで簡単にゲームがつくれる• HTML5 ベース• iPhone, iPad, Android でも動く

ごたくはいいから手をうごかしましょうか

準備

• HTML5 がきもちよく動くブラウザ(Chrome or Safari)

• お気に入りのエディタ( わたしは Vim 派 )

• ひな形http://dl.dropbox.com/u/31504376/20120326_tempalte.zip

便利な画像たち

プログラムを書くファイル

enchant.js 本体

ひな形の中身

まずは画像を表示してみよう！

myFirstEnchant.js

enchant();

window.onload = function() { // ここにコードを書くですよ};

enchant.jsの初期化

ロードが完了したら最初に実行される

enchant();

window.onload = function() {var game = new Game(320, 320);

game.preload(‘./images/chara1.gif’);};

ゲームオブジェクトの作製

画像の読み込み読み込むだけでまだ表示はされない

enchant();

window.onload = function() {var game = new Game(320, 320);game.preload(‘./images/chara1.gif’);

game.onload = function() {// メインの処理

};};

前処理！準備や設定！

メインの処理！前処理が終わったら呼び出される処理

game.onload = function() {var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];bear.frame = 4;

};ちょっと省略しましたよ

スプライトの作製

スプライト？

Sprite とは

• 画像やグラフィックスを表示する描画オブジェクト

• var bear = new Sprite(32, 32);– ( 縦 , 横 ) = (32px, 32px) のスプライトを

用意–枠が用意されただけ。まだ何も描画されない

game.onload = function() {var bear = new Sprite(32, 32);

bear.image = game.assets[‘./images/chara1.gif’];

bear.frame = 4;};

game.preload() で読み込んだ画像は、game.assets という配列にパス名をキーにして保存されます

読み込んだ画像をSprite の image 属性に指定してあげます。

game.onload = function() {var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];

bear.frame = 4;};

32px

32px 0 1 2 3 4

5 6 7 8 9

10 11 12 13 14

こんなふうに番号がふられるので、Sprite の frame 属性に表示したい画像の番号をいれたら

game.onload = function() {var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];bear.frame = 4;

bear.addEventListener(Event.ENTER_FRAME, function(){this.x += 3;

});};

毎フレーム実行される処理を書く。この例では、 bear スプライトを毎フレーム 3px 移動する処理

フレーム

• 動画は静止画の集合( パラパラ漫画を思い出しましょう )

• その 1 枚のことをフレームと言います• enchant.js はデフォルトで 1 秒間 30 フ

レームです (30fps)• つまり 1 秒間に 30 回、画像が描画され

ます

bear.addEventListener(Event.ENTER_FRAME, function(){this.x += 3;

});

毎フレーム処理をするという指定。他にも Event.TOUCH_START とか Event.TOUCH_MOVE とか指定できる

bear の x 座標に 3 プラスする

Bear にイベントが発生したときの処理を指定

game.onload = function() {var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];bear.frame = 4;bear.addEventListener(Event.ENTER_FRAME, function(){

this.x += 3;});

game.rootScene.addChild(bear);};

描画するものはすべて、 Scene に追加してあげないといけない。すべての親となるのが Game オブジェクトの rootSceneなので、描画したいもの (bear) を rootScene に登録してあげる

enchant();

window.onload = function() {var game = new Game(320, 320);game.preload(‘./images/chara1.gif’);

game.onload = function() {var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];bear.frame = 4;bear.addEventListener(Event.ENTER_FRAME, function(){

this.x += 3;});game.rootScene.addChild(bear);

};

game.start();};

ブラウザで index.html を開いてみよう！

クマがスケボーにのって移動してたら成功！

JavaScript Tips – デバグする方法

だまって Chrome つかっとけ

右クリック！

要素の検証

enchant();

window.onload = function() {var game = new Game(320, 320);game.preload(‘./images/chara1.gif’);

game.onload = function() {

console.log(“ 膝に矢を受けてしまってな” );var bear = new Sprite(32, 32);bear.image = game.assets[‘./images/chara1.gif’];bear.frame = 4;bear.addEventListener(Event.ENTER_FRAME, function(){

this.x += 3;});game.rootScene.addChild(bear);

};

game.start();};

この行を加えて、 index.htmlChrome で実行！

ログがでる！ここには、エラーメッセージも出力されます。また、簡単な JavaScript の実行もすることができます。

課題

• クマが画面の端についたら、折り返すようにしてみましょう

• タップした方向にむかって、クマが進むようにしましょう

• なんかゲームっぽくしてみましょう（ぁ

ヒント：タップ判定

• 画面をタップした場所の座標を取得するには

game.onload = function() {game.rootScene.addEventListener(Event.TOUCH_START, function(e){

console.log(“e.x = ” + e.x);console.log(“e.y = ” + e.y);

});};

e.x, e.y で座標を取得できます

rootScene にイベントリスナを設置することで、画面のイベントを取得する タッチされた瞬間に実行される

参考文献HTML5 と JavaScript でスマートフォンゲーム作成！ ゼロからはじめるenchant.js 入門【公式ガイド】http://www.amazon.co.jp/dp/4048862588/