Tower Unite

Tower Unite

109 个评价
How to create Animated Canvases
由 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
   
奖励
收藏
已收藏
取消收藏
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 条留言
The-Red-Dragon 2022 年 10 月 19 日 上午 12:42 
I dont understand the calculation I keep having black bars
Raven 2022 年 7 月 2 日 下午 3:45 
Is there a size limit ?
groblin 2022 年 1 月 30 日 上午 5:22 
Havent played this game in 2 years, nice to see guides made from a familiar face for the stuff I missed out on.
Mattio  [作者] 2021 年 10 月 26 日 上午 4:17 
No problem, I'm glad it's still helping after all this time :)
Strange Lia 2021 年 10 月 25 日 下午 6:53 
thanks! sve my life <3
carrieshot ♣™ 2021 年 4 月 29 日 下午 3:59 
Just unsure about most, will be trying to figure other larger ones later as well
Mattio  [作者] 2021 年 4 月 29 日 下午 3:14 
For 12 frames you can use 3 x 4, so set columns to 3 and it will come out perfectly
carrieshot ♣™ 2021 年 4 月 29 日 下午 2:35 
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 2021 年 4 月 7 日 下午 8:19 
this is so tricky, Im not good at math >.<
Refermaned 2021 年 2 月 4 日 下午 7:58 
sure wish the canvas "screen" setting worked with spritesheets