MonoGame Tutorial 2 | Structuring Your Project And Making Templates

hey guys it's me fizzle and i'm going to show you guys some cool tricks you can do with mono game these are things i do with every single one of my projects because they help make it tidy clean readable user friendly all the you know all that stuff so i'm just going to call this um visual example sure and we're just creating a normal mono game game if you guys don't know how to do this then in my first tutorial i went through it step by step and every instruction on how to download the content pipeline and the mono game new get packages so let's start with the first things that i usually do with a project so in this case i don't like using the underscore name and convention because i come from a background of java c c plus plus c sharp so i'm going to press ctrl r and just get rid of the underscores in these variables so that i can use them type them easier next i'm going to press ctrl x to get rid of these comments and unneeded code which leaves us with just the bare bones project here and now what we're gonna do is make our graphics manager a public static variable and i'll tell you guys why in a few minutes uh if you guys don't know what a static means it means that any class who wants to use this variable doesn't have to inherit the class so normally you'd have to do like game one g equals new game one and then g dot graphics right in this case we can just call game one dot graphics and this can be used from any class with any accessibility as long as it's using the right name space so keep that in mind next i'm going to create a few folders oop that's the wrong button i'm going to create just a few folders here add new folder and i'm going to call this core so what i put in here is the core elements that make the program run or any single-handed components like if we had a class for a ball that takes you know a texture and a rectangle i'll put an i'll put in there so now i want to make sure that it's uh that it's correct in the right name space i'm going to add the dot core to this class and dot core to this one and now i'm going to create an abstract class if you guys know what abstract classes or interfaces are then you'll know exactly what i'm doing but if not just bear with me while i explain it i'm going to call this component just because i can never come up with a good name to call it so i'm going to make this an internal abstract class and what we're going to do is create a few methods the difference between an abstract class and a normal class is abstract classes you can't set up methods you can you can initialize them but you can't tell the method what to do and it's pretty much just a cookie cutter class that you can inherit from any other class such as game one as you can see game is an abstract class because it doesn't as you can see none of the voids do anything i'm not actually sure why it's not using an abstract method but it's okay if you guys are ever wondering what this means this is a deconstructor it doesn't really do anything that's important it just well when the class is done being called it just deletes itself pretty much from memory anyways back to what we're doing i'm going to make some methods i'm going to make an internal abstract void and i'm going to call this uh load content i usually call it load or a net or whatever and this we're going to give it content manager and as you can see we have a red line here meaning we have to implement microsoft x in a framework content now it goes away and as you can see we're not initializing anything and we can't tell to do anything like content load we can't tell to do that in here this is just a cookie cutter class that other classes are going to inherit that's why we use a semicolon and you'll you'll see about that minute and we're going to make a few more internal abstract voids i'm going to call this update and take some game time i'm going to resolve and add framework i'm going to add sprite batch and our abstract class is complete we don't have to add anything more to it and this class is going to be used so many times throughout your game project next thing i want to do is create a scene manager so what a scene manager does is it differentiates different scenes from each other such as a game scene a menu scene a a setting scene maybe a pause screen scene so that it doesn't draw and load contents from other scenes so if you have the game scene active you won't be able to see anything else from the other scenes and it won't be loaded which helps with memory and it will make the game actually not look like a complete mess so i'm going to add a new folder i'm going to call this managers what goes in this folder is anything that manages another class in this case it's going to be our scene manager and in our core i'm going to create a new class called data this class is going to be a very special class it's a public static class what a static class means just like the variable in game one is that we don't have to initialize and inherit data to access its um variables so in here i'm going to create public static um int screen width i'm going to give it a getter and setter property which if you don't know about that that's a whole long lesson but just um [Music] i don't i'm not gonna get into it here it's not too important but just know we need it and i'm gonna set it to sixteen hundred i'm going to copy and paste this give it screen height property and give it 900 i'm going to make a public static full exit set it's to false initially and that's pretty much all the variables we need for now now we're going to come back to game one and set this so we're going to say graphics dot graphics device viewport.width equals data dot screen width and as you can see we just accessed the variable with literal ease um graphics report is it not viewport oh graphics device dot sorry dot preferred is it viewport dot prefer where is it okay sorry it's just graphics dot preferred back buffered width equals screen width copy and paste that change this to height and change this to screen height next anytime we're doing anything with the graphics window window we have to use the graphics.apply changes method and what this will do now that we run the game is make our window 16 1600 by 900. this is a good size i think i don't like full screen games and they're pretty hard to get out of unless you make a exit bind so for now work for this tutorial we're just going to use 1600 by 900 but just know if you change any of these variables like 1920 by 1080 it will do that another good thing about these variables is that if we want to get the screen bounds in any other class we can do that through here or through game one's graphics as you can because in graphics there's a graphics device viewport dot bounds this will give the screen width and the screen height in a tuple i believe or a rectangle actually so we're just what we're doing here is making all of our variables that we need from other classes accessible for those other classes now let's work on our managers but before that we need a few variables for our managers here i'm going to use a public enum and the reason i'm not using the static keyword is because enums by default are a static type variable so in this public enum i'm going to call it uh scenes and what we're going to give it is a menu scene a game scene excuse me a setting scene and that's good now we're going to use a public static scenes i'm going to call it current state give it give that a getter and setter and set it to scenes.game so or actually we're going to set it to the menu first we want to be able to see a menu so now we're going to head back to our game and add a new class in our managers folder because we're going to need to go back and forth between the two now i'm going gonna call this uh game state manager you're going to be a partial and internal partial class if you guys don't understand what accessibility modifiers are they're not important this is pretty much the same as if you were to just do a public class as long as your class isn't private which i'm pretty sure you're not allowed to do then you're good so now we're going to need three methods our up our content our load content our update and our draw and it just so happens that in our component class we have these three methods stored with the correct um parameters so what we can do is use this is use a full colon which means game state manager inherits from and we're going to give it component and as you can see physical example this class is in the managers section we need to inherit core so if i press control period as you can see we have two options using system component model or using visual example.core we're going to use core so now that we inherit that we're going to get another error because when you implement an inherit an abstract class you have to have every single one of its um voids or how do you call functions or and variables so if i press ctrl dot again i can implement abstract class and i'm going to move this down so it's in the right order and as you can see it implements it as an internal override meaning that if this class is implemented in another place let's say we implement it in another manager the override is separate for each class in java i don't know why but it's it's like that anyways now we have our three voids and we can start doing things so as as a first example we need to now make a switch and case statement so that we can switch between these three scenes so if i do switch and i call data dot current state if i press control period i can add the missing cases and we're going to do this for the update and for the draw so now what we're gonna do is come back to our game one class and create an instance of game state manager i'm gonna call it gsm and enter initialize gsm equals new game state manager and load content gsm dot load content and pass through our content manager gsm.update pass through game time sprite batch begin sprite batch end and gsm.draw with sprite batch now we have a pretty structured class except we have no scenes added to here even though we have things called you know data scenes menu data.seams.game we don't actually have those classes so i'm going to create a new folder where yeah add a new folder and i'm going to call this scenes so for a class i'm going to call this menu scene and add a new class game scene the reason why i'm calling it scene is because game and game one are taken already so it will interfere with the project if you would name this class just game so now let's go to our menu scene and do some stuff in in a scene i usually have three voids which is load content update and draw and oh wait it just so happens we have that so using the same thing we did before we're gonna inherit component from the core import the abstract class and get rid of these so i'm going to copy this over to our game scene and here compo core that didn't that didn't copy over exactly how i wanted it but that's no biggie okay so now we're gonna come back to our game state manager and say private menu scene which we're going to have to use uh fizzle example dot scenes ms equals new ms private game scene gs equals new game scene and here we can do ms dot load content pass through our content manager gs.load content password content manager and in these parameters ms update and here gs update same thing down here in our draw method ngs.draw and now we have a structured program now let's say we want to uh change scenes well for this i'm going to create a button and because i don't want to use extent monogame extended tile map i'm going to just use a texture as a button as a placeholder so i'm going to sorry file which one is it it should be okay so it's already in here okay so right click add existing item i'm gonna go to my desktop because that's where i have a button and we'll put these three buttons in there because they're the first thing that i saw so i have them strategically named as button 0 1 and 2. and you'll see why in a minute so we can go to our menu scene now because this is the first thing that the users will see is our menu scene we can now start drawing and adding things to it so now let's just i'm going to code quite a bit um i'm going to code the buttons in so i'm going to make a private texture 2d i'm going to call this buttons and give it a new texture 2d give it three as a capacity what is your problem cannot convert oh private rectangles and that's going to be an array as well and for continuity let's say private cons and max buttons and can pass it through like this just so that if we ever need to change it it will affect both of these now we can say four and i equals zero eyes less than buttons length increment i we can do buttons at index i equals content load texture 2d and let me say [Music] button at i button rex i is equal to a new rectangle and in this we'll say we'll start them off at zero zero just do buttons at zero zero buttons at i with i'll explain exactly what i'm doing in one second we'll actually divide it by two okay so we'll say that plus increment value times i now we can do four into i equals zero i is less than buttons length i plus plus sprite batch draw buttons what do i keep pressing u buttons at i button rex i color dot white okay that was a lot oh there's still a little bit let's divide it by four oh that's 47. okay let's start them off at maybe 125 changes like 175. okay now we have three buttons so now explaining what we did here for every texture as i went through in my last tutorial we need a rectangle to support that texture uh and with that rectangle we can access the bounds we can change it we can move it so what we do here is i created a constant and of increment value so every time that this function is called what a rectangle has is four properties it's starting position at x a starting position at y its width and its height so what we're doing here is we're setting the initial start value to 125 plus increment value times i so increment value times i the first time uh it's going to be 0 so it's not going to increment then it's going to be 1 it's going to inc so it's going to increment by 175 and then it's going to be 2 which is going to increment by 175 times two so basically it moves the buttons down for each iteration through the loop here what we did is in for the button throughout every index we load the texture into that variable here so content.loadtexture2d which is the type that we stored up here and we called it button and i'm using a concatenated string which has a dollar sign meaning that i can put functions and stuff directly into a into a string so if i wanted to say console.writeline i don't know test this would be wrong because it's looking just for a function but that's basically what it allows you to do as you can see we have button 0 button 1 and button 2 which match up to our i so i starts at 0 then goes to 1 then goes to 2 meaning we load in every single button that was a lot of information and i'm sorry guys it was a bit messy but let's continue next we have our draw method and in this method we iterate a for loop because we're using an array so we can grab each index as you can see we grab the first button and at its index we grab the first buttons rectangle so it matches up here and we draw it as white and it'll just iterate until it reaches three okay so now let's add uh some quick keyboard input so that or sorry mouse input so that we can click the button so let me add a private mouse date ms and old ms and in our update function we're going to set old ms equal to ms ms equals mouse dot get states so what this does is that update function and draw function update 60 times a second so 60 frames a second so the first thing that it's going to do in the update loop is set old mouse state equal to our current mouse state and then set the mouse state to our new mouse date basically meaning that if we hover over a button then the old mouse state will get that one frame later or one tick later this is important when we want to make sure that the person has released the button click before another button is pressed so now we can say if mount uh if mouse or ms dot left button equals button state dot pressed and we need actually one more variable i'm sorry a private rectangle msrect so just like every texture the mouse needs a rectangle that we can assign to it so in here we can say ms rect is equal to a new rectangle and it's going to want four piece information x a y a width and a height so its x is going to be mouse dot x its y is going to be mouse dot y and it's going to be a one pixel by one pixel meaning that it will right at the tip of the mouse will be its collision point so let's go back to our statement if our left button is pressed and our mouse rect intersects with button wrecked at let's say it clicks the play button we can say data dot current state equals data scenes game so if we run the game now if we click play it takes us to our game scene let's do a few more cool things before i end the video we're going to create a small if statement here so if msrect intersects with button rex at index i meaning if it intersects with any of our buttons then the statement becomes true so then we're going to copy and paste this draw method and the way that uh sprite batch draw works is that anything that's drawn or put in front so let's say i put this in front here it will draw that first or it will draw that last so that that means that it's overlapped on top of anything else and it becomes the first element you see so this would be drawn first technically and then if this statement's true it will be drawn on top of it so we're going to set it to gray so now if i run this if we hover a mouse over any of the buttons they become [Music] a different color as an indicator showing that they are drawn gray so now if i click play does that and we can just quickly do an exit button so let's go data oh we already have exit so we can come back to menu scene and say elsif mouse but recta intersects with two then we can say data dot exit equals true now we can come to our game one come to our update and say if data.exit then exit now if we press the exit button it exits so now you have a structured and in-depth program that does different things like has different scenes and uses abstract class to implement different objects so now what we can do is because this project is a really good starting point for games what we can do is come to project is it project and say export template we're going to make this as a project template i can call it whatever i can say test template and say finish so now we can close visual studios i can reopen it i can create a new project and search for our template name here it is our test template and we can call this fizzle game test video i don't know click create and all that code and structuring we've done before is now here and we can do whatever we want to with this code without affecting the project template so it whenever you make a new game you can make it from the template and you have a starting place so that you don't have to code all of the game states the states changing and everything like that so i know there is so much information and i explained it in a rush so if you guys have any questions just let me know and i would be happy to answer them but uh thank you guys for watching i hope i was able to help and take care

Channel: Nicholas Chrysanthou

Views: 282

Keywords:

Id: 39wG9zA90wI

Length: 28min 33sec (1713 seconds)

Published: Sat Sep 25 2021