Game Programming - Episode 6 - Graphics Initialized

Key Takeaways

hey what's up guys My Name Is AO welcome to episode six of game programming Okay so yesterday we had a huge episode that I definitely don't have time to ever repeat ever again um so this episode will be short but we but we will actually be displaying something today we're going to want to do something really simple um essentially um we're not going to talk too much about this but what we're going to do is basically fill the entire window black so at the moment what we've got if we just launch our game we've got um well we've just got this blank window and as you can see it's it's literally just an window there's nothing filling it there's no graphical anything in here like Graphics are not being used this is just this is just the standard jframe um you know layout I guess um so what we're going to do do today is actually initialize and you know start rendering a black um just black pixels really to the uh to the screen so we'll do that um uh doing a few things first of all and I will discuss everything here um what we need to do is we've created this buffer strategy and what we need to do now is this buffer strategy is sweet for handling buffers but what we need to do now is actually apply data to the buffers right because at the moment we've got an empty buffer we've got we've got triple buffering on but they're not accepting data yet so we need to actually start um getting them to accept data or essentially um I guess a different way to put this would be to actually um rather apply the buffer to a graphics object so all we need to do is type Graphics G now we'll call it J because well first of all that's a convention but second of all it's just you know J is going to stand for graphics no point typing Graphics here Graphics J is going to equal BS so our buffer strategy do get draw Graphics okay so what does get draw Graphics do get draw Graphics um essentially what it does is it is it creates a l link between Graphics to which you can write data unless just import it by the way um it's basically creating a link between Graphics so in other words it's creating a link between you being able to actually draw Graphics to the screen and the actual buffer strategy okay so it's linking the two together it's um I guess it's like it's it's creating a graphics context you know for for the drawing buffer um so that's set right what we also need to do is now that we've in between here and here before we type g. dispose I'll explain this in a minute this is where and you could even like do a little um uh thing for yourself so that you know I'm not going to do that though um but in between here and here is where you do all of your graphics so any graphics that need to be displayed on the screen must be displayed here before you call J do dispose so why are we calling J do dispose and what does it do dispose does exactly what you think it's going to do it just it just disposes of the current Graphics now what it does is it essentially releases all your system resources so as you can imagine render is in a loop so what's happening is every time you're setting Graphics equal to the buffer strategy what you're doing is every time you're actually creating Graphics but at the end of the frame you need to remove those Graphics otherwise as you can imagine the graphics from each frame aren't going to be removed that's a problem because that will just crash your game eventually after after we render every frame we want to um we want to remove uh the graphics that we're not using anymore so we do that by disposing of the graphics and finally what we need to do and this is very important because not only will your game not work if you do this it will crash you need to actually show the buffer now last last time yesterday I explained that what happens is I'm not going to bring up paint again I don't have time but yesterday I explained that what happens is with buffers you have your screen and then you have buffers that actually render and contain images now we need to swap the buffers essentially it's called buffer swapping um or blitting you could call blitting as well um basically what what it's going to do is it's going to swap the buffers and you know remove that that image that we had last time and I'm sorry I've got rss's on um oh you guys probably w even say that cuz I'm not I'm not recording in full screen well I am recording in full screen but I'll be zooming in so um yeah um essentially what you'll be doing is uh swapping out the buffers so the buffer that needs to be rendered right it's already like it's already computed but it's not being displayed what we need to do is actually you know make I guess this next available buffer object actually visible we need we need to display it if we don't right it's going to still take up memory and it's just game's not going to go anywhere and that's a huge problem so we actually need to be able to release the memory and move because remember a buffer a buffer is a place for temporary storage we can't keep file we we can't keep um objects and graphics and pixel data there forever we need it's it's only temporary it it'll literally be there for probably like honestly maybe a few Nan seconds a few um a few milliseconds um again I'm using nanc really Loosely here cuz nanc is obviously a very very um tiny uh you know section of time um but I'll just say milliseconds um it might be less than 1 millisecond that's what I say there but anyway point is for a period of time very very short period of time we we're actually calculating which pixels need to go away and then we're displaying them straight away now we need to we need to actually clear the memory and display that those pixels to the screen and we do that by actually showing the buffer strategy essentially so we called BS s buffer strategy. show show and what this will do again is it will make the next available buffer visible it will show the buffer that's been calculated now to make the screen black remember I said that we do all of our Graphics here to make the screen black all we need to do is first of all it's going to work by filling a rectangle so if we call G so graphics. fill wct it will actually fill a rectangle um with a specified color and again we Define the size of that rectangle so we Define the starting x and y coordinate which is 0 0 0 x and 0 Y and then the width and height of the actual rectangle so because we want to fill it full screen we want the width to essentially be the same width as our width of our window which is actually width time scale so you could type width time scale here I'm simply going to put get width now what get width is is it's a it's an integer um method it returns an INT it returns an integer all it does is it's part of the canvas class and possibly even the component class actually I'm not 100% sure on that it's yeah it's part of the component class um essentially what it does is it just Returns the size of our window so get width is probably the best way to ensure you actually fill the entire width and again for height we'll just do get height so in other words what this is doing is is filling a rectangle starting from the point 00 which is the top left corner right not the bottom left corner the top left corner uh in Java if we get to openg which we will eventually maybe not in this series though cuz I I did promise keeping it library free and making it from scratch but maybe in like a future series or something because you guys have Begg have been begging me for like a year to do open jail um in openg and stuff like that is actually the bottom left corner that's 0 but in Java and other computer science stuff it's the top left so it's filling a rectangle from the top left coordinate of 0 0 and the size of that rectangle is width time is width by height it's going to fill the whole screen now it is filling a rectangle but we don't know what color it is yet so what we can do is actually just before that remember you do this before you fill the rectangle we want to actually set the color so we simply call G do set color and again we'll just go color. black and uh there we go it's going to set the color of it's just going to set the graphical color to be black and then whatever follows this will have that color applied to it so fil rectangle will have black color applied to it and uh that should be it so remember our game is being started we're hitting we're hitting um up run equal true where okay actually this is a question I want to address right now um you guys are wondering how is the run method called we don't actually call the run method anywhere why where is it called and what happens is because game implements run rable right what happens and it extends canvas what happens is because it implements runnable and we've said new thread to be this when we start the thread it's automatically going to run the run method is that clear cuz that sounds pretty clear to me um so yeah that's what's going to happen and again we're in a loop so we'll be rendering and that's how this method gets called so yeah let's just hit debug and we'll see what we get all right so I can hear my graphics cards squealing right now cuz it's probably rendering this at 100,000 frames per second uh which is a good sign but what's happening is you can see that we've got a black uh screen right now and the thing is like this isn't just we we haven't just changed the color of the jframe background we have we haven't just changed the color of the background to be to be black um we're actually fullon using the graphics card to actually render an array of black pixels onto the screen we're actually using the graphics card here to fill to actually render an image to the screen so effectively that's pretty much the first step so um try it out for yourself you guys can have fun changing the colors to whatever you want if you want a specific color um you don't have to go color dot cuz obviously there's like a limited amount of colors you can choose from here what you could actually do here is Select something like new color and then in here you just enter the RGB values so something like I don't know 80 red 40 uh 40 green and like maybe like uh 100 blue blue for example that would give us oops did that twice that will give us this nice purple color for example all right I'm just going to leave it as black though um cuz that's how I roll and um yeah next time we'll probably take a look at actual individual pixel manipulation and stuff like that and um again I'm going to try and keep these episodes short I'm sorry uh I'll try and keep them below 10 minutes definitely so yeah I hope you enjoyed this episode of game programming if you did please hit that like button lets me know that you guys are actually appreciating the series and uh I'll see you guys later [Music] bye