Creating sprite from texture atlas without using load.atlas

Okay, this is probably a weird question. Can one create a sprite directly from an image texture versus loading an atlas and then generating it from the frame? In other words, from an existing image, generate a sprite based on sub-texture defined by x, y, w, h in the image?

I was doing a comparison with Pixijs and the code I have is using that approach. I wanted to do it this way so I didn’t have to generate the flavor of atlas meta that each respective engine wants.

There are two ways you can approach this. The quicker one is to use setCrop on your Game Object. This will crop its texture so it only shows the area you specify. The major downside of this method, however, is that crops are purely visual. The Game Object will still be the same size as the entire texture and its position will be relative to that size.

The better way to pull this off is to manually add a frame to your texture. You can get the Texture instance from the Texture Manager’s get method, which is accessible in Scenes as this.textures. The Texture instance has an add method that you can use to add a new frame to the texture. You can then use that frame in your Game Object. For example, if you did this.textures.get('key').add('custom', 0, x, y, width, height);, you can then use this.add.image(0, 0, 'key', 'custom') to add an Image with the new frame.

3 Likes

Thank you so much @Telinc1. That worked. I did notice, that sourceIndex needs to be the same. When would there ever be more than one? I found if I used a different value, then it couldn’t create another Frame.

It doesn’t appear I can just new another Texture from an existing if I wanted another data source. It may be impractical, I’m just trying to wrap my mind around the SDK.

Also, it appears I also could use add.sprite v add.image. When I inspect them both (as image or sprite they appear nearly the same in the debugger. I also saw this http://www.html5gamedevs.com/topic/16242-sprite-vs-image/ which intimated that Image would be dropped in Phaser 3.

Any real value of Image over Sprite?

Thanks again so much, you were very helpful!

A single Texture can hold multiple images and point them to separate Frames. In most cases, you only have one image for a given Texture, which is why you need to use source 0. A Texture’s sources are given to it when it is created. You shouldn’t instantiate Textures yourself; check the methods in the Texture Manager to see how you can create them.

The only difference between Sprites and Images is that Sprites have an additional animation component. This allows you to animate them but makes them slightly more expensive because they have to keep track of their animation and update during the game loop. You can use Images for most purposes, then change them to Sprites if you need animation, as the two Game Objects are practically identical.

This is the first time I’ve heard of any plans to remove Images. The post you’ve linked was made 4 years ago, so I can only assume it was an idea that was never implemented.

Excellent, thanks for the patience and awesome explanation. Heh, that’s the problem with the internet … has the memory of an elephant!