Placeholder Image

字幕表 動画を再生する

  • (train whistle sound)

  • - Hello, welcome to a coding challenge, Angry Birds.

  • Although, my birds won't be angry,

  • they're going to be loving loving birds.

  • But maybe they won't even be birds,

  • they'll be like cute little Coding

  • Train characters, but that's not the point.

  • I am going to program a version,

  • a much simpler simplified version

  • of an Angry Bird style clone.

  • I'm going to use p5.js, I'm going to use a physics

  • library called matter.js, and I'm going to

  • get started in one moment.

  • But first (laughs) let me diagram out what I need.

  • So, I'm going to use an object-oriented programing approach.

  • I'm going to need something called like a box.

  • So, this will be a box class.

  • I'm going to need something like a bird,

  • we'll just call it a bird for right now.

  • And I also need,

  • the ground.

  • So, I'm going to start my simplified Angry Birds,

  • it's going to have a single box, a single bird.

  • The box is sitting on the ground.

  • I'm going to want to toss the bird at the box

  • and knock it over.

  • And from there, the glorious games

  • throughout the universe that you will make

  • maybe will follow.

  • This is the p5 web editor, I'm going to use p5

  • for all of the drawing stuff,

  • and I'm going to use the physics library matter.js

  • for handling all of the physics.

  • Now, matter.js does have rendering built into it

  • but I'm going to do things my sort of way

  • of combining both libraries

  • so that I can do all the rendering custom in p5,

  • and maybe by the end of this video,

  • have some of my Coding Train characters

  • inside of this little game that we make.

  • Alright, so, first I want to take

  • an object-oriented approach

  • and I'm going to do Add File, and I want to add,

  • I need a bird.js, and I'm going to make

  • something called a box.js.

  • And I think I'm going to be able to use

  • the box for both.

  • I'm going to use the box class for both

  • this thing that can actually get knocked over,

  • and the ground, which needs

  • to be something immobile, static.

  • So, what does a box need to have?

  • It needs to have an x, it needs to have a y,

  • it needs to have a width, and it needs to have a height.

  • And I'm going to require that all of those arguments

  • are passed in, via the constructor.

  • Then I'm going to, oh, and so I need

  • to put the arguments in here, x, y, w, h,

  • and I need to, what do I need to do?

  • I'm going to write a show function,

  • and in here, I'm just going to say,

  • I'm going to use fill to make it white

  • and I'm going to say rectangle this.x,

  • this.y, this.w, this.h.

  • Okay, so, this is the basic idea of a box class,

  • with no physics, this is just the data

  • about a box and this is me drawing it.

  • So, now, in the main sketch, I'm going to say,

  • let ground, I'm going to have a global variable called ground.

  • I'm going to say ground equals a new Box,

  • and it's going to be, the x is going to be at zero,

  • the y is going to be at like height minus 20,

  • and the width will be the full width of the window,

  • and the height will be 20.

  • And then I'm going to say ground.show.

  • Now, it's giving me all sorts of errors

  • like it has no idea what a box is,

  • and the reason why it has no idea what a box is,

  • is because even though I added a new JavaScript file,

  • I didn't add it to my index.html.

  • So, let me go and add it to index.html, box.js.

  • And there we go look.

  • (bell ringing)

  • Step one is done.

  • I have the ground.

  • The ground is there.

  • Now, the next thing I'm going to do,

  • is I'm going to have a box.

  • I'm going to just call it a box.

  • A box is another new Box,

  • and let's put it over to the side

  • in some arbitrary place.

  • And say box.show, there it is.

  • I want it to be tall.

  • I don't know what I'm doing exactly yet,

  • but something like this, there we go.

  • Okay, so that's the thing that I need to throw my bird at.

  • Now, I need another class.

  • I'm going to do Add File, and I'm going to call this bird,

  • oh, look when did I?

  • It like knows what I'm going to do in advance,

  • isn't that crazy?

  • I think I've written other things

  • in the p5 editor with a bird.js.

  • bird.js, class Bird, and I'm just, you know,

  • I probably could maybe use inheritance here,

  • where I made some videos about recently,

  • but I'm just going to do like a sort

  • of horrible copy paste job.

  • But I'm going to change this to an r,

  • to indicate radius, because my bird

  • is going to be a circle, and this dot r.

  • And now I can say let bird, bird equals new Bird,

  • and it'll be at like 50 pixels over, 300 pixels down,

  • and with a radius of 25, and oh, doesn't know

  • what bird is yet again because

  • I now also need to add bird.js to my index.html file.

  • So, I've got the bird, I've got the box,

  • these are all the elements.

  • So, I have all the elements that I want in my scene.

  • Ultimately, I'm going to want to have like a stack of boxes

  • and use images to make this have more personality.

  • But the next thing that I need to do,

  • is add physics.

  • Now, I could use, you know, I could start doing,

  • adding some functions to do all the physics myself,

  • but I would like to use a physics engine.

  • The matter.js library is released through NPM,

  • node package manager.

  • So, I can go, and everything NPM,

  • it's already like appearing in my,

  • 'cause I looked for it before I started this.

  • But if I just go to unpkg, unpackage

  • which is the content delivery network

  • for NPM packages, and do matter.js,

  • and hit Enter, we can see this is the URL

  • for the matter.js library.

  • I want to get the minified version of it.

  • So, I'm going to also add .min.js.

  • So, now I have this particular URL.

  • I can go back to the p5 web editor, index and html

  • and I can, I'm just going to like paste it here

  • for a second.

  • I'm going to grab one of these.

  • These are the script tags for the p5 library, right.

  • And so, instead of, I've got p5, p5 dom, p5 sound

  • and now I want to add matter.js as a library.

  • So, these are now all of my libraries,

  • and all of my custom JavaScript code.

  • And if I go back to sketch.js.

  • Let's make sure the matter dot library has loaded.

  • If I just say console log Matter.

  • We can see yes, stuff is coming out here.

  • The library is loading.

  • That would obviously say if I hadn't loaded that library,

  • I don't know what you're talking about.

  • So, I have a whole bunch of tutorials

  • about the matter.js library.

  • So, I don't need to spend.

  • I can refer you to those if you want more background.

  • But basically, I need to establish

  • this idea of an engine object,

  • and a world object.

  • The world is talking about the environment,

  • and then, each one of these things

  • will be a body.

  • This will be a rectangular body,

  • this will be a rectangular body,

  • and this will be a circular body.

  • So, my classes, box and bird,

  • I'm going to make them wrappers

  • to have inside of them, a piece of data

  • which refers to the actual matter.js body.

  • So, the first thing that I need to do,

  • I think is let's have a world and an engine.

  • And then I think I say engine equals Matter.

  • Well, I think I better do this first.

  • engine equals Matter.Engine.create,

  • I don't know, I'm guessing.

  • I think that's right, having done this before.

  • And then I think the world is actually

  • created when I create the engine,

  • I can just grab it from the world.

  • So, now I have the matter engine,

  • and the matter world.

  • Then inside of my objects, what I want to do,

  • let's just do the box first.

  • So, here instead of having an x, a y

  • and a width, and a height.

  • Although, I think I might keep

  • the width and the height just to store it.

  • I now want to add this.body equals Matter.Bodies.rectangle.

  • This is a function that in the matter library,

  • will create a rectangular body object for me.

  • And I can give it,

  • I'm going to do this first.

  • Like, I don't, this box object no longer is going

  • to have its own x and y, it's just going

  • to give the matter body, the x and the y.

  • So, I'm going to say x, y,

  • I think this is actually what it gets.

  • And then I need to say

  • Matter.World.add to the world, this.body.

  • So, I need to actually put it in the world.

  • So, what happened to the box?

  • Oh, oh, oh, I took out this.x.y,

  • so now, the whole point of this

  • is in show, I want to ask,

  • I want to say hey, Matter. (laughs)

  • I want to say give me a position

  • which is this.body's position.

  • And now, I'm going to draw the rectangle at pos.x, and pos.y.

  • Now, there may be a way in fact,

  • that I could dig into the body

  • and get its width and height but I'm just going to store

  • those out of convenience for myself.

  • The size of these rectangles is never going to change,

  • so I can keep that.

  • There is a big issue here though.

  • Which is that, one, is that once I start adding the physics,

  • the box could wobble, meaning it could rotate,

  • so, I'm also wanting, I'm also going to want to get an angle.

  • And I am going to want to then draw it with rotation.

  • So, I'm going to say push, I'm going to say pop.

  • I'm going to say, translate pos.x, pos.y.

  • And then the rectangle's at zero, zero.

  • And I'm going to rotate by that angle.

  • There's another little weird nuance here.

  • So, I like for myself, I like to think about

  • placing the rectangle with the x, y in the corner,

  • and then the width and the height,

  • and that's the default behavior of p5.

  • But matter.js, when you make a rectangular

  • or circular object, the x, y position

  • for that object is always in the center.

  • So, this actually have told matter.js

  • where the object is and drawn it

  • in a different place.

  • So, I need to reconcile those two things.

  • So, to reconcile those two things.

  • There's a few different ways I could do it.

  • One, is first, I should say rectMode CENTER.

  • So, that I'm drawing.

  • But now you can see everything's off in a weird place,

  • which is maybe fine, maybe I just need to rethink

  • where I'm placing the stuff.

  • For example, the ground would be now at,

  • width divided by two, height minus 10.

  • So, that's the same thing.