EaselJS：OOPのようなクラスでのビットマップシーケンスの問題

Question

gskinner.comのEaselJSライブラリ（http://easeljs.com/、http://easeljs.com/examples/game/game.html）で少し演奏しています。これにより、HTML5のキャンバスをもっと簡単に扱うことができます。

私はキャンバスにスペースインベーダーのようなものを作り直そうとしています。これまでのところ、左から右へ動いているのはそれほどではありません。ここで進捗状況を参照してください：侵略のためにhttp://jansensan.net/experiments/easeljs-space-invader/

を、私はアニメーションを必要とするので、私はこれを行う方法のチュートリアルに従っ：http://www.youtube.com/watch?v=HaJ615V6qLk

は、今ではすべての良いとダンディです、しかし私はgskinner.comの道をたどります「クラス」の作成について：http://easeljs.com/examples/game/Ship.js私はそれをクラスと呼べるかどうかは分かりませんが、そのように使用されます。

以下は、Invaderのために書いたクラスですが、BitmapSequenceがEaselJSのステージに追加されていないようです。誰でもこれで私を導くことができますか？ありがとう！

// REFERENCES 
/* 
http://easeljs.com/examples/game/Ship.js 
*/ 


// CLASS 
(function(window) 
{ 
    function Invader() 
    { 
     this.initialize(); 
    } 


    var p = Invader.prototype = new Container(); 


    // CONSTANTS 


    // VARS 
    p.image; 
    p.bitmapSequence; 


    // CONSTRUCTOR 
    p.Container_initialize = p.initialize; //unique to avoid overiding base class 


    p.initialize = function() 
    { 
     this.Container_initialize(); 

     this.image = new Image(); 
     this.image.onload = p.imageLoadHandler; 
     this.image.onerror = p.imageErrorHandler; 
     this.image.src = "assets/images/invader-spritesheet.png"; 
    } 


    p.imageLoadHandler = function() 
    { 
     var frameData = { 
      anim:[0, 1, "anim"] 
     } 

     var spriteSheet = new SpriteSheet(p.image, 22, 16, frameData); 

     p.bitmapSequence = new BitmapSequence(spriteSheet); 
     p.bitmapSequence.regX = p.bitmapSequence.spriteSheet.frameWidth * 0.5; 
     p.bitmapSequence.regY = p.bitmapSequence.spriteSheet.frameHeight * 0.5; 
     p.bitmapSequence.gotoAndStop("anim"); 

     p.addChild(p.bitmapSequence); 
    } 


    p.imageErrorHandler = function() 
    { 
     console.log("Error: the url assets/images/invader-spritesheet.png could not be loaded."); 
    } 


    window.Invader = Invader; 
}(window)); 

Answer 1

実際にその時点でp.image/this.Container_initalizeは存在しますか？ this.とp.をinitと他の関数の間で切り替えると、同じ練習に見えるかもしれませんが、しばしば私にはそうではないことが教えられています。 init関数を次のように変更してみてください。

p.initialize = function() 
{ 
    p.Container_initialize(); 

    p.image = new Image(); 
    p.image.onload = p.imageLoadHandler; 
    p.image.onerror = p.imageErrorHandler; 
    p.image.src = "assets/images/invader-spritesheet.png"; 
}