More Related Content
Similar to Osakijs #01 「enchant.jsハンズオン資料」 (20)
More from Yusuke HIDESHIMA (11)
Osakijs #01 「enchant.jsハンズオン資料」
- 9. ひな形の中身
enchant.js本体
便利な画像たち
プログラムを
書くファイル
- 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;
};
ちょっと省略しましたよ
- 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移動する処理
- 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();
};
- 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();
};
- 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 で座標を取得できます