Making An Animation System | Game Maker Studio

hey dudes my name's blaka and i've been continuing work on my rpg brawler game x versa developed in game maker studio 2. i've already done a lot of work in developing control systems for the game but what i really didn't have yet is a great way to control sprite animations i need it to easily control what specific frames of animation are played when specific actions are taken like if a character walks to the left it should play the left walk animation or for another example if a torch is on the wall and it runs the burning animation but every now and then it plays a flicker animation i wanted to write a system that controls all of this but makes it really simple to add or set animations and keep track of everything so this is what i came up with [Music] normally i use a program called a sprite to design all my characters and their animations when i'm animating a sprite i usually use tags to name an animation sequence so if i make an animation sequence of my character running left i just tag it as run left because this is how i design my animations i wanted my animation system to just use tag names so i can name an animation sequence and just call the tag when i want the animation to play so to start making the animation system i started with an empty object that has a sprite with a few different walk animations in it it has an empty create step and destroy event and we'll use all of those later this object will be used to test the system so we can give it a really simple control script in its step event that would just make it move left and right if i press the left and right arrow keys now if we place the object in the room and run the game we can just see that all of the animations for the sprite are always playing and if we press the left arrow key it moves left and the right arrow key makes it move right obviously this isn't what we want to happen so we'll need to write the scripts that control all the animations first of all let's start with the types of animations the system will support we can make it a new to define all these types the first one looped is the most common type where the animation will just loop after it finishes the second one chained is more complicated but essentially it can automatically chain together animations this can be used for the torch example where a torch will play a burning animation for a set number of times then play a flicker animation and then go back to the burning animation and start over the third one finite will support an animation that loops a set number of times like if we only want the animation to play once we can set it to be a finite animation of one we need a few data structures to keep track of our animations so let's make an init function that would just be called in our object's create event animation map is our map that will hold all of our animation information maps are a type of data structure that contain key value pairs where a key can be a string or an n and the value can be an object but in our case the key is the tag name and the value is an array that holds information about the animation current animation tag will just hold which animation is currently set and animation iterations will be used for finite and chained animations for how many times to loop an animation image speed is an internal gamemaker variable that determines how quickly the object's sprite animation plays where image speed set to 1 plays at the game's frame rate where 1 is the default because we made an init function we also need to make a destroy function since we're using a ds map data structure we need to clean up the memory for the map when the object is destroyed now we can add our functions to add the different types of animations we support first we'll make a function that adds loop animations this will take in a tag name the scale x of the sprite the scale y of the spray the maximum image speed for the sprite and the starting frame rate index and the ending frame index the reason we need the sprite scale x and y parameters are because often times i'll only make a run left animation and then mirror the animation by setting the scale x to be negative 1 for the right animation and i'll show this a little later anyway all this function does is store the animation information as an array in our animation map data structure that we made in the init function so we can access it later the next two functions are basically the same thing so we can start by copy and pasting the last function but for adding chained animations we need to add two parameters one being the repeat amount and the other being the next animation tag repeat amount is how many times the animation will play before it moves to the next animation tag and then we'll just add all of this to our map like we did the loop animation finally for the finite animation it's the same as the loop animation except we need to add the repeat amount which is like the chained animation except it won't move on to another animation when it's done now that we have a way to add all the different types of animations and keep track of them we need a way to set the current animation let's make a set function all this function does is set the variable current animation tag but to keep the right amount of times we have already played the current animation we'll only set the animation iterations to zero if this is a new animation next we can just make a get function which will return the currently set animation tag so we have helper functions to add animations and set animations but now we actually need the function that controls the animation since this will be used in the step event for objects i just called it versa animation step extended i named it extended because this version will take in an animation speed so that we can override the animation speed that was set in the add function if we want to the first thing we need to do in this function is check if the current animation tag is a valid tag if it's not then we don't do anything next we need to pull the image x and y scale parameters from our map using the current animation tag if you notice i'm accessing the array with versaanimationkey.scalex this doesn't exist so let's make an enum called versa animation key and add the different values that we store in each animation array i like to use a numes to access my array instead of just using numbers because it's easier to know exactly what i'm pulling out of the array also the benefit is that we can rearrange how we store objects in our array later on without having to change a bunch of code all right so we pull the scale x and y values out of the map and check if they're set to new one which i basically use known as a null value when i'm programming game maker studio if they're set then we update the image scale for both x and y and i'll explain why i checked for new one a little later now we need to update the animation speed of our sprite so we'll check if the animation speed passed into the function is defined if it is then we'll set our animation speed to the value passed in as long as it's below the speed we gave the animation when we called the add function otherwise we'll set the animation speed to be the value that was stored when we called the add animation function i use this because if i'm using a gamepad the analog joystick has values between 0 and 1. so instead of setting my walk animation to be a set speed i like to control it based on how hard the joystick is being pressed now let's pull out the other information for the current animation tag we'll need the start frame and the end frame the repeat amount and the next animation tag because now we need to make checks to make sure our current animation index is between our start and end frames so first we'll check if the current frame is less than the start frame and if it is then we'll move the frame to the start frame next we'll do a similar check for the end frame and make sure the current frame is not beyond our end frame finally we check if the current frame is the end frame and if it is then we need to change what we need to do based on the type of animation at this point we've already finished the animation so we can go ahead and increment the animation iterations and next we need to make a switch statement to change what we do for each animation for the loop animation we just start back at the start frame for the finite animation we check if we repeated this animation enough times if we did then it's done so we stop finally for the chained animation if we repeat it enough times then we need to switch our animation tag to the next animation tag now to go back i called this function extended because it takes in the animation speed but we can just add another function that does the exact same thing as this one but doesn't take in the animation speed if we don't care to change the animation speed during the step event and the script is done now all we have to do is go on color functions in the object events so let's go to the create event and call the init function which will init all the parameters the object needs then we can start adding animations the first animation we can add is the idle animation which will just have both the start frame and the end frame be zero so the animation will only play the first frame in the sprite i passed in no one for the x scale and y scale because i don't care which direction the sprite faces so if i run the game the sprite moves left and right and it only plays the first frame of the sprite forever because i haven't added any of the other animations now that we called the init function we also need to call the destroy function to clean up the memory from the map that we created in the destroy event all right so we need to go ahead and add our run left and run right animations so if you look closely they actually run the same frames 1 through 12 but i can mirror the image by setting the x scale to be -1 for the run right animation now in the step event since we have the checks for if we're running left and right or stopped we can call our animation set functions to set it to run left when it's moving left run right when it's moving right or idle when it's stopped and finally we need to actually call the animation step event so it actually updates the animations we run the game now when we press left arrow the run left animation plays and if we press right arrow the right animation plays and if we aren't pressing either it plays the idle animation so that means we're done with the animation system which is pretty sweet there are a lot of cool things that you can use the system for with the other types of animations like finite and chained so i hope you find it pretty useful if you don't feel like writing any of this code yourself i posted all of it on my patreon so you can just download it and pop it in your game to use anyway dudes that's it so see ya [Music] you

Channel: Blekoh

Views: 10,260

Keywords: gamemaker, gamemaker studio, game development, programming game, indie game, develop game, Blekoh, Video game developer, pixel art game, Blekoh Devlog, gamemaker studio 2, devlog, programming games in game maker studio, switched to godot, ex versa devlog, game maker studio tips, game dev, codingkaiju, indie dev, ohio, Making An Animation System, Game Maker Studio

Id: sFc07MhhnBE

Length: 12min 44sec (764 seconds)

Published: Wed Apr 14 2021