Блог

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

Итак, я пытаюсь переделать что-то вроде Space Invaders в canvas. Пока это не так много, просто плательщик перемещается слева направо. Смотрите прогресс здесь:http://jansensan.net/experiments/easeljs-space-invader /

Для захватчиков мне нужна была анимация, поэтому я следовал руководству о том, как это сделать:http://www.youtube.com/watch?v=HaJ615V6qLk

Теперь все хорошо, однако я следую gskinner.com способ создания «классов»:http://easeljs.com/examples/game/Ship.js Я не уверен, могу ли я назвать это классом, но он используется как таковой.

Итак, ниже приведен класс, который я написал для захватчика, однако похоже, что 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));
  

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