Camera and Viewport Basics | Farming RPG Tutorial: GMS2 [3]

hey guys I want us to have a look at viewports and cameras so at the moment when we run our game we're seeing the entire room but as I'm sure you know that's not how most games work generally at any time we are only shown a fraction of the level and the view that we have it sort of follows the player around so that when we move we can see more of the game world and we're going to implement something like that so while the tools that game maker has to help us with this they aren't overly complicated there's a few similar terms and it can be easy to get them confused so I want to illustrate what they mean before we start using them the first two terms that I want to explain are the room and the game window so the room is something moves already explored it's basically the game world or a level of the game it has all of the stuff for that level it has all the objects all of the tiles our game world on the other hand we have the game window and this is the window that the player sees when they run the game so the size of the window in the players monitor so they can be exactly the same they can have the same width in height and if this is the case then we'll be able to see everything in the room and there won't be any scaling we don't want to do that in fact we only want to share a small window into our room so to do this in game maker we're going to use cameras and viewports so the camera is going to be our window it's dimensions in position will determine how much of the room we see what's displayed to the player now and this is where I've seen people get a bit confused the viewport is the area on the screen where the camera view is displayed so the viewport is basically the player's game window now the size of the camera and the viewport again they can be the same but they don't have to be we can have a viewport be twice the size of the cameras view and this is one way to scale up the game so for our purposes for our farming RPG the viewer resolution isn't super important to the gameplay we're not really going to be hiding anything from the player we don't really need to confine the view to specific dimensions so I don't want to spend too much time on it right now because I'm expecting we might change this later I've basically discharging some arbitrary numbers that I think look pretty good with our assets and we'll be OK for you guys who might have different sized monitors so these will be the dimensions for our camera it's going to have a width of 750 pixels and the height of 420 so the camera this is our view into the game world this is how much of the room we're going to be showing at any one time and for the game window or the viewport we're going to be scaling it up and you might have noticed something here so these numbers there are multiples of each other and this is super important because if these aren't multiples if these ratios between these two numbers they're not the same and you do something like this instead the game is not going to scale correctly so instead of this you're going to get something like this so this is why we have to make sure that these numbers are all multiples of each other and we also want to make sure that we're not scaling in fractions of a number because we can end up getting pixel distortions because the game tries to render half pixels which it can't really do so if you're scaling up by two times then one pixel something that takes up just one pixel is going to end up taking two two by two but if we're scaling up by 2.5 then it's going to try and draw that one pixel at two-and-a-half pixels the engine is not going to like this and it's going to have to do some guesswork it might try and render that one pixel at just two pixels or three and the result will be an arbitrary mess so with all that said let's jump into game maker alright so the first thing we're going to do is come into the room and over here in this panel let's just move this up in the properties panel this is where we define how large our room is and in here are the viewports and the cameras so we can change this later I'm just going to come straight into the viewports and we're going to hit enable viewports I'm going to open up the first one it doesn't really matter which one we choose but we'll just use the first one starting at 0 and we're going to make this one visible so this means that when we run our game what this camera sees is going to be visible on our viewport on the game window and you can have multiple views visible at the same time and you can have different dimensions and they can be showing two parts of the game at the same time so this could be how you set up a split screen or something like that but anyway we're just using one and here is where we define the dimensions of the camera of how much of our game well that we can see at any one time at the moment as you can see it's the same as the room which is why we see everything when we run the game which is why even with this enabled if we run the game it will be the same as before and will see everything in the room we're going to change this so we're going to change this to those dimensions that we set before so that the camera we had 750 and 420 and for the viewport which is a player window and actually let me just show you what it would look like if these were the same you'll see that the game window take note of this size of the game window compared to what we had before it-it's just a smaller window right now if we scale this up by 2 we're going to get a larger game window a larger viewport there we go you can see it through my right it's not following any objects it's staying right there its position is zero zero the the origin for the cameras is anchored at the top left if we change this we're changing the position of the camera you okay so we're going to make the camera follow an object so we're going to click here and click object player we're not going to touch the speeds we're just going to keep that at the default but as for the horizontal and vertical border so these numbers control how far from the edge of the cameras view that our player needs to be before the camera will start to move if the player is centered in the view how far away from the edge of the border does it need to be before the camera itself will move so the lower the number the more the player is going to have to move so if we put exactly half of the width and the height then that means the camera will always be moving because the player is always going to be because it's always going to be in the center 375 pixels away from the left and right sides of the view sipping now let's just put that all right and let's have a look so we can't really tell because about background so let's just I'm going to just quickly make passion so I'm going to tile this as the background so that we don't just have one big green background we have nothing to anchor ourselves to deceive the viewers mooing so instead of a color which is what we had it set to I'm going to put a sprite so you can see it's only a pretty small sprite but we can tile it No looks hideous but that will do okay let's just run the game now and see if the view is moving all right so it's moving and I hope that it doesn't hit your head too much all right so this is a really easy way to set up the view we're actually going to do one other thing so for our camera we don't need it too complicated they will probably just be following the player all the time but if we have any cutscenes we might want to be able to pan the camera around so I'm actually going to create an object I'm going to call this I'm actually going to just call this camera sometimes what I like to do with these sort of meta kind of objects that aren't really a part of the game world they're really just for us for the programmer with only ever going to be one of these and I just won't put the obj prefix just so that when I'm referring to it in code they know that I'm controlling that important meta object we're not going to be assigning a sprite to this or anything it's just going to be the thing we use to control the camera let's come back into the room and let's drag in the camera and in the viewports instead of following the player we're going to follow the camera then when we come back into the camera let's just close this that we have a bit more room we're going to come into the step event and we're going to make the camera follow the player so we have a bit of abstraction here but this camera will be following our camera object and then that object will be following the player so this way we can control what it's doing if we don't want to be following the player we can make it fall or something else or we can make it act independently so actually what I'm going to do is come into the creative answers and we're going to set up a variable called following and we'll set this to the player just so that we can change this data if we wanted to follow something else all right and what I'm going to do is just put x equals following X so this will be the player's X whatever the players x position that's what that little dot operator means we're getting the x coordinate of the player and the y equals following shots why there we go so it's working the same as before so now I want to do what I mentioned about the bores I want to give the player a bit of leg room so that when we move we can move a little bit without the camera moving itself so I'm going to have that horizontal and vertical border so let's come to the create event and we're going to define two more variables we're going to go each border equals and I'm just going to put 16 you can put more or less if it feels a bit better to you and see border equals 30 all right so we'll come back into the step and we're going to change this so instead of having it exactly equal the player's exposition I wanted to stay within a boundary so I don't want it to be any less than the players position minus our horizontal border and I don't want it to get any more than the players x position plus the horizontal border I want it to be within 60 at all times and the same goes for the Y so we're going to use the function clamp so I'm going to go clamps and so down here it says we're going to clamp a value between a minimum and a maximum value so the value that we're clamping is the x value over camera and we're going to clamp it between two variables so we're going to clamp it between the players x position like I said before - the horizontal border to minus 60 and the same in the positive and we're going to have the same for y so I'm just going to copy and paste this and change these to Y and V and this one alright let's have a look there we go so now we've got a bit of legroom for our movement so the last little fun thing I want to do I want to make it to the if we're pressing a button that it won't be following the player and we can just move the camera freely so I'm going to go I'm going to make up a variable I'm going to call it smooth cam I'm going to make this equal to our keyboard check of the key and I'm just going to make this the C key so this variable is going to be true or false if it's true then I'm going to say I want to move the camera so if move cam I'm actually just going to copy and paste some code because we've done this before in the players movement so I set it up this way so that it's familiar from before from when we were doing the player movements that we have our input variables here and they're equal to the keyboard checks for a DWS instead of the arrow keys this time and we'll have the inputs here so this this little sum here is going to be equal to 1 0 or minus 1 and we're just going to times this by 6 in the player we had speed but I'm just going to put a number we don't really need these variables here if you want we can just cut this and put these directly in and delete this and it should work exactly the same so is going to let us move the camera around when we're pressing these buttons and with a speed of 6 and it is only going to happen if we're pressing the C key so the last thing we have to do is just say L so if we're not pressing the key then go ahead and follow the player and I'll just tab forwards I've done it in the wrong water this trip being down and this one should be up alright that's run again all right so let's press C and then hit those keys there you go so we can move around independently and if we stop pressing the C buttons it should snap back to the player all right great so that's it for the camera so that's all we're going to do today now that we've got the camera all set up in the next video we'll be doing tiles and Auto tiling so I'll see you guys next time

Channel: FriendlyCosmonaut

Views: 58,506

Keywords: farming rpg tutorial gamemaker, cameras gamemaker studio 2, cameras gms2, cameras gamemaker, views gamemaker studio 2, views gamemaker, views gms2, viewports gamemaker studio 2, viewports gamemaker, viewports gms2, farming rpg gamemaker, rpg tutorial gamemaker, rpg tutorial gamemaker studio 2, rpg tutorial gms2, gamemaker tutorial, gms2 tutorial, game maker studio 2 tutorial, game maker, game maker studio 2, game maker studio

Id: UNZ97-c3dhY

Length: 14min 5sec (845 seconds)

Published: Sun Jul 16 2017