Html5 games exported by default by construct 2 are relatively small. Yet, for users with a limited internet connection, downloading all of the game’s assets can take quite a while. And a long loading time can stop players from trying your game out. There is no real tradeoff at runtime for using the types of compression presented below. And if you like what I'm doing, you can follow me on twitter and on facebook!
Tutorial edit: using the built-in compression in Construct2
Thanks @Kyatric for the pointer!
Construct features a built-in compression for images, that is deactivated by default on your project. It is actually there since the R73 version from 2011.
It is very easy to use:
1- Open any image in your project
2- Click on the image format icon as shown on the image below.
3- Choose an image compression (either indexed png or jpg) and a scope (apply to this image, animation, object type or the entire project). Jpg compression is the most efficient one for photographic types of images, with a lot of variation in colors and without a transparency mask. PNG8 is an indexed image format, which cannot contain more than 256 colors. It does support transparency however.
Voila, every time you export your game, its bitmap assets will be automatically compressed according to your settings! I invite you to look at the official blog post about this feature for more detailed information.
The rest of this tutorial describes the pngQuant technology, if you ever need to use it for a non C2 project.
For non C2 projects - What is pngQuant?
PngQuant is an open source library for png compression. It is the core library on which the online tool tinyPNG is based, although it’s entirely free. It can reduce the weight of your exported png assets in construct roughly by half, and up to 70%.
Beware, as this is a lossy process! Although you shouldn’t see much of a difference, you will lose color information on your images as you run them through pngQuant. Also, pngQuant works by reducing your color palette and indexing your colors in an 8 bit image. If you are already using 8bit png files (if you export pngs for web from within photoshop, for example), this technology might not be very useful for you. Last but not least, for some reason, compressing images this way can improve your browser game’s framerate on some mobile devices.
Using pngQuant
There are quite a few tools that exploit this piece of technology. On windows, I mostly use PNGoo, a free batch utility with a simple UI. You can find it at this address: http://pngquant.org/PNGoo.0.1.1.zip
When you run PNGoo, you simply have to:
1- Choose either an output directory or let the software overwrite the modified files (in the top left corner of the UI)
2- Add the files you want to compress by clicking the “Add files” button at the bottom right of the interface
3- Click on “Go!” and let the magic happen!
Your newly compressed images should be significantly smaller than the originals! If you are a mac user, an alternative software is available for you as well. It is called pngMini, and you can find it at this address: http://pngmini.com/.
Last Words
This week’s tutorial is the first in an ongoing, occasional quick tip series: efficient articles that cover specific efficiency tricks. If you like them, please follow me on twitter, facebook and google plus.
You can find all of my articles and tutorials about game design directly on my website: http://GDquest.com/! Finally, you can find all of my Construct 2 tutorials on this forum post.