[SOUND]. Hi so we've heard Matt explain to you the wonders of audio recording and sound effects and how to synchronize it with collisions generated by physics engine. We've had Marco explain the physic engine in which we're using that works in iOS devices and also Android and on the desk what we've done is we've tried to create a framework app. Which is a basic physics game, 2D physics game. And they're really, really popular on handheld devices. Really popular amongst casual gamers. So our template just gives you the bare bones for it you want to make a game. It gives you a physics engine. It gives you a mechanism for loading sound effects, and a mechanism for loading artwork. And you can easily make a game that, you can easily make a game with those components which is somewhat like Angry Birds, Angry Birds being the most famous physics-based 2D platformer on mobile devices, I should think. >> Which actually uses Box2D, which is the same library we've been using. >> Yeah. >> So you're using exactly the same physics engine, almost exactly the same physics engine that Edward Burns is using Yeah. Except you're using the one that we've hacked together, which may or may not be a good thing. with certain improvements. >> Yes, there's been some improvements made Cross-platform and it should be relatively easy for you to use. So we've got this example. We're want to talk you through it. so you see it when [INAUDIBLE]. This is it running on an iOS device. So you can see it's basically the same. You've got our little hero here. Who is a he's basically tux, he's what Linux users refer to as Tux who is the symbol of Linux. He's a penguin. He's not normally a really ugly penguin which does reveal a lot about Linux. And he's wearing a little android head. And he's fighting [LAUGH] I can see [UNKNOWN] he's fighting these little boxes, he's trying to hit the boxes inside the crate with a bunch of apples, you can't see those that's more of a [UNKNOWN] thing. so it runs fine on the ipad device and it runs fine on your iphone. So Let's have a look at this desktop version, this is it running on the desktop, it's basically the same. we hit the boxes, and we're off. So, we've got some artwork assets here, and then we've got a physics engine that's implemented that has a lot of complicated stuff that I'm going to talk about and also were going to talk about you know how the whole thing's put together so lets start with the art work assets. That will just take a small amount of time. You'll find in your coursera folder in week 4. >> The basis of our game it's called Angry Drawings which we thought was funny. >> [COUGH] At the time. >> At the time. So yeah, basically, you can see in the data folder there's a bunch of different aspects. We have a ball which we're not currently using, we have a crate which is our mythical apple crate. and then we have this, these scrapyard backgrounds. And then we have our tux droid. And you'll notice he's a PNG file, so he's got transparent background, and that means that although he's a rectangle, when we draw him on the screen as you can see here, he's just the shape of a fluffy penguin. With an Android [INAUDIBLE]. So we don't have any of those nasty rectangular issues, that's why he is a PNG. The background isn't a PNG, the background is just a JPEG so it's a compressed image. We've got two backgrounds, we've got this one which is nice and bleak. I don't know if you can see that. The bleak background, which you might want to throw in if you feel depressive. And then we've got the scrap yard. Now in order to produce the kind of align the way you can place all of the objects. Part of the scrap yard image has been grayed out and has been made a bit more muted in color. And then we've got a more colorful kind of ground area where we would place all the objects ideally. so we haven't actually got that many assets. We could easily introduce more assets. But that's enough for us to have a basic level. And you know, the dynamics of the game are you spring back, tucked, and you fire them at the boxes and then every time it hits a box, you score a point. [COUGH] That's a long way from a complete game. It's just to get you started. So in order to understand what's going on here let me talk you through this code. I'm going to ask some questions and Marco's going to fill us in and then Matt's going to fill us in on some other bits, too. Fundamentally we've got a a base of code which works the same way on Android as it does on iOS desktop. So, we've got some stuff in here that's specific to one or the other platform. So here you can see we've got a bunch of import statements, and what these are doing is importing Box2D, which is the library you were talking about before, Marco, is that right? >> Yeah, that's right, so we're using an external library in order to implement physics engine and on Java and Android we need to import that live v using that code there. And with code you're running on Javascript, that code just gets ignored. Instead what happens is you'll see that on the other tabs we have a copy of ox td. We have a copy pf physics.js, which is my little wraparound /q ox td. >> And the collision doctor detected objects which handles collisions and gives you a nice interface to create just a simple collision function that gets called whenever something collides. >> So that's entirely running all of the physics that we see on the. >> [INAUDIBLE] Yeah, okay. All right, so as usual, what we've got here is a maxim audio context and then some audio players. These audio players are for the sound effects. Right, Matt? >> That's right. So, we have one audio player for Tux. So if Tux hits anything he has his own sound. and then we have another sound for the wall. >> So, if Anything hits a wall, then we trigger a wall. It's kind of a metallic sound. The Tux sound's a kind of ee sound, so I thought that was appropriate. >> So, did you do that yourself? >> I did it myself, and. >> Very good. >> And, finally we've actually got something a bit more complicated for the crates. Now when we're, we're playing around with, with one audio player just for, for all the crates. So we never have Crate collided with something. We triggered the audio file but we found it was a problem because if there were several crates colliding at the same time, then they would keep retriggering the sound so you would only ever hear one sound. So I decided to create an array of players. One for each crate instead. >> So what happens now is depending which crates collide though. They have their own sound player per crate. And I'll trigger it individually. >> Cool. And then, we also have a new object, which is called physics. And it's of type physics. So this is the main physics handler. >> and this is basically what we're using to control well, what's making all of the physics This controls work, is that right? This is doing all the work. >> Yeah, that's right as I explained in my lecture the physics object is [INAUDIBLE] the whole physics world and it contains things like gravity and all that. You need to create it. You're going to need to create one physics world. A bit like you only need to create one maxim. >> But you can create several bodies [CROSSTALK] So we call a body called boid, who's our droid. Our angry droid, in fact. >> Yes, our [CROSSTALK] droid Yep. >> And, it's the [INAUDIBLE] and then we got a whole, array of other bodies which crates will [UNKNOWN] interacts. >> So having an array you could just have lights with crates and crate hole. >> And then we have a vector which is the start point, which we use to, set with a catapult is. >> so that's the start point for when s, bring back, talks in the guy room, is that right. >> Yeah, that's right, that's where the catapult is. >> Okay, and then we have a collision detector, called detector, in which the, a, detection responds to collisions. >> So that's basically what, a, detects the collisions and then calls the collision method. >> that we'll see later. >> Right, then we have some initializers for these variables. Crate size, which you can change if you want a massive crate bolt size. and then we have a bunch of images which we then pass into the physics engine and it then draws. we'll explain about how that works in a second. >> Score is initialized to zero and then we're currently not dragging What is that marker? >> Can you [CROSSTALK] That's just I need to keep track of when you're dragging the mouse because it's drawing a line that's sent to the catapult elastic. So whenever you're actually dragging with the mouse, you're dragging the [INAUDIBLE] will follow you around and you're pulling on the elastic and you need to see that elastic. That's all that's doing. >> There are some really terrible jokes in this. I think, yeah, we'll just have to pretend. That they're funny. So you can see here that we have a size command. Because this is the one that we're using for the iPad predominantly at the moment. This is 1024 by 768. But what we can do is set this to the size of an iPhone screen. Which would be 480 by 320. Or if it's on Android it we just comment it out. We're at 60 frames a second. And we load our images. The scrap yard is the background. The crate is the grate. The tux droid is our hero. Image mode center, you know what that means. Now, we get our physics objects and we initialize it with a width and a height, which basically says what the bounds of the world are. >> So in this case, it's the same as the bounds of the actual screen. >> I'd like to just say that I've put some comments after it, which gives another example of how you might want to do a more complex initialization where you can pass in values for gravity and here width over width times 2 height times 2. That's the overall world size. It's going to be bigger than the size of the, of the screen. and so you could have this more complex initialization which sets more values. Most of the time you're not going to need that. >> Most of the time you should do This version. >> So if you have a world size which is greater than the size of the screen you can have off screen objects which can float into the screen? >> Exactly. So objects can go off screen and not instantly sort of stop being stimulated. The world size, if something goes outside of the world size it stops being part of the physics simulation. >> And then also you can have custom gravitiy so that you can. >> Yeah. >> >> Have high gravity or have gravity that goes upwards [CROSSTALK] So the things can suddenly go up or suddenly go down. >> Yeah. >> I always love it when that happens. Well that's actually what happens in that kind of space version of that very famous physics game that we already mentioned far too much. Okay. >> So we've got a custom rendering method which I'll talk a little bit about this. This is something special about this sort of the way the physics engine works. Now you can actually, if you don't do that, if you comment that line out, it will draw itself. It had it's own sort of renderer which will draw boxes for all the boxes and all that. Which is quite useful when you’re debugging or if you don’t, haven’t got your graphics in yet. But once you’ve got your graphics in, you want to be able to control the rendering of all the physics objects. And rather than calling that in the draw method, the physics engine sets up a custom rendering method, which is the function myCustomRenderer. which we'll see later on, [UNKNOWN] does all the drawing of the [UNKNOWN]. >> And that basically draws tucks, and it draws all the cranes. >> Yeah, that's right. >> Right, okay. So instead of having to draw methods, we've just got our own method, which is a wearable and a physical object. Okay, great. And then we've got set density, which is how stupid I've. >> [INAUDIBLE] No. >> Okay. How, what is that [INAUDIBLE]? >> [LAUGH] It's it's basically, ti controls the mass of the object, so the density is mass divided by area, and that will, so the, the mass of an object, [INAUDIBLE]. how much it resists forces, how much force you need to actually push an object. Is determined by how big it is but also the density. So if you set really high density, with quite a high density then the objects on is going to, are going to be quite massive. It's going to be a bit hard for me to move them around. If you set a really low density they're going to be floating around more. If you set the density to zero, can create objects that don't move. And that's quite useful. So if you want objects that don't, that don't move, set density equals zero, and then after that set density equals one, and you can create objects that do move. So you can change the density as you go, as you create different objects. >> All right, so then we create seven new bodies, which are all our crates and then these are accessed as arrays, And then we create a [COUGH] rectangular body. and it has a position, which is its start position. A height a width. And what's this last one? >> So that's, that is the, that's the y position. X position, y position. >> Y position. >> Width and height. >> And I'm just using height Because. >> Oh yeah, x1. >> It's at the bottom of the screen, so it's just moving up from the height [INAUDIBLE] from the bottom of the screen. >> Okay. >> So it's actually x position, y poition, the top left, x position, y position the bottom right. Not width and height like like a rectangle. >> Yeah, so fundamentally, it would be much better if this was all done relatively to the screen width and the screen height in as in our week two example. >> Yeah. Yeah. >> That, we'll leave that up to you. so, yeah. So this basically sets up where the, all the boxes are at the beginning. It gives them an initial position. And then the start point, which is where, that's where The tux is connected to [INAUDIBLE] stuff. See I [INAUDIBLE] [INAUDIBLE] .And this is just where we put it. And then we just put that in a physics word. Yeah so I'm converting to a physics coordinates. As I said in my lecture, we've got a different set of coordinates for the world, the simulation than you would for the screen and we want the start point in physics coordinates. So, the boid is circle rather than a rectangle. When we created the [UNKNOWN], those bodies, we used this rect, but for the Android for the kind of angry droid we're using a circle. Why's that? >> Well, because, well, first to say this is the example of the fact that you use simpler shapes for your physics than you would for drawings. So [INAUDIBLE] is quite a complex object. For the crates, the crated boxes, it's fine to use a box for the physics and for the graphics. But for [INAUDIBLE] it's a fairly complex object. >> But you wouldn't want to simulate all the physics of his exact shape, because that would be. >> Yeah. >> Very [UNKNOWN] expensive. It would take a lot of time. So you have a simplified object, and you take the physics in that. So we're simplifying him down, he's quite rounds, we're simplifying him down to a circle from the point of view physics, and you see him as something a bit different from, in the actual graphics. So then we set up our collision detector. Which is standard. We pass it to the phy, the physics word basically gets the collision detector. Then we have our maxim context, which we've seen before. We load in our boid sounds, which is the sounds of Tux hitting something. The wall sound. then we set them looping, all the stuff you've seen before. And then we have this for loop which loads over create sounds in. And that's the big array full of sounds, right? Let you describe the array now. >> That's correct. Yes. >> Okay. And then we're moving to the draw method. >> So whoo, we start our game, our first level of our game, That was quite intense, now. >> Just a second, great thing about using a physics engine is once you set it up, it will just run. >> Yeah, that is true. >> And actually the biggest thing is you just set up the world, and it just does everything for you. >> Yep, that is good. And so you don't actually have to process any of your own collisions, you don't actually have to know what the velocity of any of your objects are or compute them. The physics engine does it all for you. This is what most people who are developing games do. Then we learn from search engine in order to do those those calculations. Some people insist on watching learn from search engines from scratch. [COUGH] I think that's actually a good idea if you like doing that sort of thing, but if you don't you should probably [INAUDIBLE]. so, the draw method is surprisingly small, in this case, because as Mark has already mentioned. The physics engine is doing the drawing for the foreground objects that are moving around. This is because it knows where everything is because it's calculating the velocity. In other words it's calculating all the x and y positions. but we still need to have the image of the tip, which is the backdrop, which I already explained. And we also have to have the score. Which, at the moment, There's no objective. One thing you might do for an objective is say, you know what, let's have each session last 20 seconds. And get the highest score you can in 20 seconds. And then have a second, in other words, each session lasts, each game level lasts 15 seconds. And then the next level lasts 10 seconds. And you just have to get the highest score that you can. This provides an objective. It's up to you to kind of think of an objective. The whole point of designing a game is to have something people want to do. we're just giving you a framework. So it'll be great to see what you come up with. All right. Now, [COUGH], as a few of the standard methods mouse-dragged, which basically sets the position of tucks. Who is basically the boid object. And we've got these 'screenToWorld' coordinates. We parse in the Mousex and the Mousey values, add a two-dimensional vector to our physics world, and that sets the position so that when we click on the screen we can make sure that that's where our [UNKNOWN] is going to be. And then we just demo that. >> That's why when I click on the screen Turks appears more or less where I leave him, and I can just fly him around. Okay. mouse release there's a bit more stuff going on. Dragging is set to false. So this means that we're no longer fixing the position of Turks and we have this thing called an impulse and now that's probably best if Marco explains this. >> So basically, when you release the catapults touch will start flying off, the reason is that force is instantly applied to touch. It's an impulse; I talked about this in my lecture. So what we're doing is we're calculating the appropriate impulse direction and magnitude of the impulse based on where you're pulling back. The elastic catapult. I've gone through the details of this calculation in my lecture, but it's using vector subtraction and multiplying the impulse by a certain constant to get it at about the right value, just as Matthew was saying a bit about the audio sometimes you just need to play around to get the right number, to get the right feel for it and then we apply the impulse to tux and from then on the physics just handle how it moves. >> So that constant in this case is 5000. >> And then, yeah, we apply the impulse to, to him and then he's given the impulse just as if you've smacked him in the face with a big stick. which yeah, I think penguins, you know, they're probably used to that. Okay, so the last thing we want to talk about in the terms of this demo app is the my custom rendered. Which is I'll substitute for the draw function where all the drawing and the physics end and so the first thing to note here is that we set the stoke to 0 and we get the start point and use it draw to a line and that's as you can see in the example this line is. >> The pole that Tux is suspended from and that we use to fire him off. That's his kind of starting point in the world. Boing. Okay, and then following that we have to draw all the other stuff. So Marco, do you just want to talk us through that? >> Yeah, sure. Just to make a note this is, this is what I described in my lecture. We're getting into position of and the angle of the each of our physics objects in this case void we have to convert from world coordinates to screen coordinates. Just as we did we have to do up here. And then we can use whatever processing drawing code we like using those coordinates. They're just values they're just numbers we can do whatever we like with them. I'm doing a fairly obvious thing, I'm translating, imitating by those two values and then drawing an image. >> So most of the time you are going to want to get the positions and the angle translate by position take by the angle and then draw whatever you want, in this case we're going to draw the images we got and the code for crate is exactly the same where we've got a four loop over all the crates but we're just doing pretty much the same thing just drawing a different image. >> And it's just because it's an array of crates. >> Yeah. >> So doing each one at a time. Okay so the final, final thing in addition to the other final thing we going to talk about is just how the collisions work. >> Now, the main the method for doing collisions is, it's all in collision detector dot JS. So we just have to use that collision detector, pass in the positions and it will work out where a collision has happened and will let us know. so the main method for that, well this is basically here boid collision. So the collision dysfunction is caused by the collision detector, and you've got, as I said in my lecture, two bodies that are colliding in the impulse. So you can use that, for example, I'm checking here if the impulse is more than one, so it's a proper impulse. I'm increasing the score, so the score's going up. That's how we did in scoring. But we're going to do a few things so we can, we can, because we got the bodies we can check which particular body it is. And we need to make sure that there's two things. There's, we need ju-, the, it's the actual tux that's colliding so we're checking if one of the bodies, b1 or b2, is, is void. And the other thing we're doing here is we're checking the mass of the other objects. Why are we doing that? Because you might notice that cut bouncing off the screen that's because they're physics objects at the edges of the screen that automically created. Those have 0 mass which means they don't move they're static objects. but we don't want to get [UNKNOWN] when we bounce off the walls so we'er just checking that the objects have more than 0 mass which means they're not one of the static objects, they're one of the crates. so we can do that test similarly [UNKNOWN] whether you talk through a bunch of code is easiest to crate the audio. >> And to create audio to respond to collisions. And that stuff's just here, and it's the same. >> That's right. >> Okay, great. So fundamentally that's the basic set example. >> It shows you how to create a physical world, how to put objects in that world, and then how to Interact with them, and have them interact with each other, it also shows you how to draw the different artwork that you need, the best way of preparing the artwork, and it's up to you to put in for example decent artwork, game play, mechanics that sort of thing, or the kinds of scoring mechanisms and different kind of ideas. So you can use it as a starting point, and you can develop it and try to build on something that's a much more developed project. >> And, and that's it. >> Have fun. [MUSIC].
