I Switched to Bone Animations (here's how it went)

i'm making a browser first open source beat em up game about zombies and there's already a problem i know this looks like a wiimote but it's actually a time machine so that was close i'm gonna put this back but back to the problem this sprite atlas is 3.6 megabytes for three animations and it is the tip of an unmanageable mathematical iceberg each character in this game will have 10 to 20 animations with 1-4 players and 3-5 zombie types per level players will have to download hundreds of megabytes just to play the open source zombie game and nobody is going to wait that long then there's loading these pngs into memory which may take somewhere around 16 megabytes per 2k texture what we're dealing with here may melt some computers the good news is no one is going to have this memory problem because they won't stay past the loading screen so this game is doa if we don't change course we can make some compromises like targeting a lower resolution so that everything is just smaller or we can play the animations at 30 fps or even 15 fps instead of 60 for a 2x or 4x savings but there's got to be a better way that doesn't nerf the game the web is capable of high fidelity games and os zg can be an example of that this problem is not unique to web games so let's see what we can find in the gdc archives i split the character into many tiny pieces then i can later import in adobe flash and then i have to decide how i implement the graphics in the game the most most common uh method is sprite sheets i don't use this because it's quite a big image it takes a lot of resources and especially if you have a game with really high resolution assets and a lot of animations it can basically make your computer catch on fire what i am using is something i call asset sheets but instead of exporting each frame of the animation i export each part of my character and then export the animation separately using a custom exporter as a text file so this is how a frame looks like as a comparison this is how the sprite sheet would look for those four or five animations i showed before and this would be 5700 by 3100 pixels which is quite a lot uh in comparison this is the asset sheet which is 460 by 210 which is less than one percent of the number of pixels the flash method of making animations sounds like the perfect solution to this problem there's just one tiny problem flash is dead okay let's think what are some mobile games with high fidelity back when the cellular downloads were limited to 50 to 100 megabytes hmm rayman that's a game with high resolution art and butter smooth animations it came out on the xbox as well so let's see wait 55 okay what secrets are the french titles so as you can see the animation is a mix of classic animation and bones animation so i can make any parts but to do this we need to separate all the power bodies of the characters so as you can see for each part so we added the bones and i create a area and this area will be uh we generate a mesh but for rayman we have really more animation this is a full east of animation this is what we need bone animations phaser 3 has first class support for spine which is a tool for creating skeletal animations and is used in many published games but there is one problem i'm already paying 260 dollars for these sprite sheet animations but maybe i can ask the artist to redo them they'll get to do more of what they love so they'll probably thank me dear animator great job on the animations i do have one minor revision before final payment i'm going to need you to redo them all as skeletal animations in spine looking forward to seeing them kind regards super tommy dear super tommy no this is out of scope pay or i'll report you good day okay i didn't want to have to do this because it can be dangerous but i guess i'll just have to use my time machine i've used this before but it was just going back a few minutes which is low risk this time will be quite a bit longer so we'll see what happens see you in the other timeline alright these animations look good and they are massively smaller than they were before mission accomplished the other benefit to skeletal animations is that when you want to slow down time they will stay butter smooth unlike frame based animations what's this will flash cs9 run on switch 2 flash cs9 crystal dynamics announces new tomb raider game powered by adobe flash adobe games releases flash cs9 for next generation games oh what timeline am i in [Applause] while i try to find my way out of the multiverse check out this video over here to see how you can speed up your code by 4x using an ecs architecture that's used by some of the largest game development teams in the world and if you can believe it one of the earliest ecs open source projects i could find called ash was written for flash

Channel: supertommy

Views: 71,571

Keywords: skeletal animations, bone animations, spine, phaser 3, gamedev, game development

Id: sq6mnix8eAg

Length: 5min 55sec (355 seconds)

Published: Fri Apr 15 2022