Tower Unite

Tower Unite

109 ratings
How to create Animated Canvases
By Mattio
How to convert GIF's into spritesheets and set them up in-game.

I threw this together pretty quickly to start helping players, if you have any extra information to be added or questions to ask, let me know.
2
   
Award
Favorite
Favorited
Unfavorite
Converting your GIF
To convert your GIF to a sprite sheet 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 if you're not careful, I accidentally created a 127MiB file earlier, you can use the same website to resize animated files too.

On that page, upload your image.

Once uploaded, you need to now look at the number of frames, and calculate the rows/columns for your sprite sheet.
This is important because otherwise you won't get a perfectly filled grid of frames.
As you can see if you set rows/columns to 4x3 for 9 frames, you'll have 3 frames left over which will still be played in-game and not loop properly(marked as ?'s). But 3x3 = 9 and therefore you won't have any missing frames.

It's easy, In my 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 sprite sheet.
If you have a prime number, you have 2 options, set the columns to just 1*[number of frames]. Unfortunately you'll lend up with a huge long image that might not load properly.
Your second option is to cut frames, which could change how the GIF loops. You can do that also on ezgif here: https://ezgif.com/cut
No 2 primes are next to each other(not counting 2 and 3), so cutting it down by 1 frame will be divisible by something bigger than 1.

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 second image)


Remember, to save bandwidth use the JPG format;

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.

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
14 Comments
the-red-dragon 19 Oct, 2022 @ 12:42am 
I dont understand the calculation I keep having black bars
Raven 2 Jul, 2022 @ 3:45pm 
Is there a size limit ?
Citrine 30 Jan, 2022 @ 5:22am 
Havent played this game in 2 years, nice to see guides made from a familiar face for the stuff I missed out on.
Mattio  [author] 26 Oct, 2021 @ 4:17am 
No problem, I'm glad it's still helping after all this time :)
Strange Lia 25 Oct, 2021 @ 6:53pm 
thanks! sve my life <3
carrieshot ♣™ 29 Apr, 2021 @ 3:59pm 
Just unsure about most, will be trying to figure other larger ones later as well
Mattio  [author] 29 Apr, 2021 @ 3:14pm 
For 12 frames you can use 3 x 4, so set columns to 3 and it will come out perfectly
carrieshot ♣™ 29 Apr, 2021 @ 2:35pm 
I still can't figure out a 12 frame one heh. Confusing to me without a video myself as thats how I can learn
SUGURE 7 Apr, 2021 @ 8:19pm 
this is so tricky, Im not good at math >.<
Refermaned 4 Feb, 2021 @ 7:58pm 
sure wish the canvas "screen" setting worked with spritesheets