CODEWITHSUNDEEP
javascriptcanvashtml5-canvaseaseljscreatejs
AKG
AKG

Reputation: 3286

How to reference image preloaded in PreloadJS

I'm preloading my images using PreloadJS, and after that outputting them as children of a container within the HTML5 Canvas (none will be DOM-accessible). What I would like to know now is how I can retrieve these bitmaps later on?

var preload = new createjs.LoadQueue(true, 'img/');
var manifest = [
    {src: 'fred.png', id: 'pri', type: 'sprite', x: 400, y: 500},
    {src: 'banana.png', id: 'door', type: 'sprite', x: 300, y: 500},
]
preload.addEventListener('progress', handleProgress);
preload.addEventListener('complete', handleComplete);
preload.addEventListener('fileload', handleFileLoad);
preload.loadManifest(manifest);

var image = [];
function handleProgress(event) {

}
function handleComplete(event) {
    for(var i = 0; i < image.length; i++) {
        var item = image[i];
        bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y
        });
        world.addChild(bg);
    }
    canvas.update();    
}
function handleFileLoad(event) {
    image.push(event.item);
}

Things I've tried that don't work preload.getItem('door').visible = false; preload.getResult('door').visible = false; preload.getResult('door', true).visible = false;

I had assumed that I could reference the instances this way and alter their values. Is it something that I should add in the preload segment or am I referencing the images in a wrong way? If I do a console.log(preload.getResult('door')), I get a lot of weird characters, which I think is an image file being parsed (?)

Another way could be by setting the id as a property in the preloading bit, so that I can later access it through bg[0] or bg[1] etc, but I suppose there must be a method already built into PreloadJS for me to do that.

bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y,
            id: item.id
});

Upvotes: 1

Views: 8797

Answers (2)

Olaf Horstmann
Olaf Horstmann

Reputation: 16882

You have to distinguish between preloaded Assets and actual createjs.Bitmaps - once you've created a createjs.Bitmap it has nothing to do with the preloader any more, by using preloadJS and an id, you can simply use the id WHENEVER you want to create a new bitmap:

//update: as Lanny pointed out correctly, first retrieve the image:
var image = preload.getResult("pri");
var myBitmap = new createjs.Bitmap(image);  //or use the url
// now "myBitmap" is the reference to that bitmap,
// and can be altered as you wish, alpha, visibility ect...

The step of creating a Bitmap for every loaded asset right away is not neccessary (unless you WANT to show every loaded image right away), PreloadJS will take care of all that. Also defining the x and y in the manifest will have to effect, PreloadJS is simply for loading, not for instanciating. The basic (very basic) workflow of using PreloadJS is:

  1. You create a queue
  2. You load the manifest
  3. You wait for the Complete-event (but only to kick of your other application code)
  4. You start with all your application code and use the Assets via ID to create the Bitmaps whenever you need them.

Upvotes: 2

Lanny
Lanny

Reputation: 11294

@Olsn's response is mostly correct. However you must pass im an image or a path to an image to any Bitmap. The ID is only useful for looking up the result from the LoadQueue (although its not a bad idea, maybe it should work that way)

var image = preload.getResult("pri");
var bitmap = new createjs.Bitmap(image);

As @olsn correctly mentioned, you don't have to wait for the image to load - you can also just pass in a path, and as long as you update the stage (either in a tick, or once the preload is complete), the image will be displayed.

Upvotes: 4

Related Questions