Assets Optimization

[Edricus]

Alright. So I've re-sized all my assets for different resolutions but I was wondering if there is a "right way" of packaging everything together to make for fast loading (not that it's currently slow) but also efficiency. I have heard of people doing things like making Texture Atlases for all their sprites and assets but I was wondering roughly how long it takes to learn something like that and implement it? Does a lot of the code change for the way things are loaded? Unfortunately there is only one day left on this project so I don't want to take on a task that's too large. Any help is greatly appreciated!

 

Edit: I am using CocoonJS to package everything up and run on Android.

[ianmcgregor]

I can recommend TexturePacker to pack images into sprite sheets and TinyPNG to crunch down the file size.

 

The code changes *should* be minimal as you'll be using the same image keys on your sprites. 

 

If you don't want to change any code you could still do the TinyPNG part, which can give you huge file size savings.

[wayfinder]

If you don't want to shell out the $99 for TexturePacker Pro, there's the Leshy Spritesheet Tool (http://www.leshylabs.com/apps/sstool/), which does many of the same things as the pro version of TexturePacker

[lewster32]

TexturePacker Pro is $39.95 (£24.14) and well worth every penny - http://sites.fastspring.com/codeandweb/product/all

[wayfinder]

whee.. where did I get the 99 from? sorry!

[lewster32]

Haha I'm not sure, but I think you may have been ripped off!

[Edricus]

I can recommend TexturePacker to pack images into sprite sheets and TinyPNG to crunch down the file size.

 

The code changes *should* be minimal as you'll be using the same image keys on your sprites. 

 

If you don't want to change any code you could still do the TinyPNG part, which can give you huge file size savings.

 

First, I would just like to say that I ran all of our assets through TinyPNG and my god did it ever work wonders. We had assets totalling to 14.5MB and TinyPNG dropped that to a mere 4.77MB with (at least to my eye) absolutely no noticeable difference in quality! This website is awesome to say the least! Thanks a lot for showing me this. I will definitely be telling my friends about it. I'm going to try some sort of TexturePacker if I have time to hopefully help a bit more with mobile performance.

[lewster32]

TinyPNG does reduce the colour depth and add dithering to your assets, so in some cases it can be detected, though 95% of the time I can't notice the difference. What's great is it does this without reducing the alpha channel to a 1-bit mask.

[Edricus]

Another thing I found interesting about this was that I could run the same PNG through the site for further compression to reduce it even more. Of course the more you reduce it the less compression it does on every cycle through. Eventually you start to notice a difference in the aliasing of the object (assuming you're running vector objects through the compressor). 

[Nick]

Compressor.io is a tool worth trying also. It can reduce filesize even more than TinyPng.

If you are using JPEGs try JPEGmini.com

[lewster32]

Not seen compressor.io before - very nice interface. It's a shame it doesn't do batch compression like TinyPNG though... maybe something to suggest to the author.

[Edricus]

If you don't want to shell out the $99 for TexturePacker Pro, there's the Leshy Spritesheet Tool (http://www.leshylabs.com/apps/sstool/), which does many of the same things as the pro version of TexturePacker

 

So I'm used the web version of the Leshy Spritesheet Tool and got a packaged version of my assets. Currently my code for grabbing the correct image is like so

var Germ = function(game, x, y, germType, frame) {  Phaser.Sprite.call(this, game, x, y, germType, frame);

From what I understand, in order to make this compatible with a my new packaged textures png I need to replace germType with the name of the loaded png pack and frame with the name of the asset in the pack that I want to grab?

Also, in order for this method to work with sprite sheets, is it safe to assume that the sprite sheet must be split up individually and then placed in? If so, how would I go about getting an animation playing from a texture pack?

 

All this is very new to me and I thank everyone for their help. This looks awesome and I really want to learn how to use it properly. I tried looking at the Phaser examples but they aren't the most informative for something like this.

[lewster32]

From what I understand, in order to make this compatible with a my new packaged textures png I need to replace germType with the name of the loaded png pack and frame with the name of the asset in the pack that I want to grab?

 

Yes, that's right. 

 

Also, in order for this method to work with sprite sheets, is it safe to assume that the sprite sheet must be split up individually and then placed in? If so, how would I go about getting an animation playing from a texture pack?

 

Yes, again that's correct - if the sprite sheet's individual frames are named correctly, the animation will work in pretty much the same way, with you passing an array of frame names to the animation.

[Edricus]

I also just stumbled across this function in the Phaser Docs. 

 

http://docs.phaser.io/Phaser.Animation.html#generateFrameNames

 

Would I just place this into the create function of my prefab and omit passing in a frame with this?

[lewster32]

All this function does is create an array of strings, so yeah if your frames are named accordingly, this will work perfectly.

[Edricus]

How would I go about accomplishing this for a button though? This is the code I currently have

button = this.game.add.sprite(0, 0, 'buttonPack');

It currently loads the first texture in the texture pack so this gives me the indication that the texture pack is loading correctly. I've tried setting the key member of the button through button.key as well as the frame or frameName but none of them seem to work properly. They all just load the first texture in the atlas.

[Edricus]

Well derp. Turns out I was using the right member: frameName, but I was typing the wrong name... I had a capital letter in it and the atlas key didn't have one. >_> It's too early in the morning here

[Nick]

On a (semi) related note. I was wondering if the changing the image format when using Texture Packer can help with performance at all?

 

e.g. If I output an atlas using RGBA4444 that would be less bytes per pixel and would reduce memory usage? 

 

I'm aware file-size doesn't really play part in general game performance and that normally it is the physical size and amount of images being used in a game.  I'm just not 100% sure about the bytes per pixel thing. Does that only affect filesize? 

[lewster32]

I'm gonna go out on a (fairly comfortable feeling) limb here and say no, the image format makes no difference to performance after the loading and parsing stage. Internally, I believe both canvas and webGL use 32-bit colour, and any assets that are loaded are transformed into this format when being managed. There may be the possibility of non-alpha 24-bit colour being used on occasion but I think in that situation the performance gains would be minuscule.

[Nick]

Thanks for your reply. This makes a lot of sense. Do you have any opinion on image format? E.g JPEG or png? Normally I'd follow the usual web dev rules and use JPEG for things like photos, but I've read that for iOS png is always the best choice.

[lewster32]

For games, 99% of the time it makes sense to use png. I guess with stuff like avatars and photos etc then it's okay, but really the pros of using png outweigh the potential differences in filesize for game assets. You'd need a pretty big, detailed and not well optimised png to take it up to a size where jpeg would be a better option, and if following the 2048x2048 maximum size, I'd imagine the chances of that situation arising are even less.

[Yanifska]

Hi there,

what are the pros of png ? I mean beside quality and alpha.

thanx

[Nick]

I though I'd add to this thread that I've had some success using WebP images for Chrome only.  I was able to cut the file size of my images drastically.

 

Texture Packer actually allows you to export as WebP, so you can export an Atlas once as PNG for all other browsers then export again as WebP for Chrome.

 

Then you can detect Chrome and serve the WebP version for that browser only. Because the majority of our users are Chrome based, this was a worthwhile change and it really helped with initial load times.

 

WebP: https://developers.google.com/speed/webp/

[Kumar chavan]

I have a problem with leshy tool for exporting spritesheet because exported spritesheet is not workable on low GPU or old machines. So texture packer has similar problem? means all exported spritesheet in texture packer will work on any GPU or machine? or any setting for low GPU in texture packer?