Sign in to follow this  
Edricus

Assets Optimization

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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). 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.