Correct implementation of a spritesheet with createJS library?

Question

I have seen about 10 different implementations of spritesheets in createJS. I have tried this a number of different ways, but can't get my spritesheet to appear on the stage. When investigating with Google Chrome tools, I see the sprite object created from the spritesheet in the object heirarchy, but I can't seem to get it to appear on stage no matter what I do.

Perhaps someone has done this before and sees where I am errant. Relevant code follows.

function handleBatLoad()
{
    var spriteSheet = new createjs.SpriteSheet({
            "images": [batImage],
            "frames": {"width": 170, "height": 142},
            "animations": { "flap": [0,5] }
    });

    animation = new createjs.Sprite(spriteSheet, "flap");
    animation.gotoAndPlay("flap");
    animation.x = 100;
    animation.y = 100;
    spriteSheet.getAnimation("flap").frequency = 2;
    spriteSheet.getAnimation("flap").next = "flap";
    animation.gotoAndPlay("flap");
    stage.addChild(animation);
    Ticker.setFPS(60);
    Ticker.addListener(stage);
    stage.update();
}

If seeing the full code would be helpful to you: https://github.com/mlassoff/30MinuteGame

Thanks in advance.

Answer 1

I tested your code and found what is your bug after some debug: your image height in the spritesheet is too high. You set 142px as height, but your PNG image is 117px. If you change it the image will display. It seems that createjs crash if you give a sprite height greater than image.

BTW you also have errors here :

Ticker.setFPS(60);
Ticker.addListener(stage);

You need to change this for

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(stage);

I see a lot of code you should change:

• You should load your batSpritesheet.png image with preloadjs (as you do for your other assets)

• Your code in handleMouseMove will crash your application: you add a child a the stage and refresh your stage every time your mouse move, it's bad. You only need to add your crossHair image one time when your game is loading, and then you change it's position onmousemove, and display the play with the Ticker

Anyway I did some refacto of your code, compare it with your actual code to understand why I did this, and have fun in your game development, HTML5 and createjs are really funny to play with :D

var context;
var queue;
var WIDTH = 1024;
var HEIGHT = 768;
var mouseXPosition;
var mouseYPosition;
var batImage;
var stage;
var animation;
var crossHair;

window.onload = function()
{
    /*
     *      Set up the Canvas with Size and height
     *
     */
    var canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
    context.canvas.width = WIDTH;
    context.canvas.height = HEIGHT;
    stage = new createjs.Stage("myCanvas");

    /*
     *      Set up the Asset Queue and load sounds
     *
     */
    queue = new createjs.LoadQueue(false);
    queue.installPlugin(createjs.Sound);
    queue.on("complete", queueLoaded, this);
    createjs.Sound.alternateExtensions = ["ogg"];

    queue.loadManifest([
        {id: 'backgroundImage', src: 'assets/background.png'},
        {id: 'crossHair', src: 'assets/crosshair.png'},
        {id: 'shot', src: 'assets/shot.mp3'},
        {id: 'background', src: 'assets/countryside.mp3'},
        {id: 'batSpritesheet', src: 'assets/batSpritesheet.png'},
    ]);
    queue.load();
}

function queueLoaded(event)
{
    // Add background image
    var backgroundImage = new createjs.Bitmap(queue.getResult("backgroundImage"))
    stage.addChild(backgroundImage);

    // Play background sound
    createjs.Sound.play("background", {loop: -1});

    // Create bat spritesheet
    var spriteSheet = new createjs.SpriteSheet({
        "images": [queue.getResult('batSpritesheet')],
        "frames": {"width": 198, "height": 117},
        "animations": { "flap": [0,4] }
    });

    // Create bat sprite
    animation = new createjs.Sprite(spriteSheet, "flap");
    animation.x = 100;
    animation.y = 100;
    animation.gotoAndPlay("flap");
    stage.addChild(animation);

    // Create crosshair
    crossHair = new createjs.Bitmap(queue.getResult("crossHair"));
    stage.addChild(crossHair);

    // Add ticker
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener('tick', stage);

    // Set up events AFTER the game is loaded
    window.onmousemove = handleMouseMove;
    window.onmousedown = handleMouseDown;
}

function handleMouseMove(event)
{
    crossHair.x = event.clientX-45;
    crossHair.y = event.clientY-45;
}

function handleMouseDown(event)
{
    createjs.Sound.play("shot");
}