 Okay, what to work on now? Okay, so another thing I need to look at today is a project for a friend named Luke. He's a boy that goes to my daughter's school and I'm promising to teach him some programming and he wants to learn how to make games. So I figured I'd show him how Phaser works. Let's go ahead and switch over to Phaser. So here's the Phaser homepage. So we can get Phaser. But the thing is I wanted to get together with him and show how it works, haven't been able to get our calendars to align Luke and I are both very busy. He's very busy for a 11 year old boy or a 12 year old boy, how old he is, with his baseball and raising farm animals and doing a bunch of other stuff. So I figured I'd set something up to make it simple for him to at least play around with some options before we actually sit down and work on something together. So here is the Phaser website. We'll look at this more in a little bit because there are some great examples that you can actually manipulate right on their website. Actually, let me just click on one of these. So like here's arcade physics is a category and then you can choose one of these. So let's just choose bounce. So here is just a little guy bouncing around the screen. He bounced off the edges and this is the code. This is the entire code for it besides a little bit of HTML. But this is all the programming for it. And most of it's comments. If you see these double forward slashes or in this it's green writing, that means it's comments just telling you what the next line does. So you cut all that out. There is barely any code on this just to do this which is awesome. It's displaying all this output here and bouncing this guy around the screen. But let's go ahead and see what I set up. So you can actually modify stuff right here and play with it. But I set up on my website for right now if you go to filmsbychrist.com forward slash games, forward slash practice, it'll bring up this little interface here, this little basic game that has a background which if I hit F5 or refresh the page, every time I refresh the page, it's going to give you a random background color. And I got a little, my son's out running around screaming. Sorry about that. But it will give you a random color every time. And it also loads this little player tux. Now, most desktop browsers, whether you're using Chrome, Chromium, Firefox, Internet Explorer or even Safari, I'm pretty sure have developer consoles which you can open. But since I don't know what browser Luke's going to be in, and I do recommend either using Firefox with its default or with the plug-in Firebug or Chroma Chromium with its developer tab, which is awesome. I'm in Chrome here. And much better than what I'm about to show you is if you hit F12 now, it's actually going to open up a Firebug, the light version. And this will happen on any device. It should open up and it's a very, very basic console. And the reason I put this embedded in this page was to make it easier so that it looks exactly the same no matter what device Luke is using or any of you viewers are using. But if I was to close this and in Chrome here, hit F12 again, it brings up Chrome's developers tab, which does a bit more stuff. I type in player here. You can start, I can see dot and it starts giving me a dropdown menu options that I can choose from. And if you want to go back to the Firebug light, you just refresh the page. We'll close this, refresh page and hit F12. It'll bring up the console again. This will work for what we're doing. And it's just so that no matter what you're looking at, it's going to be identical to what I'm looking at. You can even be loading this on a mobile device like a tablet or phone. If you have a keyboard, you should be able to bring that up and it should look the same. So let's move on. I put in a list of basic commands here. Some of these are functions. Some of them are changing variables. Some of them are phasor specific. Some of them are functions I created that run a number of phasor commands. They're functions. And I just wanna go over, if you see parentheses, something and then parentheses, there is a good chance that that is a function. So all these, these are functions. If you see an equal sign, we're setting a variable of some sort. So here we're setting player rotation, player R, and I'm gonna get into this stuff in a moment. And then sometimes you'll see an equal sign like this one right here and parentheses. What this is doing is, with JavaScript it's an object oriented programming language. So not only can you run functions, but you can put the output of the functions into an object or what seems like a variable. Or you can actually put make a object a function. So let's go ahead and jump into this. I've talked enough. You can just copy and paste these commands down here, but I do recommend typing them to get used to them. But for this example, this ping one right here, tux is called player. It's an object called player that was created when this page loaded. So you can see here, it says player dot position dot set to. And then we're running a function that's part of this object. And we're so we're setting the position to 300 by 300. So that's X and Y. So it's 300 over and 300 down. So if I go ahead and hit enter on that, you'll see that our tux character moved. And now anytime you see numbers like this in a programming language, play around with the numbers and see what happens. So I'll change this to 3300. You can see he stayed at the same height, but moved to the left. If I now change this to let's say 20, he now moved up. And we're basing this, I've anchored him to his center. So actually if we were to do zero zero, which would be the top left corner, it would actually be right on the center of tux. By default, sprites, which are these 2D objects are actually centered on their top left corner. But I anchor it, which is moving that center point or that anchor point to the center of the object for most things. So let's go ahead and move him over again. I'll say 200 by 150 and that will move him over. So go ahead and play with that some. So now you already can move the character around the screen running commands. Obviously in the future, we'll link those to inputs, such as keyboard, mouse, joystick, touch screen, but you now know how to move our sprite around the screen. Next, we can say player.rotation. And now if we hit enter, it will tell me if I scroll down here, it will give me the output of the player rotation is currently set to zero, but we can change that. If you look at the next thing on the screen here, we can actually do two things. We can either say rotation equals one, which would move it to whatever position one is. If I keep running that, you see it doesn't look like he's moving, but if I move it to three, now he rotates more. So you can send him to a specific angle rotation or another thing you can do is take what the current rotation is and add or subtract to it. So I can say the current rotation plus equals dot one. And now every time I run that, it's gonna take whatever the current rotation is and add point one to it. So that's that second command here is plus equals means we're adding to what rotation or is dot one. So again, we can run that if you wanna send to a specific thing, remove the plus and say, give it a number, we'll say three, and it moves him to position three. And no matter how many times I run that, he's not gonna move because that's a set position. I hope that makes sense. So next we're gonna change a variable for our player, which is R, which is a variable. I have a custom loop function here that's looking to see if this particular player's R is set to true or not. Currently, it's set to false. R, or it's not set at all. Let's see, scroll down here. Yes, so it says undefined. So let's go ahead and define that as true. So player dot R equals true. And now if you run a command down here and nothing happens up here, it's because you have to click back up into the game. The game's kind of paused, so I'll click that. And now you'll see that he is rotating. So that's just a little variable that I set. The function, a loop function is looking for. And if that player is true, it's going to rotate him at point one measurements per loop. And notice when I click off the screen here down here, it pauses it again. So let's go ahead and now I have another variable that I created called RS, which is something that I created called that it stands for rotation speed. And I'm going to set this to dot two. I'll hit enter. Now if I click up here, you'll notice he's rotating twice as fast. Let's set it to dot three, enter. And now he's moving even faster. Let's get out of the points. Let's move him to one, rotation speed one. Now he's rotating really fast. Let's go back to point one. You can see he's rotating slow again. And you can do point zero one if you want him to rotate really slow. But you can also do a negative number. I can say negative point zero one. And now he's going to rotate the other way. If I want to stop him from rotating, I am going to set player dot r equal to false. I also want to mention that things are case sensitive. So if I write it lowercase, write lowercase. If it's uppercase, write it uppercase. Okay. So we've rotated and we stopped him. Now let's change how he looks. I've created a function here called list. So you've list parentheses here. And when you run that and scroll down here, and if you're using the built-in console for Chrome, you don't have to scroll manually. But we're scrolling down here. It gives you a list. And these are a list of options that you can change that tux to look like. So they're preloaded images. So I can say player, oops, player. Or actually, I'm sorry. I created a function for this. I'm going to say change. So this is a custom function I made. It's not part of phaser. It's actually running phaser commands inside the function, which I'll teach later in the future when Luke and I get together. I'm going to say change. And you can see the example here. I'm going to say brick. And it changes it to a brick. If I type Mario, it changes it to a tux Mario. If I change it to tux, it brings him back to being just the regular tux. You notice it's different sizes. That's depending on the resolution of the image, which we can manually change. We're not going to go over today. But X-Man will change him to Wolverine. X-Man two will change him to a Cyclops. So that's changing him. But we can also add new sprites. So this is our game. And what we're going to do is we're going to say game add. We're going to add a sprite. And we're running the function here, which gives its position. And then which out of this list here do we want it to look like? So I'm going to say game add tux to add sprite. It's going to be 80 over 80 down. Or is it 80 down, 80 over? We'll find out in a second. Tux, when I do that, 80 over 80 down. And we have a new tux there. But you notice we don't know what this tux is called. That's because we didn't call him anything. We didn't put that sprite into an object. Let's go ahead and do that. We can call it pretty much whatever we want. Try to avoid spaces and special characters. We'll call it, and we can hit up arrow here to bring up the last command. I'm going to say player two equals. That's going to be the output of this. Let's move it over further. We'll say 300 by 300. And instead of tux, let's make him look like an X-man. There we go. We have created a new sprite. He's there, and he's called player two. And I can say player two dot rotation. If I could type today, plus equals dot one. And you'll see every time I press that, he rotates. But you notice he's not rotating on the center of him. That's because we did not move the anchor, which I talked about, but we did not go over. And it's not in the list of commands here. But he's rotating it over around basically his corner here. So we add a new player. Now, some of these, player r equals two. If you change it to player two dot r equals true, that's not going to make him rotate because that's a special function I created that's looking for this variable. It's only looking for it for player one. So last command I want to show you today is the BGColor, which is a simple function I created, which the change background color is actually very simple. It's probably like two lines of code. But I created a function that makes it a little simpler, just one line, BGColor. And now you're giving it variables, or sorry, four numbers between 0 and 255. And those are the equivalent of red, green, and blue. So this is red. First number is red, green, and then blue. And it combines those colors together. So if I say 0 comma 0 comma 255, which is the most, we're going to get a solid blue background. If I do 0, 0, 200, you can see it's a little bit darker of a blue, 100 darker of a blue. Let me set the backup to 200 in that. But let's do 200 of red as well. And now we get this pinkish-purple color. Now we can start adding in some green if we want. Not 20 wasn't very much. Let's do 200 green. Now when all the cut numbers are the same number, you're going to get a gray-scale color. So the lower the number, the closer to black you're going to get, because although a lot of people don't realize this, they get backwards, the absence of color is black. A lot of people think that black contains all color. It does not. It's the absence of color. If we do 255 for each of these, we get white. And if we were to lower these, this is going to be mostly green with a little bit of red and blue in it. And that's how you change the background color. If you want certain colors like yellow, yellow would be zero, blue. And 100% green and red would be yellow. If you want it to be an orange color, I think you just do less of the green. So 100% red, a little bit of green, no blue. Yeah, start getting into orange. So you just have to learn your different colors there. A lot of information there. I hope that it's something for you to play with. But you can also move ahead. If for some reason you get through all this and you think you've got it down and you want to learn more, you can go to the Phaser website. Let's go back to Examples here and go to Basic. And let's do something like Move an Image. And again, you can actually add this code here and refresh this, and it should load the code. But let's say we want to apply this. So here it's starting to gain physics, which is basically how sprites move, bounce off things, collide with things. There's different types of physics. There's here we're using arcade physics. There's also Box2D and Ninja something. Most of them I use arcade, but it just depends on what you're going for. Arcade is very basic. It's gonna use less processing power than the other ones in most cases. Let's go ahead and copy this line here and paste that into here. But change where it says Image to Player. So we're saying in our game, let's take our physics and enable them for this player. What type of physics? Well, it's the Phaser physics arcade. We're using arcade physics. Go ahead and I'll hit Enter on that. And no, it's nothing happens to our player. That's because now it's physics enabled, but we haven't told the physics what to do. So let's grab this next line for Velocity. So now that he has physics, our player has a body and that body has Velocity. And if we say X, now he's gonna start sliding that way. If we set it back to zero, he's gonna stop. If we do negative 10, he's gonna start going to the left. And if we want to go down, we can say Y. Oh, that's up. If we want to go down, it's gonna be a positive number. So Y equals 10 and it's not moving in 10 spots or to the 10th spot, it's constantly moving him down at a Velocity of 10. So that's an example of something you can grab from that website. Or if I restart this page, you'll see this picture of Einstein moving off to the side. Let's go ahead and change this to 10. And I think that if we hit this refresh, I didn't really seem to slow it down. I thought that reload example, comments, mobile view. I usually do things on my own computer here. Pretty sure there's a way you can edit this and run it. I'm just not seeing a run option. But you can do as I just showed you. Anyway, it's the basics you started. And again, no matter what you do here, now if it's saving, you just hit F5 or just the refresh button and you start from scratch. This is just for playing around. It's practice. That's why it's called games practice. And again, so again, you can refresh the page, hit F12 and start typing in the console down here. Player.R equals true. And then click in the game to make sure it's not paused. So that's it. That's something I'm gonna wanna go over. Let's see here. What should we look at next?