GameMaker Studio 2.3 Sequences Quick Look!

so I just got my invitation yesterday for the closed beta of game maker studio 2.3 and I am so excited for a lot of reasons but the biggest one is because 2.3 gives us access to a renew resource called sequences sequences allow us to create a sequence of animations and events in our game using multiple resources they're great for animation and cutscenes there's a lot of things we can use them for but I want to start with something simple and if you're anything like me you've been playing a lot of Animal Crossing one thing that I love are the application icons when you open your nook phone there's these little animated graphics that show a simple animation there's a few things going on in each one too that I think we can recreate in game maker I like how each element and the graphic has its own motion they can pull spa Bupp and down animate and I like how some parts of it even extend past the border it really makes the animation alive as they pop out of their frame and these are the things that I want to make in my own icon so let's get started [Music] all right so I've imported three sprites into this project I've got a mask which is just the black box I've got a player which is just something I drew of a little character gave them a shield and a graphic of a sword so I'm only gonna need four sprites for the animation I have planned I'm gonna open up our sequences folder right click and click on create and a new sequence so the first thing we're going to do is take all of these sprite resources and move them into the track panel of a sequence and what this is is after I drag over a sprite into the track panel you see I got something that's changed quite a bit so all of the resources that I import along the track panel is called a track though these three sprites are each tracks I have a player track a shield track and a sword track off to the right shows you each frame of animation of the sequence right so so far this sequence will last for 60 frames and I can change that just by tapping in a new number here I'm gonna change it back to 60 I can either measure it in frames per second or I can measure it in time how long it would be in our minutes and seconds format I'm gonna leave it two frames for the time being I know the game's gonna run it 60 frames a second I'm gonna call this you know one second this animation so far so the way this works is after I dropped John subtracts you'll see these little colored boxes here and this is for how long of the animation these tracks will appear for so I'm going to focus on the player for a moment so you can see that it only lasts for two frames and I can use this scrub through the yellow playhead here to preview my animation just by scrubbing through um you can see after the second frame it disappears and that's definitely not what I want to happen so I'm gonna click in a minute I got that player sprite through higher 60 frames and now when I scrub three it's there the sword in the shield need to be extended as well move those out now why sequences are important is because they're for animation right it's either each one of these frames we can have any one of these tracks have a different position on the animation we can have it do different actions we can scale it we can rotate it we do all sorts of different and interesting things for each one of these tracks um so the way we do that is through keyframes so let's talk about our player for a moment if we were to have him start here on frame zero notice that we have a position keyframe here you know there's a keyframe set because you'll get this little white diamond that at whatever frame the keyframes out so on frame zero the position of the player is right over here we wanted to move it all we would have to do is move our playhead over to frame 60 and physically move our character over you'd see this dotted Latin animation to show where he starts on the last keyframe which is on frame zero right over here I'm six he's all the way to the right so it's over here and as I scrub my playhead through you can see that game maker has done me a favor and filled in all the frames of animation going from the left sided screen to the right side of the screen which is great I want to preview the animation I can push play right here and the sequence will play notice it just stopped if I want it to loop I can click on this and change the playback mode and now with a loop from 0-60 0 to 60 0 to 60 if I want a ping pong it back and forth I can click this again it see that he moves left and right whatever I set the play mode to here in the IDE will be the play mode when it plays in my game but because I want the animation to always repeat I'm going to change this to looping you can see what this looks like here so because I don't want my animation to go left to right I would like my character to bob up and down I'm gonna change this around a little bit so I'm gonna delete the last keyframe I'm gonna click on it I push delete you can see now when I play the animation I only have one key frame of animation so play yours gonna stay right at frame 0 which is over here I'm gonna actually move that back he's a center I'm gonna give him a simple bob up and down animation here notice that my playhead wasn't on 0 so it created a new keyframe make sure that doesn't happen so I'm gonna make sure I'm out frame zero and I'm moving back to the center I'm gonna say I'm just gonna be I'm gonna and a wing it for now notice that I don't have to create a new keyframe it it does so automatically whenever I move my character that's because this option right here is selected automatically record changes I can move my character without creating a new keyframe if I don't have that selected but what if I did want a keyframe here without this option selected I would go through and this is my position parameter I would click on this little keyframe toggle key on and as I click it you can see that this has been created here in the center I'm gonna pull Z to undo that Oh what tape frame 10 he's the character is going to move up a little bit and I'm gonna stay at frame 20 I want him back right where he started so there's two ways I can do that either I can move him down and kind of go back between frame 1 and want you to see but in these our way of doing that when it's earnest he's your way of doing that it's just a copy the keyframe so I'm going to leave my my back head at frame 20 I'm gonna click on the keyframe at frame 0 which ctrl C to copy what could push ctrl Z to paste this same keyframe at frame 20 and what that does is it takes the position that's saved at frame 0 and paste it back at frame 20 that's where my track head's at so frame 10 is still up here 0 and 20 are down here you can see that character has a little Bob to him notice though there's no keyframes after that so it stays at that position until the animation is over if I were to play that there's a Bob and a wait right so far so good the next thing I'm gonna do is make them make my character hold a sword and a shield because you can tell as the animation is running this sort of the shield aren't moving as well now there's two ways we can do this I'm gonna move the shield out of the way or now and a hold word here oh this looks like a good position of where I want my character to hold the sword the problem with this is as I play the animation the sword won't move with do two things here I can move the sword the same way I moved my player I can open up the parameters for the sword notice there's this is blue rather than white or empty there's a keyframe here at frame 0 I can go to frame 10 and I can move the sword up I can copy the keyframe and paste it out I mean this is Abid see the sword will follow through but there's a more interesting feature that I think fits us a little bit better cuz what if we did something else later on down the line so let's say we wanted our character we said oh you know what actually maybe that's not high enough and we want our character to move up a little bit more I have to go through and I'd have to edit the sword and the shield and that can be a little bit of a pain so what I'm gonna do is I'm going to assign I'm gonna delete the positional keyframes here for the sword I'm gonna take this sword track I'm gonna make it a child of the player track by making sure it's highlighted right on the center and clicking it here and notice that now we have this little hierarchy tree so now wherever the player is either positioned rotated or scaled those transformations will continue through to all of its children meaning that when the player moves the sword moves in its same relative position so I'm going to leave the sword right here and that's actually all I have to do in order to make the sword move with the player um the reason why you see this a little bit of lag here is because I have different keyframes still for the sword well if I deleted those it stays to its original position which is that frame zero I move that back up I do there it is so I actually don't have to make any key frames for the sword I just have to give it a starting position because it's a child of the player when the player moves it'll take the sword with it now that's not exactly interesting so first I'm going to take that the same concept here and I'm gonna make a shield I move my track head back to zero because I keep forgetting me to do that I'm gonna take my shield and make it a child of the player then I'm just going to position the shield where I looks good right here to preview my animation so now we have the sword and the shield moving with the player it's not exactly interesting right looks really stiff doesn't really look like the character is moving that much so what I'm gonna do is offset the sword and the shields animation from the player so I'm gonna say at the peak of the jump the little Bob here I'm gonna take the sword I'm gonna move it up a little bit and I'm gonna take the shoes I'm gonna move that up a little bit and then I'm going to copy the keyframes uhh I'm frame zero from 20 so now I have this light rise and fall of the shield so that's a little bit more in-depth here I'm gonna go one further I'm going to say also at this the top of the jump rotate these well the way I create a rotating parameter is I'm going to click on plus I click on rotation so now I have a track here for the rotation of the sword so I'm gonna keyframe this which is automatically at zero I'm gonna say at 10 I want this to be did up just a little bit um so what I'm going to do something or the shield I'm going to do something different with I'm actually going to add a parameter rotation by clicking this plus and clicking rotation again um I don't want this you keyframed anywhere but frame zero for now I'm gonna start the shield at a different position than zero I'm gonna move it out a little bit and position it down that way when we get to frame ten I want the shield to be a little higher and I want him to straighten out the shield and then at frame funny my character lands again I want this shield to be crooked out I'm actually going to move his shield out position is as well a little bit away from his body well in fact it copy the position keyframe in frame zero and paste it on frame 20 ctrl-c and ctrl-v again and check that out we've got a little bit of rotation here the stores looking a little funky and that is because I didn't copy the starting keyframe from frame zero it's a little bit angled now it's looking a little bit more smooth right it's got kind of a bob and a feel to it the character looks alive like he's actually shifting the sword and the shield with the motion of his body as he goes up and down something else I don't like however is it doesn't really look like the characters jumping it looks like they're almost kind of moving on an elevated platform and there's not a lot of motion to the body so I'm going to be scaling and stretching the player that they look like they have a little squash instruction so I'm going to wait until the character lands right at frame 20 I'm going to give the character a parameter track for scale now because I don't need to mess with the sword the shield I'm gonna click on these little arrows and collapse those down so that was just a little bit easier for me to look at um I'm going to say at frame 20 I'm gonna set a keyframe by clicking on scale notice that it doesn't have one right now Kolak on it I'm gonna say by two frames later for this scale I'm gonna click on this and add another scale keyframe I want the character to be at a this is it it's X scale and it's Y scale so this is how white it is and how tall it is so I want it to be 110 so I wanted a little bit wider and I want it a little bit shorter I say who frames later than that I want it a little bit thinner and a little bit taller and then I'm gonna say who frames after that it back at not a thousand one hundred and one hundred percent so what this should do is it'll land get a little chubbier little taller not back to normal notice that when we do this the scaling notice the sword in the shields scale with it again that's because we created the sword and the shield as children of the player so they will take on any transformations that the parent has whether that's position scale rotation in this case it's going to be this scale that they're inheriting but we don't have to create keyframes for them it just takes on the the transformation of the player that's keyframe the parent that's keyframe which would be the player in this case let's preview our animation so I noticed we've got a nice little jiggle but it's not quite a little squash so what I'm gonna do is I'm gonna drag these out so I did it every two frames so let's do he frames out just a little bit and I'm just gonna kind of ebb and flow of of just experimenting see where this takes us taking the animation now something that's interesting is that looks a lot better already we can actually see the balance of the character going through up and down so now we got kind of like this that'll jump up in this little resting point for the character role Bob we can also edit the keyframes as the animation is playing it stops you that's looking a little better if we want to see the animation slower we can actually change right now the dis animation is playing at 60 frames a second I light this number 30 just to see it in half speed just to kind of see what's going on here nice you got this nice little squash and bounce I'm going to leave that back at 60 frames a second now we have our animation one thing that's different though about the little app icons that we're trying to recreate as everything was conformed in a box right Oh sequences have something really nice called masks so we're going to add in another track here and that's going to be SP our mask and I believe it's this button right here it's gonna be add a new clip mask I'm gonna click on it and it's going to give us two folders a mask and a subject the mask is going to be our mask clearly so I'm going to click and drag that in here and our player is going to be our subject that's what we want to ask so noticed when we did that its head got cut off and there's a reason for that and I'll show you play the animation see how to see what's going on here you one thing we want to do is the reason why it's disappearing after two frames because this mask here is only available crimes to find a way to take that mask and drag it out to see let's preview the animation notice their heads getting cut off you can kind of see this round boxy shape so if we were to look at the mask sprite shape it's this rounded and a rectangle right so what this is doing is it's think of this as a window and it's using this as a window to look at our sequence animation that we created of the player with a sword on the shield back into the sequence and right now you just have a window into it alright so notice that when we play the animation there's a bit of strangeness going on now that window is just centered a little too low on this sprite we want his feet to be covered in his head to be bouncing up and down so we're gonna move that window up a little bit make sure the track head is back at the zero frame just like any other element I can click on the mask and I can click to drag it up to expose different view in that window so when I preview that animation you can see that the correct part is showing note that his head is being cut off a little bit I'm ok with that it's just a stylistic choice we can make it higher and make it lower and make it however we want oh the thing I want to do is add a background to this window because right now it just looks like his head and his feet are getting cut off so we want to give it some context um I know I've imported the sprite of the mask as the mask of this player animation but I'm also going to add it as a background because it's gonna be the same shape of the mask so I'm gonna click my sprite I'm gonna drag it at the bottom of this track I'm gonna move it all the way down on a double click to give it a new name has to not confuse it with the other one I'm gonna call this background and I'm going to move the position match ask I want to play the animation disappears because I need to move the track head back to zero when I import it make sure that this extends across all 60 frames so it shows the entire time and now we've got some context into how our animation is being masked we have three different components going on here we've got a mask a subject and a background we defined the mask as the spread of the mask our subject is our player the sword and the shield with the animation that goes along with it and below all of that we've added a background to give the mask some context the icon now when we play we've got a completed animation character jumps up and down the mask is taping off the top and the bottom of our sprite and its confined by this black image and we've got a nice little icon of a character with a sword and shield bouncing up and down something that animal crossing would be happy to have

Channel: Mash Arcade

Views: 4,058

Keywords: gamemaker, game, maker, sequence, sequences, easy, animation, tutorial, preview, 2.3, studio, gaming, gamedev, developer, fun, helpful, programming, gml, art, resource, beta, keyframe, dopesheet, curve, track, channel, parameter, scale, position, rotation, opacity, color, colour, alpha, blend, gms2, gms, canvas, animal, crossing, animal crossing, nook, app, icon, mask, masking

Id: zwAH8Kl7SGw

Length: 20min 16sec (1216 seconds)

Published: Fri May 08 2020