texture atlas better than spritesheets ? performancewise

[valueerror]

these are my assets loading...  

 

the first block contains spritesheets to geneate different signs, or images or parts of the ui, most of them with two different states one for normal and one for touched (hover)

 

the second block contains all my spritesheets used in tiled to populate the tielmap world - they are in different spritesheets because of the different tile sizes

 

the third block contains spritesheets used for animations..

 

so the question is:  would it be better (boost performance) to create a texture atlas out of these - is this even possible??

( i imagine i can NOT dismiss my spritesheets for tiled) but maybe the others?

        game.load.spritesheet('chain','./assets/chain.png',16,26);        game.load.spritesheet('menucorner','./assets/menucorner.png',64,64);        game.load.spritesheet('levelbutton', 'assets/levelbutton3.png', 64, 64);        game.load.spritesheet('signs', 'assets/signs.png', 64, 64);        game.load.spritesheet('ui','./assets/ui-sprite.png',32,32);                game.load.spritesheet('cowsonice-tileset-64', './assets/tilesets/cowsonice-tileset-64.png',64,64);        game.load.spritesheet('cowsonice-tileset-32', './assets/tilesets/cowsonice-tileset-32.png',32,32);        game.load.spritesheet('grass-spritesheet', './assets/tilesets/grass-spritesheet.png',128,128);        game.load.spritesheet('longplants-spritesheet', './assets/tilesets/longplants-spritesheet.png',288,128);        game.load.spritesheet('bush-spritesheet', './assets/tilesets/bush-spritesheet.png',224,192);        game.load.spritesheet('ground-spritesheet', './assets/tilesets/ground-spritesheet.png',256,256);                game.load.spritesheet('waterhole-anim1', './assets/animation-waterhole1.png',256,256);        game.load.spritesheet('waterhole-anim2', './assets/animation-waterhole2.png',256,256);                game.load.spritesheet('tux','./assets/tux-spritesheet.png',63,56);        game.load.spritesheet('tuxbomb','./assets/tuxbomb-spritesheet.png',63,56);        game.load.spritesheet('tuxminibomb','./assets/tuxminibomb-spritesheet.png',63,56);        game.load.spritesheet('tuxice','./assets/tuxice-spritesheet.png',63,56);        game.load.spritesheet('cow','./assets/cow-spritesheet.png',128,128);

(i could combine some of the spritesheets because of the same measurements - if this would have some perfomance benefits)

thank you very much !

[SuperMarco]

I'm quit new in game development but, if I was you I would have already switch to a texture atlas. I would always use it if I have more than 10 spritesheet, I just don't like to have the same code repeat more and more

 

But I can't answer you about the performance, because I didn't do test about it yet.

[lewster32]

Using an atlas will maximise performance - specifically within webGL - but it will mean you'll have to turn all of your spritesheets into individual frames as the two don't (and shouldn't really) work well together. Basically, by using a single big texture atlas, you minimise the amount of times you upload textures to the GPU, which is one of the big bottlenecks. When you get into working with the GPU, the key metric is draw calls. Get your draw calls down, and your performance will improve dramatically, especially in situations where you're displaying lots of sprites. 

[valueerror]

but it will mean you'll have to turn all of your spritesheets into individual frames

huh.. that was the reason why i decided to ask before i get my hands dirty...   this is a lot of work..  

 

 

one more question though..    those spritesheets i use in tiled to design the game world..  they can't be put into a spriteatlas right? i need them for the tilemap.. 

to be precise:  i do NOT render any tiled layer (because of performance reasons)  i only use tiled to position my objects..   i make heavy use of "createFromObjects" and use the spritesheets only for the composition of the world and to get the right ID

 

but i still could put the single sprites into the atlas and use the atlas to actually paint them and the spritesheets only for the mapcreation..  i would still have to load the spritesheets for the object creation process but i would use the sprites of the atlas to actually paint them..

 

does this make sense to you?  if so..  would you suggest another approach?

[lewster32]

Yeah I think that'll work, if what you mean is that you're loading the TileMap spritesheets purely so that it can be used, but you never actually draw any layers. I guess there'd be a better way to do this in the long term (it's pretty hacky what you're doing right now) and you may want to check out the recently released Tiled plug-in as that may work better for you: http://www.html5gamedevs.com/topic/9573-phaser-tiled-plugin/

[valueerror]

well it's very convenient that way..  a friend of mine (without programming skills) is creating the levels just by positioning all items from the different spritesheets in the world and painting polylines over the background image on object layers (there are no other layers in my tilemap)...  this is a lot faster than using normal tilemap layers... i understand that this plugin could maybe speed up rendering tilemap layers but i don't need that anymore..

 

i don't totally understand what this plugin can do for me other than that.. 

[lewster32]

I just thought it may be worth a try if the only reason you'd stopped using the built-in TileMap implementation was due to performance.

[valueerror]

ok.. thank you.. 

 

one other question comes to my mind.. maybe you can also help me with that

 

is a texture atlas better in terms of performance because it's a texture atlas or would a huge spritesheet (instead of several small spritesheets) also do the trick... (i could combine some of the spritesheets that (almost) match in tilesize

 

i mean.. it's only one image uploaded to the cpu right?  or is there something else about sprite atlasses that a spritesheet can not do with webgl ?  (less whitespace i guess but i don't know if thats so important)

 

 

i'm asking because it ist very much work to code (when creating objects out of an objectlayer with a spritesheet i can assign the ID i get out of the json to the position in the spritesheet very easily - simple math) but with a texture atlas i would have to assign every ID to the name of sprite in the atlas..

[xerver]

Why are you loading them as spritesheets for the tiled maps, just load them as images and let the tileset handle it. Loading it as spritesheets is creating unnecessary work and memory usage because the tileset doesn't actually use any of the extra stuff Phaser creates for a spritesheet when it is just a tileset. Unless you are using all that animation data, no need to create it for your tilesets.

 

For the other files, the only difference between and a spritesheet and a textureatlas is how easy it is to choose a frame, create an animation, and most importantly combine different frames and animations into a single image. If you are not doing that last part you won't get much out of them being atlases.

 

**EDIT**

 

Read your comment that you making maps in Tiled, but then doing some weird custom implementation of placing them as objects or something. That seems really complex instead of just a one-line load of the tiled map and moving on. Not sure how maintainable that will be going forward, good luck.

[lewster32]

A huge spritesheet would work just as well as a texture atlas - the only real difference in Phaser is a texture atlas lets you arbitrarily designate frames of differing sizes, whereas a sprite sheet forces you to specify sizes and reads the frames in a sequential way. Performance wise, there's no difference.

[valueerror]

thank you both for your answers..   i just finished exporting everything into 181 different png's.. lol..  piece of work but with gimp and some good keyboard shortcuts.. done!

 

now i could easily create a good texture atlas and use single images or create animations out of a sequence of images...  

 

@ the "tiled" part of the creation process...   i is NOT that complex..  i use object layers and place the things i need there..  most  of them are needed as object anyway..  the background of the game is a single (almost transparent) png - different for every level..  it just was really faster that way.. (rendering tilemap layers sucks hard at the moment and eats up my game performance)   the code for this looks like that: (i've 6 forloops like that.. one for every tileset)

 for (i=82; i<121; i++){ map.createFromObjects('objects', i, 'cowsonice-tileset-32', i-82, true, true, blockobjects);  }

@xerver

""Loading it as spritesheets is creating unnecessary work and memory usage because the tileset doesn't actually use any of the extra stuff Phaser creates for a spritesheet when it is just a tileset""

 

i didn't know that..  i do not use them for animations so i can load them as image.. thx!

[xerver]

> rendering tilemap layers sucks hard at the moment and eats up my game performance

 

That is the main reason I wrote the phaser-tiled plugin

[valueerror]

oh.. you did this.. and you did succed i guess?!

do you think (with your implementation) that scrolling a normal tiled layer (as background without any collisions) will be as fast as scrolling a single ~2000x2000 png??

because that would be the only thing i could need a normal layer for. as background. for now i create the background in gimp and thats fine with me .. i just want to know for future projects..

[xerver]

oh.. you did this.. and you did succed i guess?!

do you think (with your implementation) that scrolling a normal tiled layer (as background without any collisions) will be as fast as scrolling a single ~2000x2000 png??

because that would be the only thing i could need a normal layer for. as background. for now i create the background in gimp and thats fine with me .. i just want to know for future projects..

 

Same performance, but you will probably save on memory. Also as you add more layers, the performance is still consistently fast. Look at the repo again, I just added screenshots that show how fast the performance is with the new implementation.

[valueerror]

thx.. and btw. i changed every sprite and spritesheet in my game to the atlas.. furthermore it came to my mind that loading the tilesets just to create objects is not necessary at all..so they are gone too..

i reduced 26 - 38 draw calls (depending on emitters) to 6 steady and the gpu memory consumtion according to chrome from 2.5 to 0.8

i'm going to try this an my mobile device later and hopefully gained some fps

[hicotech]

so according to this and other topics plus articles online there should be no performance difference in using sprite atlases over sprite sheets (in 2014).. is that still true?

my situation is so that I already have some sprite sheets and I am using only sprites of the size 32x32 for world and 64x64 for characters.. my plan is to create world map using Tiled and probably also https://github.com/englercj/phaser-tiled plugin. World is not going to be any big or heavy.. mostly it will consist out of different locations plus interiors (RPG game).. as I am planning to use states for different locations and interiors in locations I can always load new specific sprite sheet on top of some general one and render the world/location..

so my question is (or more like to clarify that I am correct)

• if there is no performance difference between atlases and sheets; and
• if sheets dont contain different sized sprites; and
• if I will be "loading new" assets for every state

..wouldnt atlases make it all even slower? Since there will need to be png file plus JSON with data, when I can just load png file?
Or is my plan totally wrong?

If I got something wrong please correct me as I am just trying to learn at this point.. though I made couple of POCs already

[samme]

https://phaser.io/tutorials/advanced-rendering-tutorial/part2

[hicotech]

that all sounds good.. I will definitely go through it..

but.....newest phaser from phaser.io is basically old one? and there is Phaser CE? :\

Quote

These features are only available in Phaser CE, version 2.7.0 and above.