How to best store game images

[ptdnet]

Right now I'm just loading all my graphics in different files as I create them. Icon here, buttons (at least those are a sprite sheet), a menu there, background here, small graphic there.

 

So I end up loading 30-40 small images. Is this how it's supposed to be done in Phaser or should all these little graphics be smashed up into a single file? And if so, how are they rendered if everything's all a different height/width?

 

Back in my Unity/iOS days we'd make an atlas and the sprite rendering engine would just know where everything was. But I'm not sure I've seen anything like that here.

 

Thanks for any insights!

[valueerror]

sprite atlas is definitely the way to go - especially when you are using webgl because the upload to the gpu then happens once instead of a hundred times

[valueerror]

preload the atlas

game.load.atlas('allsprites', 'assets/sprites/allsprites.png', 'assets/sprites/allsprites.jsona');

in a sprite or texture-atlas every image has got a name.. (the name of the file per default)  so you include the image like this in your code

game.add.image(40,40 ,'allsprites','star.png');

or a button

game.add.button(50, 50,'allsprites',function(){}, this, 'signs-forward.png', 'signs-forward1.png', 'signs-forward.png');

particles

cloveremitter.makeParticles('allsprites',['clover1.png','clover2.png','clover3.png']);

create from objects

map.createFromObjects('objects', 1, 'allsprites', 'bush-tileset-01.png', true, true, plantobjects);

animations

freeze = game.add.sprite(100,100, 'allsprites','freeze1.png');freeze.animations.add('freeze', ['freeze1.png','freeze2.png','freeze3.png','freeze4.png','freeze5.png','freeze6.png','freeze7.png'], 15, false);

 

 

as you can see it's easy to use a sprite atlas everywhere..

there are several free tools to create your texture-atlas even online solutions like this one:  http://www.leshylabs.com/apps/sstool/

[ptdnet]

Thank you very much! I'm assuming 'assets/sprites/allsprites.jsona' is the part that defines what image is what?

 

After my graphics are finalized, I guess I'll then pack everything together.

[valueerror]

yes it does..  it defines the postition, width,height, rotation, name, margin....  this is why you need a tool like spritesheetpacker or texturepacker or whatever you like

[Noid]

You can use TexturePacker, ShoeBox and I think there are some posts in this forums with links to online tools.

[JakeCake]

I would love to hear the performance difference from OP or anyone who have gone from the initial one file per texture to large texture atlases. I am definitely going to switch to an atlas at some point, but while in early development one file per texture seems the easiest. It would just be nice to know what kind of performance benefits I should expect?

[valueerror]

that totally depends on your gpu... i could reduce the cpu calls per frame from 36 to 8 and on my pc this didn't change a thing (because 36 uploads to the gpu is just not that big of a deal on a good workstation) but it believe that my game that now runs at almost 60fps on most modern phones would get even close to 60fps if i hadn't changed to a texture atlas..    but... search the forum - there are already severals posts regarding this question

[Noid]

@JakeCake  if your game is gonna be hosted online rather than as an apk, having individual files means load times will be slower since you have to make an http request for every single image. In that case it's a matter of load times rather than performance. 

[ptdnet]

I know, it's hard to worry these days too much when everybody has like a billion megabyte graphic card.