Jump to content

Splitting sprites up into multiple sprites?


Mike018
 Share

Recommended Posts

If I have a sprite that has minor changes upon being clicked, like the eyes and mouth change texture, but no animation, is it better to just make two different sprites of the entire object, or make 5 sprites, one with the body that doesn't change, two different eyes, and two different mouths?

The former would save some space, but the latter can be a little time consuming having to manually position everything plus having 5 different sprites instead of two. My game is pretty small, so if I do this with all my sprites, I can't see me saving more than 1mb of data. What do you guys do?

Screen Shot 2016-10-19 at 3.12.00 PM.png

Link to comment
Share on other sites

I would split this into 2 sprites, the background cloud and the face. However this is where you can take advantage of Texture Packer 'trim' support.

Imagine in Photoshop your picture with 2 layers: the cloud, and the face. You would 'hide' the face layer, then export the image as the cloud. Then turn the cloud layer off, and export the face layer. The end result should be 2 PNGs exactly the same size, only the 'face' one has loads of transparent pixels around it. When you import into Texture Packer, it'll trim all that excess space off. But it means in your game code you can position the cloud and face sprites at the exact same coordinates, and not have to worry about trying to manually 'position' them at all, because the original source PNGs were the same size and properly aligned already.

Link to comment
Share on other sites

If I were you I would save the space. I would make class "Cloud" extending Phaser.Group and then applied approach Rich mentioned. With single group you can move, scale, rotate whole cloud with all its parts.

Another way is to use some animation program and create animation of cloud from individual parts. Then, in your code, you can play it. Advantage is that you can create complex animations even from small amount of parts. I am using Spriter for this and playing it with Spriter Player for Phaser (https://github.com/SBCGames/Spriter-Player-for-Phaser)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...