C++ DirectX 12 Game Engine - [S01E01] - Creating Our First Window

[Music] hello and welcome to episode 1 of our tutorial series where we will be building a directx ready game engine this series will focus mainly on the win32 and directx 12 platforms although throughout our journey we will also be adding a few other features to both broaden the capabilities of our game engine and to also broaden our own skill sets as well in this episode we will be creating our folder structures setting up our blank project and writing the code for our first window at the end of this episode we will have our first working program to show so without further ado let's get into it the first thing that we need to consider when creating our game engine is where we're going to locate it it's a good idea at this stage to try and stay as organized as possible later when we have a larger project to work with there will be lots of independent files in which we need to keep track of such as image files or sound files and models and it's a good idea to have these in one centralized location for this reason i've gone ahead and created us a new folder and i've called this olympus mons i've located this directly on my main drive and this helps to give us as short and easy to remember a url as possible sometimes in the scripts we actually need to write this in so it's nice to keep it short and easy to remember inside this folder i've started to put us a few things just to get us started with i put in here a little icon file which is actually powering this folder it was a png that i used a png to icon converter online it adds a little bit of spice and it's really easy to do so i suggest you make your own i've also added this fold up for this episode we'll put all of our scripts from today's episode into this folder and each and every week there will be a new one to work with the only other two things in this folder are the license and the readme files supplied by github that's because this folder will be available on github if you'd like to follow along with the code please download the code from github in the description below that being said let's move on to create a new project we'll need to open up a new copy of visual studio 2019 and click on create a new project microsoft provides us with lots of great project templates to start with because we want to learn and because we want to do this from the very beginning we're going to click on empty project and next visual studio will then ask us for three things the project name the location in which we would like to save it and the name for our solution you may be able to see in our location that this is already set to episode 1 folder that we created earlier for our solution name i'm going to choose the olympus engine you can call your engine whatever you like but for this tutorial series we're going to call it the olympus engine for our project name i'm just going to choose blank project at the beginning we're going to be focusing mainly on setting up our game engine and less on any specific projects that we want to work for so for now blank project will do us fine with that all set we can hit create and move on now the visual studio is opened and our project has been created it's time to go in and change a few things that i think help me stay organized the first thing i like to do is just change the names of these folders the header files will actually be where we're keeping all of our public files and for this reason i'm going to change this to public under the same logic the source files is where we're going to be keeping all of our private files so i'm going to change this to private these two folders are actually set up with scripts in the background to put all of our scripts in these folders so it's a good idea to change these and not to recreate them once this is done i like to click on add new filter and just add us a source folder to put these two folders in this will help us to know that all of our scripts go in these two folders to match the only thing i like to do is change resource files to resources there's no specific logic to this other than the fact that i want it to match once this is done we can come up here click on switch views and go to our folder view this is a reputation of what our directory looks like on our hard drive i like to then click on blank project click add new folder and change this to source this will be so that we have one folder to keep all of our scripts in on our directory as well again later we may have image files and different folders that we want to keep in here so it helps to stay organized early on set up our project we're going to need one file in here so i'm going to click add new file and call this win main this is going to save as the entry point of our program i'm not going to add anything to win main at the moment but it just needs to be there to set up our configurations once this is done we can click back on switch views and go back to our project view this is all set up so that we can move forward and it's in a much more organized way now our project is looking a little bit nicer it's time to set up some of our configurations so if we right click on blank projects we can go to properties this will bring up our property pages the first thing i like to do is just come up to configuration manager and we're actually going to remove the x86 architecture a lot of the platforms for example directx 12 is going to need the 64-bit architecture and this means we're not going to need to actually set up the 32-bits so it's easier just to remove it now to do this click on edit click on x86 and go to remove make sure to remove that so and close that down there's actually a second one in here that we need to remove as well so if we go to platform win32 we can go edit click on the win32 and hit remove with that done we can close out of there and you'll notice in here we will no longer have the platform options we're always going to be building in x64 the next thing to set up would be our output directory and you can see in here we've got platform that is actually irrelevant now because we've just removed that so to start with what i'm going to do is i'm just going to replace that with project name that means if we put more projects in here later they'll all build in their own folder and that's handy put that in there and let's click on here the next thing i want to do is make sure that all of our build files go in their own folder and there's a couple of different ways of doing this the generally accepted way of doing this is to create a bin and an object folder but i like to be quite direct in the way i do this so i'm going to create a build and intermediate folder and this just helps me to stay organized as i say you can have it however you like but i prefer build an intermediate folder over a bin in an object folder now our output directory is looking good i want to just copy and paste that and we're going to put that straight into our intermediate directory i'm going to change build for intermediate and the only thing that i actually want to change here is just take this project name and i want to be able to put this before intermediate our build files will all go in the same folder but i want all of our intermediate folders to go in their own project folder so it's good to just swap those around now that we've done that we can just try and make sure that our project is set to the maximum version available for our system so if we come to windows sdk this is already set to latest installed version and of my time this is going to be this one here so i'm just going to click there that just means we're going to be definitely using that if we come down to here we can also just make sure that but this one and this one are set to the latest version available at this time of recording is going to be the c plus 17 standards there are multiple other things that we can do in these property pages to set it up and make it streamlined for us and we will be coming back to this throughout this series but at the moment this is roughly all that we need to do apart from one last thing if we come down to linker we can come down to system and we'll see the subsystem here is currently set to console and this would be great if we wanted a console box to come up and print it but we're making a graphics program so we want a graphics window to be able to appear so for this we're going to change this from console to window and as i say when we run this later this will now appear a window this is the only thing i want to set up for now in our property pages so if we click apply and okay that will be everything we need to set up and we can move on to actually our starting to write our code now that we've finished setting up our project configurations it's time to get into the nitty-gritty of starting to write some code and the first thing we're going to need is our entry function we added our win main.cpp file to our folder directory earlier but we yet to have added it to our solution and for this reason i'm going to go up to private right click and hit add existing item go to our source folder that we created earlier and click on when main.cpp this will add it to our solution directory now that's done we can add our entry function each program that we create is going to look for a specific function to operate as our entry function and this is the specific function that our program is looking for it's an integer based function and it's called win main as such we need to return an integer at the end to make this operate correctly we need to include the windows.h a header file at the top the win main function asks us for four inputs now we don't need to specifically put these in this will happen automatically however we can take the information out from here the first input is the h instance class and this is basically a representation of the entire program that is running the second input is a much older function that really doesn't have much use now it was for when you needed to run in the previous instance of a program in order to change the functionality and it doesn't actually operate correctly on windows 10 or onwards now we can actually just remove this straight from here the third input is the command line input and this gives us the ability to put different commands in at one time to actually change the functionality of our program later that's useful we might use that the fourth and last input is the command show input and what this is is this is the command that we want to use on whether we want to show the window at the beginning or not in general we'll just say yes please show the window now we've added this function this is a fully working program on its own and we can go up here and hit the green button to actually run this program it will compile quickly and then it will flash orange that means it's working without problems at the end of this episode we want to have our first window displayed on the screen and to do this we're going to need to follow three simple steps these steps are as follows first we'll need to create a windows class and give it certain details such as its name and its sizes next we need to use that class to actually create our window and to display it onto the screen and thirdly we'll need to create a message listener in which we can accept messages that could change the overall features of our window to get started we're going to need a new class and that is going to start as a wnd class ex you can also use wnd class it works very slightly different but it doesn't come with as many features for that reason we're going to skip straight to the wnd class ex and g make benefit of all of the great features that come with it there are a lot of variables that need to be put into this feat into this class to actually make it work correctly there are also four that i like to just put up at the top here because it's very unlikely we're ever going to change these no matter how many times we create them the first variable here basically says the size of our class and we just feed back in the size of itself it's very simple this is like initializing itself the second says that on our style we want a horizontal redraw and a vertical v draw this will be the same for every program we make the next two variables are actually to add extra memory at runtime for our program this won't be needed for us because we can draw as much memory as we like later and therefore we don't need to feed in anything new now the next thing that we need to add are a few things that we could change but i don't think we will ever change for this entire tutorial series this is the cursor and the background color the cursor is currently set to the basic default cursor that you would see normally and the background is currently set to a null brush that will be white a lot of people do like to actually change the color of the background but once we initialize directx 12 this is going to do it for us so this is not actually needed right now the next thing that we're going to add is something that we will be changing during this tutorial series and that is the icon we won't be too interested in this episode but we will come back to this later at the moment we're just feeding in the idi application and this is the basic default icon for all applications there's two of them because there's two icons that we need one comes from the window itself in the top left hand corner and the other one actually appears on the icon taskbar itself for that reason we need to the next thing we need to do is create a class name and name for our class now we could put this in here directly but that would be bad form what we should actually do is create an actual variable for our class name so that we can use it multiple times in the future what we're going to do is we're going to come up here outside of win main and just drop in a w character that is a wide character it's very similar to a basic character but it's slightly longer this is commonly set to an array of a window class and it's got 256 different possible characters that we could put in again if we're being 100 correct we should not have this 256 number in here mainly because it doesn't explain why or how we're using it and that is bad form if someone else was trying to read our code someone might say what does this number represent and we have no way of showing it so what i like to do is just create a definition or a macro for what this means i've set this to max name string and it's set to 256. for this reason we can just put this in here and now everyone knows that the maximum string size of a name for a class is going to be 256 and everyone can understand this a lot clearer with that done we can now use our window class to initialize our this actually has put across as the menu name this should be the class name here so i'm just going to change that around there and we'll set up our menu in a moment there we go that's done now that set correctly to class name we can put this in here but you may have noticed we haven't actually initialized this at all we haven't said what we want our class name to be so if we come up inside win main this time at the very beginning we can put up a section in here which should be initialize global variables perfect save that to a z we can then actually initialize our window class with what we would like it to be and to do this we're going to use a wcs copy which is for use in w characters we're going to input the window class variable in here and we're just going to use a text variable to add a tutorial1 class to the name you can save that off and that is now set and can be used in here a moment ago you may have seen me adding in by accident the menu on all windows you will find menus such as this up here on some windows we may want this but specifically for a game window this is not normally included so to set up our menu i'm just going to not point to it at the moment there's lots of documentation on how you can set up a menu online but we're not going to be doing it for this series the next thing that we need to add is a reference to the instance of our program that's running and you may remember earlier if this is the ball that we're looking for this is an instance of the entire program running we can very easily now put this in here and put this in here and this will work but this may not be the only program or the only function that is looking for this variable if we create multiple classes later and we need to use this variable in those classes using this methodology means we would need to pass this variable into each new class and that could be a rather annoying thing to do having to keep on passing reference upon reference so there's actually a quick and easy way to do that we can actually get rid of this completely and just for reference we can actually do that with all of these every single one of these inputs has its own command that we can use to draw this in later so we won't need these up at all we can just put the actual variable types in now how do we get back our h instance from earlier there's a specific program or a specific function that i like to actually add and that is the get module handle we can just throw this up here and i put it as a definition the get module handled function will actually call back our h instance as if we were just drawing it from here which means we can use this in any class or function that we want without having to pass it in first it's much easier so let's just use this as i said a moment ago we're going to find that there is one of those for each of these so keep watching and i also add them in the last thing that we need to add on here is the instructions for how our window is going to perform later and in episode 2 we'll be able to redefine this to include specific commands to make the windows change size or close or shut the program when we close it we'll need to define that all later but for this episode we can get away with just using the default windows process this means it will come with a couple of basic things already set up and we don't actually need to define it right now that's handy for us to just keep this video as short as possible once we have set up all of the individual variables for this class there's only one thing left to do and actually to register this class there are two functions one is register class and the other one is register class e x we are obviously using a windows class e x so we need to use the register class e x function we just pass in our windows class into there and that will register our class that's everything we need and our class is set up now that we've finished setting up the definitions for our class we can move on to creating and displaying our window to do this we're going to use the create window command create window function will return a window handle and this is basically a representation of the entire window there are a few different inputs that we need to you run to actually create our window some of them we have and some of them we don't the window class is what we created a moment ago so we won't need to recreate that now the next input is the window title this is the title of the window that will appear at the very top we haven't created that yet so let's move on now we can do this exactly the same as our window class and we can just create a double w character we can just copy and paste this here and change the name to window title as we created a new variable we'll also need to initialize it so once again we can just copy and paste what we've done for windows class and change the details let's change the name to windows title and let's change the text here to our first window now that's all set up we can move on the third variable here is going to be the window style i'm not going to go into any detail about all the different things that we can do with windows styles but there's lots that you can so i suggest you look into it the next two variables here are the x and y position for the location of the window we're not going to change this at the moment because the cw use default command will actually give this the default windows location for a new window the next two variables are the width and the height we want the window at this we do not have yet so we need to create this now let's come up to our global variables and let's just create two integer variables one called windows height and one called windows width just the same as we did with our strings as we've created new variables we're going to need to initialize that i'm going to choose a width of one three six six and a height of seven six eight this is kind of a wind standard window signs and it should operate on most screens so it's a nice simple window size to start with now that we've finished up that you'll notice that the error message that we had has now gone away and this should operate perfectly but let's just finish this off for now next input here is going to be the parent window for example we wanted to create a window which was in error box created by another window the first window would be the parent and the other belts would be the child and in this area here we could feed in the details of the parents there is no parent for this window so we're just going to use this as a null pointer the next variable here is for the menu i've already explained that we're not going to be covering menus in a game engine so we can leave this as null pointer the next variable here is the h instance and this is using the macro that we created earlier sometimes we could have used this but now we have our special macro we don't ever need to use this or pass this information along we can always just use h instance the last variable here although it's a null pointer is very important this variable it means we're going to be able to give specific instructions to our window at one time to do some special things we're going to be covering this a lot later so i won't go into this now but just remember this one this one's going to be important later that's everything we need to actually create our window the next thing we're going to need to do is actually to show it to do this we're going to use the show window function and this is just going to use the handle for our window that we created a moment ago the other variable here is sw show and this means please show the window you may remember earlier that we had a variable here called the n command show and this was how we wanted our window to show up at the beginning as standard sw show is what that variable would have been so we didn't need to pass it across we can just declare it straight yes we want to show our window using the sw show command this is everything that we would need to be able to create and display our window now there is one other possibility that we need to think about when building our code however it is possible that while we're creating this window there could be an error and the window could not create we're then asking directly afterwards to show a window that might not have created and if it hadn't this program would then crash so we need a way to know whether this create window function has been successful and to be able to do that all we're going to do is ask if the window has been created and if it hasn't we're going to shut down immediately let's do this as such we're going to say if there is no window handle being created we're just going to return zero and this will nicely shut down the window there is many possible reasons however why a window might shut down and we probably want a slightly better communication method to say why our window has shut down later we'll be working on loggers and error messages but for right now let's just use a really simple way of actually doing this and that is a very simple command the window gives us called message box i won't go into all of the details of message box but if you copy this as such you should get the device desired effects this basically now says if we don't have a window let's use a message box to pop up fail to create window and then to shut down this is everything we need while creating our window that's everything we need and our window is now fully set up but if we were to run this right now you would see that our screen would flash orange as if the program was running but it would immediately exit out and this is because we've had no specific way for our program to continue running to do this we're going to need to create some form of looping function and we'll do this with our message listener message listener is a little bit more complicated so i'm going to copy and paste the whole thing in and then we'll go through it what this does is this creates a message class this is a message event and it will give individual commands to our system i've just initialized this with zero just to make sure that this is ready to go i've also added in a while loop here and we use our while loop with the message that we've just created and we'll say why our message is not equal to the quit command please continue once we've used our while message we can actually create a peek message there are a few different ways to do this and this is a slightly more advanced way to do it however because we want to ensure that our program is the most efficient possible we're going to jump straight into using this peak message command this is a non-blocking command so we can run this check to see if there's a message and if there isn't a message we can continue in one other code this will be handy for our game engine because this means that we can run other aspects of the game engine while not being caught just on windows messages the next two commands here just basically translate and send the message to the window that's involved with that all done we can come up to our green button and hit play and we'll see our very first window appearing on the screen just bring that over for us there's our window now that we've done all of that we have our very first window and our very first c plus program ready to use in later episodes we're going to use the directx 12 api to create graphics in a graphics engine to show directly on the screen for this reason this window needs to be set up and ready to use in the best way possible the next episode will focus directly on how we can make this window run as efficiently as possible with that being said that's everything from this tutorial but i would like to wish you the best of luck and i'll see you in the next one where we'll be creating a c plus directx 12 game engine

Channel: OlympusMonsTutorials

Views: 14,868

Keywords: c++ directx 12 game tutorial, c++ directx 12, directx 12 tutorial, directx12 game engine, c++ directx 12 tutorial, c++, Directx, Directx12, directx 12, game, series, lessons, visual studio, game engine, tutorial

Id: 2vrEIhAajhM

Length: 32min 10sec (1930 seconds)

Published: Wed Feb 17 2021