This course is for anyone who would like to apply their technical skills to creative work ranging from video games to art installations to interactive music, and also for artists who would like to use programming in their artistic practice. This course will teach you how to develop and apply programming skills to creative work. This is an important skill within the development of creative mobile applications, digital music and video games. It will teach the technical skills needed to write software that make use of images, audio and graphics, and will concentrate on the application of these skills to creative projects. Additional resources will be provided for students with no programming background. At the end of this course, you will be able to: * Write creative, audiovisual programs in the Processing environment that run on desktop and mobile * Programatically manipulate sound in creative ways * Display images and image sequences * Generate interactive, algorithmic graphics * Work with a 2D physics engine to create a basic game
4.5 Group discussion
Loading...
來自 University of London 的課程
Creative Programming for Digital Media & Mobile Apps
34 個評分
從本節課中
AngryDroids
This week we will be creating a physics based game using a Physics engine based on Box2D. Physics engines are a fantastic way of creating dynamic gameplay that models the real world. Box2D is one of the most popular because it is optimised to be fast for 2D games that don't need the heavy processing of a 3D engine. It is used in many important 2D games, most famously Angry Birds. We will be using boxwrap2D which is a Java port of the original C++ version of Box2D, that is designed to work with Processing. Since boxwrap2D is java only we have created our own port to JavaScript, which interfaces to the javascript version of Box2D, but provides an almost identical interface to the Processing version.
與講師見面
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Mick GriersonReader
Computing Department, Goldsmiths, University of London
[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].
