Making Html5 Games with Wade - Part 3

Hi. Welcome to part 3 in our series about making html5 games with wade. This one is going to be fun, because we've covered most of the boring bits in the first two tutorials. So we've got this simple game going: 4 moles on the screen moving up and down. The goal of the game is to hit the moles as they come out of their holes, to score points. There are lots of things we can do to make this game better. I think that the biggest problem we've got, is that they are all moving in the same way at the same time. So let's change that. In our main app file, awesome.js, let's add a member to our App function, called "moles", which is an empty array, initially. These square brackets indicate an empty array. Then, as we create our moles, we add them to our array, like this this.moles.push(mole) So now this "moles" array contains all of our mole objects. Now let's go to our mole behavior file, mole.js. For convenience, I'm going to add a couple more functions to this behavior, to move the mole up and down. this.goUp = function(). And here we move the mole up, copying and pasting this line of code up here, with the moveTo function call. And we do the same for this.goDown() Actually, we also want to change the state of the mole inside these goUp and goDown function, so I'll move this code here. Now we might as well use these new functions, by replacing these long lines of code with calls to goUp and goDown It's important to note that, because goUp and goDown are member functions of the mole behavior, they are going to be accessible from outside this file. And that's precisely what we're going to do in a moment. But first, I want to get rid of this "goUp" in the "onAddToScene" function, which is telling the mole to start moving as soon as it's added to the scene. We don't want that. What we want instead, is to change the position of the mole, as soon as it's added to the scene, so that it's completely hidden: this.owner.setPosition(this.originalPosition.x, this.originalPosition.y + 50) Now, in awesome.js, after creating all of the moles, we pick the first one, and tell it to start moving up, like this: this.moles[0]. getBehavior().goUp() Now let's have a quick look in Chrome. When we refresh the page, the first mole, in the top-left hole, starts moving up, while the others stay hidden. This is a step in the right direction, but still, our mole is moving continuously, and we don't want that. We can see why that's happening, by looking at the Mole behavior, specifically the onMoveComplete function. Here we're telling the moles to start moving again, as soon as they're finished moving In fact, when the mole has just come up, that is the correct behavior: we do want it to go down again straight away. But what we don't really like, is that it comes back up again as soon as it's gone down. What we want is another mole to do this. So let's pick a random one. I'm going to generate a random number between 0 and the number of moles that we have in our game, like this: var randomMole = Math.random() * wade.app.moles.length This works because Math.random generates a number between 0 and 1. If I multiply it by the number of our moles, that is the length of the moles array (in this case 4), I have a random number between 0 and 4. And then I take the integer part of this number, using Math.floor() Now, instead of saying "this.goUp", I can say wade.app.moles[randomMole].getBehavior().goUp() Let's see what happens in Chrome Now as soon as our mole goes down, a random one goes up. It's starting to look like an interesting game now. But it's still a bit too simple, mainly because of the movement speed of our moles. But that's easy to change. In awesome.js, let's add a member to our App function, called "speed", that is initially 100. Then in mole.js, when we move up and down, we use this value: wade.app.speed And right before choosing a new mole to move up, right here, we increase that speed by 10, for example. Then you can tweak these numbers until you're happy that it feels challenging enough, but not too difficult. So if we go to Chrome again and refresh, and leave it running for a while, the speed will keep increasing, until it gets really quite challenging to catch these moles. In fact, we may also want to cap the speed, so it doesn't ever get larger than 500, for example. wade.app.speed = Math.min(wade.app.speed, 500); Now there's another quick improvement that we can make. We should add more of these moles to the scene: 4 is not nearly enough. But how are we going to do it? I mean, given the size of the moles, we can hardly fit more than 4 on an average-sized screen. So we could change the size of our sprites, but there is actually a much easier way. WADE has some interesting ways of dealing with screens of different sizes and aspect ratios, but that's something we're going to be looking at in next part of our video tutorials. What we're going to do today is a bit more simple: we are simply going to move the camera. You see, in WADE you are always looking at the scene through a camera. Now for example, if you have a mole that's 300 units big, it doesn't necessarily mean that it's 300 pixels big as well. Or rather, 1 unit does equal 1 pixel, until, of course, you move the camera to zoom in or out, which we can do very easily. The camera has 3 coordinates: x, y and z. Z being the distance from the scene -- and it's initially set to 1. But let's try this in awesome.js: wade.setCameraPosition ({x: 0, y: 0, z: 2}) So we're still looking at the origin (0, 0), but we're moving back a little. Let's see what it's looking like.... It's exactly what we expected: everything is smaller. That's pretty much what we wanted, but not quite: we didn't want our score text to get smaller too. Somehow we have to say that we don't want the size of our score text to be affected by camera movements. But that isn't such a big deal. When we create our score text sprite, in awesome.js, we simply have to put it in its own layer: say for example layer 3. And then we tell WADE that we don't want objects on layer 3 to scale up or down when the camera moves, like this: Wade.setLayerTransform (3, 0, 0) There are three numbers here: the first one is the layer number, in this case layer 3. The second number indicates how much objects on layer 3 should be scaled up or down when the camera zooms in and out. By setting it to 0, we are saying that we don't want any scaling. The third number indicates how much objects should move on x an y, when the camera pans on x and y. By setting it to 0, we are saying that we want no movement at all: in other words, no matter what the camera does, objects on layer 3 are not going to move. These scale and translation factors are 1 by default, but you can set them to anything you like (for example 0.5), to achieve a variety of interesting effects, such as a parallax effect. OK, now we can change our grid size to 4, and have lots of objects on the screen. So let's go ahead and do it. And now let's look at it in Chrome OK, this is much better. One last thing: we need a background image here. I'm going to look for a random picture of grass on Google Obviously it's going to be copyrighted, so don't do this if you're making a proper commercial game. But for the purpose of this tutorial, we'll get one like this. I'll save it into my awesome game folder, and call it "grass.jpg". Now in awesome.js, in the init function, I'm going to create a background scene object, that contains a sprite with this grass picture and I'll make sure to place it behind everything else, on layer 30 wade.addSceneObject(this.background) Oh, and of course I need to load this picture in the load function, here And there we go We've definitely made some progress with our game. But there's still work to do. In the next tutorial we're going to be putting a bit of eye candy in... some animations and particle effects. And I'm also going to be showing you how you can really easily deal with different screen sizes and aspect ratios. So keep following us! Thanks for watching, see you soon.