Spritesheet + image preloading in Manifest

Question

I have created an external manifest file which contains a list of all assets to preload. Example:

{
 "path":"assets/",
 "manifest": [
  {"id":"background", "src":"images/game-background.jpg"},
  {"id":"ui-elements-json", "src":"images/ui-elements.json"}
  
 ]
}

ui-elements-json is a sprite sheet created in TexturePacker containing various UI elements. My problem is that the actual image is NOT loaded until I create the spritesheet with:

var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json'));

Which means that it's not being preloaded. At least I cannot see it being loaded in my developer panel. I can manually add the image to the Manifest file like so:

{"id":"ui-elements", "src":"assets/images/ui-elements.png"}

But it's almost as if the image then gets loaded twice and I begin getting some performance issues. If I add "type":"spritesheet" in my Manifest I can see that the image now preloads which is great, but when I create the Sprite Sheet I get the following error:

"Uncaught TypeError: Cannot read property 'slice' of undefined"

Here is a simplified version of my sprite sheet json. As far as I can see it's formatted correctly.

{
    "images": ["assets/images/ui-elements.png"],
    "frames": [
        [511, 2, 1378, 46], 
        [797, 755, 133, 128], 
        [871, 885, 133, 128], 
        [564, 132, 133, 128]

    ],
    "animations": {
            "ui-Infobar":[0], 
            "ui-autospin-down":[1], 
            "ui-autospin-hover":[2], 
            "ui-autospin":[3]
    }
}

I just need to make sure that my sprite sheet image is prealoded.

Lanny · Answer 1 · 2015-05-27T15:15:35.800

2

The latest version of PreloadJS has a SpriteSheetLoader class, which will do internal preloading of the associated images before it is considered complete. Just add {"type": "spritesheet"} to the JSON in your manifest. This also has the benefit of constructing a SpriteSheet instance for you, which you get when you request the item from the queue.

{
    "path":"assets/",
    "manifest": [
        {"id":"background", "src":"images/game-background.jpg"},
        {"id":"ui-elements-json", "src":"images/ui-elements.json", "type":"spritesheet"}

    ]
}

Then to use the SpriteSheet:

var ss = preloadjs.getResult("ui-elements-json");
var sprite = new createjs.Sprite(ss);

The reason you might be seeing a duplicate load is because PreloadJS will load images using XHR by default, but the SpriteSheet class will use a tag-loading approach internally, because it is simpler.

You can also do what @derz suggested, and preload the image earlier in the queue.

edited May 27 '15 at 15:15

answered May 26 '15 at 21:14

Lanny

11,244
1
22
30

Thanks for the reply. I actually did try using SpriteSheetLoader, but when I create the new spritesheet i get the following error: ""Uncaught TypeError: Cannot read property 'slice' of undefined" – cds May 27 '15 at 12:13
You don't have to create a new SpriteSheet as mentioned by @Lanny. Just do something like: `preload.queue.getResult('ui-elements-json')` which will already return a `SpriteSheet` instance. – derz May 27 '15 at 13:18
Like this right? var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json')); That's what I am doing now. Ugh - just having so many issues on mobile with framerate/performance and I cannot seem to determine the cause. Even though I preload the images for the sprite sheet I also still need to check to a "complete" event before I can cache the Containers in which I attached my assets. – cds May 27 '15 at 14:34
I added a sample to the above answer to show the usage. As @derz said, PreloadJS will construct a SpriteSheet instance for you. – Lanny May 27 '15 at 15:16
Much appreciated. That is actually exactly what I am doing. However even though I preload the images there still is a "delay" when creating a new sprite sheet instance. So what I have done now is after creating my instances (I have multiple sprite sheets) I check for their complete events and then proceed adding my assets to the stage. That seems have helped. – cds May 27 '15 at 15:25
The SpriteSheetLoader was created to address that problem. You don't include the images in your queue, and let the Loader preload them (it uses an internal LoadQueue). Once the SpriteSheet is ready, the images should be too. There is a sample in GitHub showing this usage. – Lanny May 27 '15 at 16:25

derz · Answer 2 · 2015-05-27T06:50:46.803

Instead of preload your JSON File you could preload the sprite:

{"id":"ui-elements-sprite", "src":"assets/images/ui-elements.png"}

Afterwards you can use it in your Sprite-Config Object:

"images": [preload.queue.getResult('ui-elements-sprite')]

Keep in mind that it shouldn't be that big of a deal if the same image gets loaded twice - the second time its loaded from cache, so no real performance issue.

Otherwise you could also use the SpriteSheetLoader. Check the docs here: http://createjs.com/Docs/PreloadJS/classes/SpriteSheetLoader.html or the example over here: https://github.com/CreateJS/PreloadJS/blob/master/examples/SpriteSheet.html

Spritesheet + image preloading in Manifest

2 Answers2