Tower Unite – Animated Canvases Create

Animated Canvases Create

Converting your GIF

To convert your GIF to a spritesheet use: https://ezgif.com/gif-to-sprite

Note: Take note of the size of your GIF/Webp files, turning them into a sprite sheet will massively increase their sizes, I accidently created a 127MiB file earlier, you can use the same website to resize animated files too.

On that page, upload your image.

Tower Unite Animated Canvases Create 1

Tower Unite Animated Canvases Create 2

Once uploaded, you need to now look at the number of frames, and calculate the rows/columns for your spritesheet.
This is important because otherwise you won’t get a perfectly filled grid of frames.

It’s easy, In this example my file has 66 frames, which is easily made by multiplying 11 and 6. So we’ll have a nice grid of 11 by 6 and our frames will fill all the spritesheet. If you have a prime number, you’ll have to simply do 1*[number of frames].
Now make sure you put any one of your factors into the columns section, then hit convert. (I’d replace the 5, with 11, in the above image)

Remember, to save bandwidth use the JPG format;

Tower Unite Animated Canvases Create 3

Tower Unite Animated Canvases Create 4

Once converted, right click and save your file. Then you will want to re-upload the image to somewhere like Imgur, where the file won’t be deleted.

Tower Unite Animated Canvases Create 5

Once in-game, paste your spritesheets URL in, and enable animation.

Now you’ll have to set up the columns and rows, enter what you calculated, mine are 11 and 6, and now you should see your animation playing properly.

You can adjust the rate down to what looks best.

Extra Help

Optimisation is important, do try to lower the filesizes and frame count of your GIF’s if possible, try to get it looking smooth at a good quality at the smallest impact on performance.
Here’s a tip by CarbonCopyCat to possibly reduce filesizes, by reducing colours etc.
https://forums.pixeltailgames.com/t/tip-for-optimizing-animated-canvases-save-for-web-as-png-8/35916

Leave a Comment

Your email address will not be published. Required fields are marked *