Scratch Game Devlog - Create "Pro" Character Animations with this FREE Software!

Key Takeaways

[Music] hello fellow scratchers I've always wanted to create more engaging animated characters in my scratch games but that's never been easy until now so yeah over the holiday season I got Co which was not nice but it did give me a little time to consider coding a new scratch game and to try out a fun tool for character animation called spriter now it's by Brash monkey and yes there's a free edition and I'll tell you more about that soon but the game it's going to be a gri patch original a puzzle platformer where the protagonist has to Traverse each level with the aim of pushing together similarly colored cubes very simple but with a lot of cool potential what would you say to tagging along to see how the game develops let me share my journey from character design to animation and show you how I began to build up this exciting new scratch game so I didn't really have a firm idea of what my game's player character was going to look like so I turned to the flavor of the month chat GPT for inspiration interestingly it suggested a robot as the main protagonist now I hadn't thought of that and I liked it and with a little more prompting I got a very cool image not sure why this one has one eye or where this poor guy's body went but this one I love so I took this design and I recreated it using mainly rectang in a vector image editor I used illustrator for this purpose but inkscape or the scratch editor would also suffice the important thing is that the design is simple enough that it looks good both big and when shrunk right down teeny small since that is how it will probably look in game now that I had the finished design I wanted to animate it and usually this would be a real pain in the butt but today I'm getting a helpful hand from Sprite this bit of software by Brash monkey is available as a free or a pro license and you'll find a link to it under this video this is the bundled example showing a fully rigged character assembled using bones and key frame poses to produce a smooth animated walk cycle very cool indeed I was stoked to give it a try you have to start by saving the individual Parts limbs head feet Etc of the player character into a folder on your computer this can then be opened as a new project within spriter and reassembled as intended so the next step is to add in a skelington rig of Bones to hold it all together and Define where the components can pivot and move finally link the images to the bones and the rig is complete and now just a word of warning do watch the sprited tutorials before trying this out yourselves as it was far from obvious how to go about this even for me then it was a matter of trial and error constantly referring back to Brash monkey example project and after a relatively short time my beautiful robot walk cycle emerged and I have to say it came out pretty sweet so much so that I went ahead and created an idol animation too for when they're standing still I guess robots don't really breathe but me it looks cool and helps bring the game to life so it was super super easy to export the animations making them ready to be imported back into scratch it's just a shame that they had to be bit map I think the best compromise is to export twice as large as we need and then shrink the Sprites down to 50% in scratch and it seems to work best when the costumes are an even height and width but man a blank scratch project is always a bit daunting there's so much work involved in coding a game from from scratch so why not reuse one of my tutorial projects episode 13 of my tile scrolling platformer for example would be a splendid starting point it's tile based has great platforming scripts and a built-in level editor and encoding so sure it's a bit Mario themed right now but it doesn't take much to replace your players costumes very exciting and the level tile costumes too now I had to quickly knock up some bricks and a shiny Red Cube to be pushed around then scrap that annoying music Rec configure a few scratch lists and then with a level editor working I could mock up a quick level awesome and here we go okay no animation yet just the basic standing frame but it looks good and the movement around the level is all there the Collision detection is all almost right I'll make sure to tidy that up shortly but first let's get the player animations working I found the paint Sprite script and added in both the idle animation for when speedex is zero and otherwise we're walking beginning at costume 12 and cycling through for the next 12 costumes let's see that in action and there it is all of my hard work finally paying off and yes Vector art would have looked a bit smoother but that bit map 50% scaling trick does seem to be working pretty well for you what do you think of the look of [Music] this now let's fix the player height a simple change to the player's height variable there we go but there is another problem head collisions are not pixel accurate and I'm getting snagged on this this block after a little think I realized it was due to how I checked for collisions at my head level by adding the height variable which is actually half height and that's fine for detecting feet collisions but in a tile grid this point represents the tile above the player so I need to bring this down by a tiny amount which we actually already are doing for the width don't excellent bug squashed so the basic platforming had all fallen into place real fast that is assuming we actually want to move around like Mario well actually no in my cubes game the player character shouldn't be able to jump what so how do they get around well when it comes to these cubes I want the robot to be able to climb up over them and for that I will need spriter once more to sketch out a fun climbing animation I already had a cube of the correct size which I could import and that was the starting point the next pose would have the player jumping up and grabbing the top of the cube I wasn't exactly sure what I was doing something like this perhaps and of course the final pose would have the player Standing On Top of the cube now I just needed to create a realistic scrambling pose to fit in the gaps perhaps if the back leg could reach up next along with the hands and then then with the hands on top they could push the player back to their feet yeah lots of back and forward tweaking until finally I had something that looked like this now you might think the animation looks a bit too fast and smooth but don't forget that when played in game this action will be repeated over and over and if they climbed too slowly then it will end up getting annoying so this was my compromise with the cube hidden I can now export the frames and the fun bit importing it into scratch a new player action climb Cube animating the costume 24 and onwards and for the time being I'll replace the jumping code with a simple change to the climb Cube action starting at frame zero so while climbing all other player actions are disabled we just play back the climbing animation half a frame at a time to keep it slow and once it ends I reset the action and let the game continue and look at this it plays back real nice now obviously we shouldn't be able to climb up into another block and we shouldn't teleport back down to the floor afterwards and we shouldn't be able to climb into thin air but that's all fixable stuff and this animation is looking Sweet let's fix this teleporting issue the climbing animation has our player climb up the block and end at the top but in reality this Sprite hasn't moved it's just an animation so on finishing we appear back at the starting point to fix this we must end by physically moving the player to match the end frame I'll try changing x x 16 that's half a tile and changing y by 32 a whole tile up oh my gosh that was a good guess it's spot on and man it is fun running around climbing over blocks and it's the player animations that really bring this to life oh oops I need to account for the climbing left too I can use that old Direction divided by 90 trick very smooth I wonder if this is getting you excited to try out some key frame animations yourself you know what I'll pop a link to a studio under the video in case you manag to create anything with spriter that you want to share but perhaps I'll need to make you a dedicated tutorial first let me know in the comments well that is very entertaining but it's definitely not right I need to enforce some ground rules climbing requires a solid Block in front of the player and that block must not have another solid block on top of it I can use the old get TI app Block adjusting the X to look ahead of the player that will confirm the Block in front is solid and then the block above we need to add 32 to their y position and confirm that the tile is not solid not a hash I can now clim up to the right which is great but not to the left hm hold on let's try a larger offset sort it it's nice that the level is starting to feel solid and the animations make it all the more believable now I've left the best to last the bread and butter of this puzzle platformer I need an animation for the player pushing a cube across the floor now I thought I might be able to clone the original walk cycle and go from there but after tilting them forward I quickly realized that this caused too much of a change to the rest of the bones so after getting the limbs in position I scrapped the rest of the animation and began working at it fresh it was helpful to keep referencing back to my previous walk animation now I'm not saying spriter does all the work for you far from it but the results are really very satisfying I think this is pretty believable let's get it into scratch here they are now I simply switch to display the push animation whenever the space key is held down it looks a bit like they are sleep running sleep running a thing anyhow they're moving far too fast to really do the animation any justice hold on I can fix that there we go rather than switching to the idle animation when pushing against a solid wall I now now continue to play the pushing animation just very slowly and now we can really see every frame and it's very smooth indeed but I'm not quite done yet as we can still do the push moonwalk oh and if you are wondering why this second cube is no longer solid well I've begun the job of switching over to making the cubes enemy entity Sprites of their own and as such they are no longer solid until that is I make them solid again I know so confusing but I hope you'll tune in to the next episode where I'll attempt to make these cubes pushable yeah that's where the coding really starts to heat up how many cubes can you push what happens to cubes on top of other cubes do cubes fall when pushed off a ledge and how do we get this all to work together it sure is an exciting journey and I can't wait to actually share this game with you so watch out on my Rift patch profile as I begin to share early Alpha releases so that you can follow my progress thanks guys for watching if you enjoyed this video then please smash the like button and subscribe to the channel checking the Bell icon so as to be alerted the moment the next video drops in the meantime have a great week ahead and scratch on guys [Music] n