SpriteSheet not using preloaded image

[TheJasonReynolds]

Hiya,

I believe something has changed in the new version the way SpriteSheet would use an image already downloaded with the preloader.

I'm loading up the json & png in my preloader nothing special:
{id: "myData", src:"yellow.json"},
{id: "mySheet", src:"yellow.png"},
this.preload.loadManifest(manifest, false, "assets/images/");

in the "yellow.json":
"images": ["assets/images/yellow.png"],

However, when on mobile (slower connection) or very large png's I'm experiencing a delay with them showing on the screen (would also explain how I was verifying the cache() being empty the other day).

When I'm making my spritesheet I use:
new createjs.SpriteSheet(preload.getResult("myData"));

It reminds me of they way it would behave in 0.7.1 if I did not load up the png using preloadjs first, however this is just an off the wall guess hoping you may know what's going on?

[lannymcnie]

While there were some big changes to how PreloadJS works, this behaviour should not have changed. Any delay you see when using a string path is expected, since the SpriteSheet can not display until the image has loaded. Using a preloaded image should draw the SpriteSheet immediately.

Note that PreloadJS 0.6.0 (released in December) has a SpriteSheetLoader, which automatically inspects the JSON data and preloads the required images first. This might simplify your application code.

[gskinner]

We will investigate this on the PreloadJS front (images from the cache). Closing here, since it's not EaselJS related.

[TheJasonReynolds]

I am using a preloaded image -- it's behaving like I'm not though (as I
said, it acts like 0.7 would when you didn't preload it and just let the
json do the loading all by itself).

I'm looking at your docs for SpriteSheetLoader -- is there an example?

On Wed, Feb 18, 2015 at 11:26 AM, Lanny McNie notifications@github.com
wrote:

While there were some big changes to how PreloadJS works, this behaviour
should not have changed. Any delay you see when using a string path is
expected, since the SpriteSheet can not display until the image has loaded.
Using a preloaded image should draw the SpriteSheet immediately.

Note that PreloadJS 0.6.0 (released in December) has a SpriteSheetLoader,
which automatically inspects the JSON data and preloads the required images
first. This might simplify your application code.

—
Reply to this email directly or view it on GitHub
#567 (comment).

[gskinner]

So, to clarify Lanny's answer: Because you are using a string source in your sprite sheet data, we need to create a new image and set its src. We then rely on the browser to return the image from the cache. It sounds like that isn't happening, likely because you are loading via XHR.

In the new version of PreloadJS, some things changed around how we load images in XHR. It does a better job if you are pulling images out using getResult, but the image doesn't wind up in the cache.

Using SpriteSheetLoader will fix this for you, because it injects the loaded images into the sprite sheet data.

[lannymcnie]

Yep, check out the SpriteSheet example in the PreloadJS GitHub.
https://github.com/CreateJS/PreloadJS/blob/master/examples/SpriteSheet.html

[TheJasonReynolds]

Actually I was messing with that trying to find a simple project to test
this out in, but that was using the NEXT versions of the lib so wasn't sure.

Is there more to it than simply adding ", type:"spritesheet" to the
manifest? That didn't fix it for me.

On Wed, Feb 18, 2015 at 11:37 AM, Lanny McNie notifications@github.com
wrote:

Yep, check out the SpriteSheet example in the PreloadJS GitHub.
https://github.com/CreateJS/PreloadJS/blob/master/examples/SpriteSheet.html

—
Reply to this email directly or view it on GitHub
#567 (comment).

[bmanderscheid]

This is related to my post earlier on what I thought was an issue with cache(). This SpriteSheetLoader sounds pretty necessary now. It seems like there should at least be a post on it to tell everyone about this.

[lannymcnie]

It isn't necessary, but it definitely makes things simpler. If you load the images using tag-loading, then the issue with caching should go away (the images in the SpriteSheet will load from the cache). Note that there will still be a short delay in this case, as an image still needs to be constructed behind the scenes, which usually takes a tick or two. With the SpriteSheetLoader, it will be available for drawing immediately.

[gskinner]

Yes. In brief, you only load the sprite sheet data JSON file, and let SpriteSheetLoader handle the image load internally. Then, use the SpriteSheet that is returned as the result.

@bmanderscheid agreed, we should communicate this better.

In 0.7.1, image loading via XHR was causing double loads. The XHR portion actually wasn't working correctly at all. It would load the image data, but then construct an image tag which triggered the image to load again. That second load was what actually wound up in the cache.

Now we are actually using the data from XHR correctly, but it doesn't play nicely with the cache.

Maybe we should evaluate adding a per-load flag for XHR to PreloadJS.

[TheJasonReynolds]

Ok,

Using the SpriteSheetLoader fixed up my issue, thanks.

I was confused not having to make a new SpriteSheet() anymore...

Thanks again for the help!

On Wed, Feb 18, 2015 at 11:48 AM, Grant Skinner notifications@github.com
wrote:

Yes. In brief, you only load the sprite sheet data JSON file, and let
SpriteSheetLoader handle the image load internally. Then, use the
SpriteSheet that is returned as the result.

@bmanderscheid https://github.com/bmanderscheid agreed, we should
communicate this better.

In 0.7.1, image loading via XHR was causing double loads. The XHR portion
actually wasn't working correctly at all. It would load the image data, but
then construct an image tag which triggered the image to load again. That
second load was what actually wound up in the cache.

Now we are actually using the data from XHR correctly, but it doesn't play
nicely with the cache.

Maybe we should evaluate adding a per-load flag for XHR to PreloadJS.

—
Reply to this email directly or view it on GitHub
#567 (comment).

[bmanderscheid]

This is huge for runtime manifests like I'm using now in this big project. Dont have to worry about how many pngs were produced when the spritesheet(s) / data was produced. This is really cool, tell everyone :)