Graphics
Using the Graphics and Shape we draw all our art dynamically via programing. In this video we use consts, shapes and Graphics.
Video Transcript
00:00Now at this stage what I want to do is I actually want to add a few colors that are going to be my constants.
00:04The reason why I want to set them as constants is that well, these colors are not going to change and if I ever want to change them
00:11it's going to be a change throughout the application. There's no need for them to be a variable because they could be a constant.
00:17Now the colors that I care about when we're looking at the stage for a second is I want to make sure that whenever I fill
00:22the elements they have a certain color and whenever there's an empty element that we want to have a color
00:27we want to have an active color and an active color is a color when my mouse is rolling, when my element is rolling on the stage
00:34and it's sensitive to getting hit. Alright, so these are the basic colors I'm going to start with and then later on we can figure out
00:40what other colors we need. Alright, so let's start setting this up. So first of all I'm going to create a few statics, sorry a few
00:48private constants. Now the first one is going to be my dot color and I just decided that color is going to be
00:59a shade of color. Just copy the color. You can put your own color as well. The color doesn't really matter at this point.
01:08This is just a color that I pre-planned a few minutes before the session started. Fill color. We're going to set it to another color
01:16as well. We want to make sure that the fill color, which is the color of the things that are already safe, the dot color is our element
01:22itself. So I'm just going to make it a little bit different and another private constant. For now we're going to set up another one which is
01:30going to be an active color. An active is basically when we're on the move and we're going to use a color that's more of an opposite so it's easy
01:42to see the difference between them. Alright, so at this stage we're basically ready to go and start building our application. Now the
01:49first thing that I want to do is I want to create that frame, that background. So I'm going to call it create frame. I'm going to call that
01:55function inside of my constructor. Let's go in and first create that frame. Alright, so the first things first we know it's private because
02:03no one is going to access it but us. Create frame. Now the reason also why am I putting this in a separate function? Because it makes it easier
02:10for me to move it around whenever I need to move it around, right? If I need to move it to another class I could do that later on.
02:16And the same point if I ever need to recreate the frame such as a new level or a new whatever, it's easy for me to go and recreate it because I don't have
02:24it connected into my constructor. It's not mixed with anything else. Alright, so we're ready to create our frame and the first thing we
02:32want to do is we actually want to create some sort of element, some sort of sprite, some sort of shape actually that we could actually
02:38store all this information. Now the reason why we want it to be a shape and not a sprite is because our element doesn't really need any
02:44interactiveness. We don't need users to be able to click on that background. So I'm going to create that private var and it's going to be a bg.
02:52So we're going to create a new shape and when we create this new shape as I said we don't need it to be, we don't need any click events,
03:01we don't need anything, it's a basic element. All we need is the capability to draw things into it and for it to be a display element.
03:08So back into our create frame now that we have that variable that's available throughout our application, it's time for us to actually create it.
03:15So I'm going to create it by setting, I'm going to mix two things at the same time. So I'm first going to add child and after I add child I'm going to say new shape,
03:26I'm going to add a new shape into the stage. So this is what I'm adding in and I want to make sure that when it comes back to treat it as a shape
03:33because it's going to come back as a display object. Alright, so I have my bg and that made it possible for me to write this thing in one line of code instead of
03:42writing two lines, you can always write two lines if you feel more comfortable with that. Now the next stage is we actually want to start drawing.
03:49So to do that I'm going to go into my graphics folder, in my graphics bucket you could say, into my graphics object inside of my bg itself and I'm going to set a style for my line itself.
04:01So I'm going to say line style and I'm going to set the line style to be its width, its thickness is going to be four and its color, I'm going to use that color of the fill color because the border is a safe area.
04:15Alright, so we set our border to be that safe color. The next step after this is also I want to set some sort of background color as well.
04:26So I'm going to set also a begin fill because I want to make sure that I also have a fill color. And the fill color that I want to decide, I'm not going to put it up above because it's something that we're not going to use again.
04:36I believe, three, four, six, one, two, three, one, two, three, this is three, yeah, one, two, three, one, two, three.
04:44So there you go, so it's a shade of gray or a dark gray. Now the next step is actually, okay, now we already set our line style, we already set our fill color, that means it's going to be the filling of that L shape or whatever we're going to create.
04:55The next step is I want to actually just set to my element and say I want to draw a rectangle. So I'm going to select rectangle, draw rectangle.
05:05Now the size itself, I'm going to take it from position zero, zero, and I'm going to take the stage width as my width and my stage height as my height.
05:15Last thing that's left for me to be able to finish my creation of my frame is to go to my BG graphics and make sure that I end the fill.
05:24It's very important, every time you start a begin fill, you want to end the fill. So there we go, and if we run our application now, we'll see that now we have a nice little frame.
05:32We have this bluey, bluey frame and a inner color that's a dark gray.
05:40All right, so the next step after this is actually, we actually want to create our element, we want to create our dot.
05:46To create our dot, I'm just going to do another function. I'm going to create this function create dot, and create dot is going to be very, very similar to create frame.
05:56Instead of that going to create our dot itself and position it into its right position, I'm going to create a private function, and I'm going to call it create dot.
06:07And in our create dot, we're going to first of all add a dot onto the stage.
06:13To do that, I'm going to first create a new dot, so it's going to be a private bar, and I'm going to make sure that it's not...
06:19For now, let's just say that it's just a shape that we don't even care that it'll be interactive or not, so I'm going to call this just dot, and this dot is going to be a shape as well.
06:29Whoopsie, shape, here we go.
06:35So we have our dot shape, and we want to do basically the exact same thing as we're doing up here, but let's just type it anyways.
06:41So we have our dot, we want to add child, new shape, and we want to make sure that it comes back as a type of shape when it goes into our dot.
06:51So we don't get any compiling errors.
06:53Alright, so we got our dot, our dot is ready and set. Now all that's left for us is actually to draw it.
06:58To draw it, I'm again going to do something very similar.
07:00This time around, I don't need any line cell, because I don't want it to have a line.
07:04I just want to have a fill for it, so I'm going to go directly into the begin fill.
07:08And in the begin fill, this time around, I'm going to select my dot color as my element, so I'm going to add your dot color.
07:17And back to my dot graphics.
07:20Draw, rect, but instead of drawing a rect, yeah, why not?
07:25But maybe instead of drawing a rectangle, how about we draw an oval of some sort?
07:32So let's draw a circle.
07:34Now its positions, x and y positions, we're going to set it as 0, 0, because it's internal positions of our element.
07:40And I'm going to make it to be 4, 4.
07:42So it's going to be a nice little round element that we'll be able to see visually very easily, hopefully.
07:47And last but not least, we're going to dot, dot graphics, dot end fill.
07:52As always, whenever we begin a fill, we end a fill.
07:55Now if we run the application out, we'll see that our dot is coming in.
07:58Well, we have your little error, so let's fix that double click here and see what's wrong here.
08:02It's saying incorrect number of arguments, expecting no more than 3.
08:06And that's true, because contrary to a square where a square we set its width and height,
08:11in a circle we only set its radius.
08:13So this is the x and y position, and you could always press on your control space,
08:25and your control space will give you stuff that you don't care about,
08:28so you could always open the bracket one more time and see the hint again.
08:32You'll see the x and y are the numbers, and then you have your radius.
08:35So that was my mistake here.
08:36So let me delete one of them, because we're not actually talking about actual sizes,
08:40we're actually talking about radius.
08:41So 4 might be too big, right?
08:43So let's run this and see if it's too big or not.
08:45And it seems fine, right?
08:46It doesn't seem that big to us.
08:48It doesn't even look like a circle, to be honest.
08:51All right, so it's so far in that it's a little bit hard to see as a circle.
08:55But let's take our element, maybe we can make it in 5 dots,
08:59just so it's a little bit more easy to see here.
09:02It's a little bit easier to see.
09:03Now, the next step, I want to actually position it,
09:05and I want to position and start my game always where my dot starts here instead of up there.
09:10So let's see how we do that.
09:12First of all, I want to go to my dot, and I want to change its x position.
09:16Now, my x position, I actually want to take my stage width minus the dot's width itself,
09:21and then divide it by 2, because that's going to give me the exact center.
09:24So I'm first going to divide the stage width by the dot's width,
09:32and then I'm going to divide it all by 2,
09:34and that's going to give me the amount that's left from the dot and the stage divided by 2,
09:39which will position my element exactly in the center from the next position.
09:44Now, we want to do the same thing for our y,
09:46and our y is basically the exact same logic, almost the exact same logic, right?
09:51Not exactly, right?
09:52Because this time around for the y, we actually want to take it all the way down,
09:55minus half of its width, or its height, more accurately.
09:58But width and height are the same because we're talking about radiuses here, but still.
10:01So let's do this.
10:02Dot dot y equals stage stage height minus dot height divided by 2,
10:12because we want half of the height less than the whole stage height.
10:15And if we check this one more time, we'll see that, oh, right, we're in much better shape now.
10:19Our dot doesn't, you know, like, one thing that I don't like about our dot right now
10:23is that our dot right now is all the dot is out.
10:26And the reason why all the dot is out is because we picked our radius to be 0, 0.
10:32And when we picked our radius to be 0, 0, our 0 position is actually in the center of the circle.
10:37Now, because our 0 is exactly in the center of the circle,
10:40we actually don't need to divide by 2, our height, because it's already in the center.
10:45And if we don't do that, our 0, 0 should be aligned exactly to the bottom of the screen.
10:50And that's exactly what we want.
10:51So I'm going to get rid of this divide by 2.
10:53And by getting rid of this divide by 2, I am actually subtracting, oh, right.
11:00Well, I just made it even worse, right?
11:02Because now instead of subtracting half, I'm subtracting the whole thing.
11:05So what I actually have to do is get rid of this whole element where I'm subtracting it all.
11:10So my y should be the whole y.
11:12And there you go.
11:13And now only half of it is in the display.
11:16All right.
11:17There we go.
11:18So we have our created frame.
11:19We have our created dot.
11:20We have our created dot.