CODEWITHSUNDEEP
javascripthtmlcanvas
jansensan
jansensan

Reputation: 627

EaselJS: BitmapSequence issue in a OOP-like class

I have been playing a bit with gskinner.com's EaselJS library (http://easeljs.com/, http://easeljs.com/examples/game/game.html), which makes dealing with HTML5's canvas a lot easier.

So I'm trying to remake something like Space Invaders in the canvas. So far it's not much, just the payer moving left to right. See the progress here: http://jansensan.net/experiments/easeljs-space-invader/

For the invaders, I needed an animation, so I followed a tutorial on how to do so: http://www.youtube.com/watch?v=HaJ615V6qLk

Now that is all good and dandy, however I follow gskinner.com's way of creating "classes": http://easeljs.com/examples/game/Ship.js I'm not certain if I can call that a class, but it is used as such.

So below is the class that I wrote for the Invader, however it seems like the BitmapSequence does not seem to be added to EaselJS's stage. Anyone can guide me through this? Thanks!

// 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));

Upvotes: 0

Views: 755

Answers (1)

David Gillen
David Gillen

Reputation: 56

Does you p.image/this.Container_initalize actually exist at that point? As you switch between using this. and p. between your init and other functions, while they might seem to be the same practice has often taught me its not the case. Try changing your init function to this:

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

Upvotes: 1

Related Questions