Composed images best practices

[mariogarranz]

Imagine a "Guess Who?" game, where you would need to generate random faces.

 

You would have different face shapes, hair styles, eyes, etc. Each one of those is a different image, all of them saved into a single texture atlas.

 

My first approach was to generate a Phaser.Image for each part of the face that may change, and then have all of them into the same group, so they can be moved together.

Then I thought this didn't seem like a good practice, and that probably the best way to solve it was creating a BitmapData, drawing all of the face elements to the BitmapData just one time and then use it as the base texture for a single Phaser.Image.

 

Is this they way BitmapData is meant to be used? Will it improve performance?

[Manifest]

Your BitmapData idea would probably work, and from my experience, probably perform quite well. Another alternative would be to have a spritesheet containing groups of facial features i.e. a spritesheet with eyes, a spritesheet with hairstyles etc. Then have a sprite for each layer, where each layer can be at a different frame (representing a different style)

 

headBaseSprite.frame = 0;

eyeSprite.frame = 4;

hairSprite.frame = 2;

 

and so on.

[mariogarranz]

Thanks Manifest.

The second option you suggest is more or less my first approach, using different Image objects for each changing part of the face.

 

What I am not yet sure is what solution would be better in terms of performance? Is the BitmapData option worth it?

[george]

I would begin with sprite atlas solution. You will get a GPU boost by using a sprite sheet so it's a no brainer. Your BitmapData is kind of premature optimization and distracts you from more important things Just don't think about the performance in this state.

 

The spritesheet solution should be very fast as long as your sprite sheet is not too big (1024px or better 512px in square). If it's too big use a second texture atlas.

[rich]

I agree with george, use an atlas and don't worry about it. If performance really does become an issue then you can use generateTexture and/or cacheAsBitmap in 2.0.3 to create a single texture from a Group. So put all the bits you need into one group and make a texture from it.

[mariogarranz]

Thanks both.

Sometimes I get very obsessed with the number of objects being displayed, and not having them draw on top of each other all the time