Search code examples
jqueryimagebitmapeaseljs

bitmaps are not appearing on stage (easeljs)


So I'm using easeljs and I have a bunch of images i'm going to recycle. For some reason whenever I try to add them to the stage stage.update() no longer works. (I used an alert to test this so it could just be going really slow like 2 hours to load slow).

I'm not sure what's going on. It's not the stage or that the images aren't loaded. Any ideas? **edited ` //variables var $canvas = $("canvas"); //to call the canvas var stage = new createjs.Stage("c"); var queue = new createjs.LoadQueue(); var n = 10; //it will be a 10x10 board var cw = 50;//each cell will be 50px wide var x, y; var moves = 0; var rows = []; //will be an array of arrays var pieces = []; //will be the image array of arrays

//preloadjs images
//queue.installPlugin(stage); //don't think i need this
queue.on("complete", handleComplete, this);
queue.loadManifest([
    {id:"imgA", src:'DNA/a.png'},
    {id:"imgC", src:'DNA/c.png'},
    {id:"imgG", src:'DNA/g.png'},
    {id:"imgT", src:'DNA/t.png'},
    {id:"imgX", src:'DNA/x.png'}
]);

function handleComplete(){
    var image = queue.getResult("imgA");

    var pic =  new createjs.Bitmap(image);
        pic.y = 5;
        pic.x = 5;
    stage.addChild(pic);
    stage.update();
}

**still not working and I have added preloadJS to my collection of libraries

Everything is sourced correctly, but it's still not working? I have the stage declared and it says that it's not crashing so i'm not sure what the problem is?


Solution

  • The text is being draw?

    • If yes: your images are in an invalid location; or, you are trying to use the images before the loading (in this case, your preload is incorrect).
    • If not: you are using an invalid name to the canvas (take a look at the line that you are creating the stage, compare with the id of the canvas).

    Some other notes:

    • You can use PreloadJS to preload your assets, there is no need to implement this from scratch.
    • There is no need to call "stage.clear", "stage.removeAllChildren" and "stage.update" at the beggining, the stage is already empty.
    • You just need to call "stage.update" once, after all changes in the stage or the children objects. As you've done, you are forcing the stage to draw several times before a single canvas draw.