キャラクターの追加方法

今回のサンプル1
今回のサンプル2
サンプルの全ファイル
画面をタップするとタップした位置にキャラクターを追加する方法を解説。

普通に書くとこんなプログラムになります。しかし、 enchant.js の現在のバージョンではタイミングによっては一瞬、(0, 0)の位置に表示される様です。

enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bg.png', 'bear.gif');
    game.onload = function() {
    	var bg = new Sprite(320, 320);
	    bg.image = game.assets['bg.png'];
	   	bg.addEventListener('touchstart', function(e) {
	        var bear = new Sprite(20, 30);
	        bear.image = game.assets['bear.gif'];
	    	bear.x = e.localX - bear.width/2.0;
	    	bear.y = e.localY - bear.height/2.0;
	   	game.rootScene.addChild(bear);
	    });
	    game.rootScene.addChild(bg);
    };
    game.start();
};

(追記 2011/04/23)
修正されました。最新のバージョンでは「サンプル1」の記述方法でOKです。

キャラクターの追加時に一瞬、(0, 0)の位置に表示される不具合が修正 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110423/1303523292

(追記ここまで)

その為、フラグ firstHidden を準備し、初期状態では visible を false にして非表示にし、最初の enterframe のイベントの時に表示する様にしてみました。こちらの方法であれば綺麗にキャラクターが追加されました。
(今回のサンプル2)

enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bg.png', 'bear.gif');
    game.onload = function() {
        var bg = new Sprite(320, 320);
        bg.image = game.assets['bg.png'];
           bg.addEventListener('touchstart', function(e) {
            var bear = new Sprite(20, 30);
            bear.image = game.assets['bear.gif'];
            bear.x = e.localX - bear.width/2.0;
            bear.y = e.localY - bear.height/2.0;
            bear.image = game.assets['bear.gif'];
            bear.visible = false;
            bear.firstHidden = true;
               bear.addEventListener('enterframe', function(e) {
                   if (this.firstHidden) this.visible = true;
               });
               game.rootScene.addChild(bear);
        });
        game.rootScene.addChild(bg);
    };
    game.start();
};

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

キャラクターの追加方法

関連情報