EaselJS: проблема BitmapSequence в ООП-подобном классе

Question

Я немного поиграл с библиотекой EaselJS от gskinner.com (http://easeljs.com/, http://easeljs.com/examples/game/game.html),, которая значительно облегчает работу с холстом HTML5.

Так что я пытаюсь переделать что-то вроде Space Invaders на холсте. Пока что это немного, плательщик двигается слева направо. Смотрите прогресс здесь: 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 и другими функциями, в то время как они могут казаться одинаковыми, практика часто учит меня, что это не так. Попробуйте изменить функцию инициализации следующим образом:

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";
}