GameMaker Studio 2 - Smooth Camera Tutorial

so everybody just to follow up on my five-minute camera primer video that I did last week I'm just going to do a quick tutorial now to show you how to set up quite simply a tracking camera using the new system that will follow our player around and also that I can move smoothly between tracking one object and another and the ease of its position so that the camera moves smoothly and doesn't just sort of snap from place to place okay it's very very simple system and is a great starting block for basically almost any 2-d game or the vast majority of 2d games are going to use the sort of camera system really easily and so the very first thing you want to do is make sure you have a viewport setup for your camera okay so over here in the the room properties you'll see viewports and cameras unfold that make sure you've got enable viewport stick clear viewport background ticked and viewport zero I'm going to set that to visible and you can see that creates this big white rectangle here which shows what the default view as you set it up from here would be so by default by just creating enabling this viewport a default camera setup which will result in this white rectangle view right and by changing these properties I can change what this is using the basic view system yeah but we're not going to use the old views way of working with things we're going to work with a camera just so we can get a good feel for how it actually works but I'm still going to want to set my viewport properties to be whatever I want the viewport to be on the screen this is my first room that will define the actual sort of resolution of my game unless I do it in a another way so I set that to 640 by 480 so that when I run the game I should just get a 640 by 480 window and 640 by 480 pixels as well resolution so that nothing is stretched or like squashed or anything like that okay and so that's all I have at the moment over a default view and a default camera so for me I could manipulate that using various functions in-game because that basically let you do things the same way you used to in game maker one point X but we're going to work with new camera system so you can kind of see how that works so go ahead and right-click in object and hit create and we're going to make oh camera okay this objects can control all of our kind of camera behavior and just just going to decide exactly how our camera works so the first thing I want to do is add the create event for the camera and what I want to do is first of all create a blank camera and put it in a variable so I'm going on camera equals camera underscore create right close bracket that just creates a blank camera for us to assign some settings to those things that we need to apply are the view matrix and the projection matrix you don't know what either of those two things are I really recommend just quickly watching my five-minute primer video on cameras as I say it's not very long it's only five minutes and then I explain these concepts and how they work in a simple way we're just going to run through the code now so you can see how to practically set this stuff up so my first of all I need my look at matrix on my view matrix on their time VAR BN equals matrix underscore build underscore look okay and this creates the point in space for our camera it determines where about in 3d space our camera is and where it's looking at and what it considers to be up okay as its directions so that we know kind of how to rotate the eventual review we're going to get yeah so my XYZ for my position I'm looking from is going to be X Y and minus 10 okay because how we're going to use this object is this object is just going to be where I camp like we'll just manipulate the coordinates of this object to manipulate where we're actually want to point our camera okay and decree to keep that in a straight line on so we're not doing any weird angle II stuff I'm just going to keep the x2 exactly the same so it's x and y but for this one my Z position so that we're looking forward is 0 so we're looking from a position of X Y minus 10 to X y 0 which if you think in 3d space imagine the camera can being in front of the screen looking towards the screen which is what we want and the last thing we need to set is the X the up direction for the camera by saying X or Y up and zedopp them we basically create a vector or a points-based determines which direction our camera considers to be up so for this I just want Y to be open the way I do that is by typing 0 for X up 1 for Y and 0 for 0 ok and then finally we're at the end of that function that's quite long there's a lot of stuff nice go into it we now need to type a function with a longer name but with less stuff to actually put in it um Pete bar and bar PN which is going to be our projection matrix matrix underscore pills underscore project shrim I can type underscore ortho which creates an orthographic projection you can also do perspective projection if you're doing 3d stuff um but we just want a simple orthographic 2d projection okay if you don't know anything about what is what an orthographic or perspective projection is a lot of difference between noses I recommend looking in the manual just if you middle click on this I'll bring up the game making manuals good description in there of how that stuff works all we need to provide for orthographic projection is the width of our camera so 640 the height of the area that we want to capture which is 480 the minimum distance from the camera that we want to render so I'm gonna set ups I'll make it 1 okay so like one pixel in front of the camera or whatever one unit of space and the Z far is the maximum distance we want to render I'm just let's let that swing massive like ten thousand okay simple as that for that there's two matrices and then we just want to apply them to the camera that we just created so there's a camera and for set view met two camera VM and camera you're so set Raj Matt to the camera and P n ok so we're taking that camera object that we created and we're just applying those two matrices respectively okay after we've done that all we need to do is actually assign this camera to a viewport because we've got all these settings in the camera we've got a point in space and an area to look at and now we just need to give it a viewport for it to actually render its output to okay and that's why we set up a viewport in the room to begin with we just did in a number zero so I'm just gonna take view under still camera open bracket close bracket with 0 equals camera that's really as simple as that now just to show that working I can just place this someone and I'll place it somewhere different to this rectangle so we can kind of get the idea so if I place it here so we should see these little flowers and the little dude that just walks left and right constantly and so going to room that now yeah so we can see these little flowers I do like removing left and right constantly like that represents the center of our camera now which is an interesting carrier of doing this rather than working with views where you would generally be working with the top left of the camera position when our just working with the center again we can change either width and height which gives us a very easy way to sort of zoom in and out as well as our game just by changing the projection widths and height respectively that's a very quick and simple way to sort of zoom in and out of your game with a camera now but what you don't want to do any of that we want to follow our player object around okay that's sort of a very basic common use of a camera right um so in order to start setting that stuff up I'm going to create some simple variables here in the create event first I'm the type follow equals Oh player so I'm going to use follow to be a variable that we track the objects that we want to follow and I'll write in something in in a minute that will set it so that if cam follow equals no one the keyword no one which just translates to minus four really but as useful as a way of saying no instance or no object um that yeah as I said that variable is just going to attract which object we happen to be following and it gives us a really easy way from any other object or any other piece of code to be say with a camera follow equals some other object right and just makes a really simple system to make it so you can follow any object that you want okay so having set that variable up I then want two more variables x2 equals our set of 2x and y2 equals y because we're going to use exactly the same system I used for a game next to do 1.4 tutorial for moving the camera around with nice simple easing okay which can use these two variables x2 and y2 and that's the x coordinate we're moving to and the y coordinate or moving to okay and I'm just going to start loser's x and y so that wherever I place the camera in the game room is where the camera will start off you might want to manipulate out of your own needs but that's all I'm going to do for this particular tutorial so with those couple of variables set up we can now add the step event okay and then the staff of them all I'm going to do is move our current X&Y coordinate towards our x2 and y2 by a certain amount so that we get a smooth transition so rather than just jumping around and just saying x equals x2 we just want to move towards it in a smooth way so we move faster the further away we are from it and then we saw slowed to a halt when we reach it so to do that I'm going to say X plus equals so we're going to add a value to X open bracket X 2 minus X divided by 25 so it's the difference between X 2 and X divided by 25 so we're moving at a 25th of the disk distance between where we want to be and where we are okay which means that the further away we are the faster we'll move and as we get closer that will drop off until web moving of negligible distance because we've arrived right so why I'm going to do the same thing plus equals y2 minus y divided by 25 and that's all we really need in terms of moving this object around what I'm going to do in terms of actually determining what x2 and y2 are is I'm just going to set them to be the coordinates of whatever instance we're following which is assuming we are some effect F follow does not equal no one so an easy way to have the camera not follow anything or to do something different or special with a camera you can just set it to follow nobody and it will ignore this advice advice as if code is just a suggestion it will no ignore this instruction it will ignore this code be interesting if developing games you were just giving advice to all your objects so it does feel like way sometimes but no so if we're not following anyone it will skip this but if we are it will do this so x2 equals follow X okay so just going to take whatever is whatever instanceid is then follow whatever object ID and it's just going to move um it's just going to set X Q to be that x coordinate and the same with why why okay now the still wound still isn't really doing anything yet right so we need to actually make it so our camera moves to the x and y position okay we've done everything else we just need to actually adjust the things my camera now you can do that just by changing the view matrix again okay we just change that point in space that our cameras and I'll change our resulting view rectangle so far the M equals matrix underscore build underscore look X Y minus 10 just as before X Y a zero just as before and zero one zero just as before is exactly the same line of code okay exactly the same numbers because we just gained our more up-to-date X&Y after doing all this stuff and we're just going to adjust that matrix to be to represent on new position instead and then all we need to do is reapply that to the camera so camera let's go set new from the score map camera VM and because our camera is is still set still applied to this viewport we don't need to do that again that's really all there is to it so if I just run that now you can see in the create event we set follow to the O player so you see the camera is start on that bottom corner cuz that's where we place it in the room and then up towards where our players and you see if I move around now follows play around like this and just has really nice sort of smooth effect and you can change kind of how that feels just by playing with how you change the X&Y coordinate right so if you move this by a smaller fraction the camera would move faster you can make it bigger make it move slower you do here you could just set X 2 equals x 2 if you want to snap the camera or you can do whatever you like with it okay it's really up to you um just this framework allows you to view pretty much anything you want with the camera um just to quickly demonstrate away you can change it if I just create another event in here say key pressed enter right and I'm just going to type if follow equals Oh player our follow equals o over which is the name of my other object we will do that just walks around the screen helps follow equals o player all right simple stuff and all that's going to do is just change what object is in the variable follow so that now if I press Enter the camera moves to follow this dude or moves back to my player okay and that just shows you very simply how you can move the camera around are very useful for creating just simple cutscenes or like drawing the players focus or attention to something or doing whatever you want it's a really good starting block on really good foundation for a camera system for your game for more or less any kind of gaming eautiful so yeah that's really all there is to it that's a really simple way of just manipulating the position of the camera just like that just by changing that view matrix and reapplying it to the camera that's all you need to do is just those two lines of code just to move the camera once you've got it all set up in the first place and you can do the same thing with a projection matrix just to tune change the width some of the high over time okay simple as that that's how you use cameras thank you very much watching and I'll catch you guys next time if you find my videos to be really helpful and would like to see them more often with access to behind scenes stuff source code games and other goodies consider supporting my work by patreon and helping you do it all full-time these cool Wizards have done exactly that so shout out to them funding this video thanks Celia

Channel: Shaun Spalding

Views: 94,581

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, Cameras, Smooth Camera, Camera Easing, View Easing, Views, Viewports, GMS2, GameMaker Studio 2

Id: Pd54vNc2N4E

Length: 16min 33sec (993 seconds)

Published: Fri Apr 21 2017