Too many asset files for Phaser game

[phamedev 2]

Hello,

I'm a previously flash developer and learning games development using phaser and noticed that many things are done differently here.
For example, you make an animated character something like that:

game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');

What if you have 20 animated characters in a game? Will you load 20 png and 20 json files? Then there will be other asset files.

Is there  a way to combine assets so that there are few load requests from the server.

 

[rich 2612]

You pack your assets into texture atlases. You don't need one atlas per sprite, you pack them in as much as you can (until the texture becomes too large, then you make another). This is done with a 3rd party tool like Texture Packer.

This is nothing specific to Phaser btw, it's how all bitmap based 2D game frameworks operate (Cocos2D, Unity, etc), so it's a technique worth learning imho.

[JakeCake 20]

10 minutes ago, rich said:

You pack your assets into texture atlases. You don't need one atlas per sprite, you pack them in as much as you can (until the texture becomes too large, then you make another). This is done with a 3rd party tool like Texture Packer.

This is nothing specific to Phaser btw, it's how all bitmap based 2D game frameworks operate (Cocos2D, Unity, etc), so it's a technique worth learning imho.

Something I've been longing to ask for, if you don't mind. Does Phaser draw all sprites from one atlas first and then move on to the next as it saves the depth-value for each, or does it draw in the order of depth, so behind most sprites are drawn first and multiple texture-swaps to the same texture might occur per frame?

It's so I know how to pack my textures, as in which order of depth they are usually drawn in. 

Little off-topic sorry, but it's just a quicky question.

[Tom Atom 269]

Hi, scene graph is traversed and when texture changes draw call is issued. So, if you have some object like image from one atlas and bitmap font from other and you have this object 10 times on screen (like level selection screen) then it will make at least 20 draw calls. I wrote article about merging fonts into atlas (http://sbcgamesdev.blogspot.cz/2016/03/phaser-tutorial-merging-fonts-into.html) and it decreased my draw calls for test scene from 136 to 6.

[rich 2612]

Yup like Tom said - the display list is drawn from back to front, and whenever the texture changes the Sprite Batch shader is flushed, and it starts all over again. so texture atlases should be packed based on display depth placement, rather than 'object type', to minimise flushes.

^ only applies to WebGL of course. Makes no difference in Canvas.