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.