第一回 Osaki.js の enchant.js ハンズオンの資料です。 超初歩の初歩。 http://osakijs.blogspot.jp/

1. Osaki.js #1
enchant.js Hands On
@hidesuke

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

3. なになに？ ENCHANT.JS

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

6. enchant.js とは
• http://enchantjs.com/
• ユビキタスエンターテインメント社が
作ったゲーム制作用JavaScriptライブラリ
• ブラウザで簡単にゲームがつくれる
• HTML5ベース
• iPhone, iPad, Androidでも動く

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

8. 準備
• HTML5がきもちよく動くブラウザ
(Chrome or Safari)
• お気に入りのエディタ
(わたしはVim派)
• ひな形
http://dl.dropbox.com/u/31504376/201203
26_tempalte.zip

9. ひな形の中身
enchant.js本体
便利な画像たち
プログラムを
書くファイル

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

11. myFirstEnchant.js
enchant.js ロードが完了した
の初期化 ら最初に実行され
る
enchant();
window.onload = function() {
//ここにコードを書くですよ
};

12. ゲームオブ
ジェクトの作
製
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload(‘./images/chara1.gif’);
};
画像の読み込み
読み込むだけでまだ
表示はされない

13. enchant();
前処理！ window.onload = function() {
準備や設定！
var game = new Game(320, 320);
game.preload(‘./images/chara1.gif’);
game.onload = function() {
// メインの処理
};
};
メインの処理！
前処理が終わったら呼
び出される処理

14. スプライトの作
製
game.onload = function() {
var bear = new Sprite(32, 32);
bear.image = game.assets*‘./images/chara1.gif’+;
bear.frame = 4;
};
ちょっと省略しましたよ

15. スプライト？

16. Spriteとは
• 画像やグラフィックスを表示する描画オ
ブジェクト
• var bear = new Sprite(32, 32);
– (縦, 横) = (32px, 32px) のスプライトを用意
– 枠が用意されただけ。まだ何も描画されない

17. game.preload() で読み込んだ画像は、
game.assetsという配列に
パス名をキーにして保存されます
game.onload = function() {
var bear = new Sprite(32, 32);
bear.image = game.assets*‘./images/chara1.gif’+;
bear.frame = 4;
};
読み込んだ画像を
Spriteのimage属性に
指定してあげます。

18. game.onload = function() {
var bear = new Sprite(32, 32);
bear.image = game.assets*‘./images/chara1.gif’+;
bear.frame = 4;
};
32px
0 1 2 3 4
32px
こんなふうに番号
がふられるので、 5 6 7 8 9
Spriteのframe属性
に表示したい画像
の番号をいれたら 10 11 12 13 14

19. 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移動する処理

20. フレーム
• 動画は静止画の集合
(パラパラ漫画を思い出しましょう)
• その1枚のことをフレームと言います
• enchant.jsはデフォルトで1秒間30フレー
ムです(30fps)
• つまり1秒間に30回、画像が描画されます

21. 毎フレーム処理をするという指
Bearにイベントが発生した 定。
ときの処理を指定 他にもEvent.TOUCH_START とか
Event.TOUCH_MOVEとか指定できる
bear.addEventListener(Event.ENTER_FRAME, function(){
this.x += 3;
});
bearのx座標に3プラスする

22. 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に登録してあげる

23. 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();
};

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

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

27. JavaScript Tips – デバグする方法
だまってChromeつかっとけ

28. 右クリック！
要素の検証

30. enchant(); この行を加えて、index.html
Chromeで実行！
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();
};

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

32. 課題
• クマが画面の端についたら、折り返すよ
うにしてみましょう
• タップした方向にむかって、クマが進む
ようにしましょう
• なんかゲームっぽくしてみましょう（ぁ

33. ヒント：タップ判定
• 画面をタップした場所の座標を取得する
には
rootSceneにイベントリスナを設置
することで、画面のイベントを取
得する タッチされた瞬間に実行さ
れる
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 で座標を取得できます

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