Jump to content

Too many asset files for Phaser game


Recommended Posts

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.

 

Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...