Placeholder Image

字幕表 動画を再生する

  • COLTON OGDEN: All right.

  • Good evening, everybody.

  • Welcome back to GD50.

  • This is lecture six.

  • And today we're going to be venturing out of the 8-bit world

  • and back into a more modern era of gaming.

  • We're talking about Angry Birds today.

  • I have pretty fond memories of Angry Birds, actually.

  • It was the first mobile game that I remember

  • playing where I realized that mobile was actually a viable platform for gaming.

  • I played it, I think, back in 2009, was when it was first released.

  • And I really enjoyed it.

  • It has a very simple formula.

  • The goal, if you're unfamiliar, is you have

  • birds that you control by a sling shot on the left side of the screen.

  • And then these pigs that have stolen your eggs,

  • you're trying to destroy them or kill them

  • by knocking down their fortresses made out of various materials, wood, glass,

  • metal.

  • And you get a few different bird types.

  • But the gist of it is, basically, just sling shot a bird into some structure,

  • knock it down.

  • And the whole entire underlying mechanism

  • for how things work is via a physics engine,

  • which we'll talk about today in lecture, called Box2D Probably

  • the most ubiquitous 2D physics engine.

  • But that's the overall structure of the game.

  • It's literally just throwing things into structures, knocking them down.

  • And then that tactile and fun game play makes for really great mobile gaming.

  • And I enjoyed it a lot back in the day.

  • This is a screenshot of the first level in the first Angry Birds, which

  • most people I think have probably seen.

  • This is a sample from one of their newer games.

  • As you can see, it's taken a whole new layer here.

  • There's stone and a bunch of intricately varying structures and new creatures

  • and stuff like that.

  • The game has changed a lot, but the formula has stayed the same.

  • And today we'll explore the foundation of what makes this game work.

  • And the topics today, a smaller than usual.

  • But Box2D, we can consider as being a pretty large topic.

  • We'll be talking about Box2D, which is the physics

  • engine we'll be using today in lecture.

  • And via Love2D, which has its own wrapper for Box2D.

  • And we'll also talk a little bit about mouse input, which you haven't really

  • done a lot.

  • But it's very apt, especially in the context of mobile gaming.

  • Because mouse input and touch input are synonymous.

  • But first, let's get a lecture demo.

  • If we have a volunteer come up on stage to showcase

  • what I've put together here.

  • So let me make sure I'm in the right directory here.

  • So whenever you're ready, go ahead and press Enter.

  • So this is a little demo I put together to demonstrate the concepts we'll

  • talk about today in class.

  • This is just the Start screen, but it already

  • shows Box2D representing a bunch of these square shaped aliens, which

  • we'll actually be what we're trying to target in the game.

  • But notice that they all fell and had their own collision

  • and their own physics that took place, and I didn't have to manually code

  • rotation and stuff like this.

  • This is all stuff that Box2D takes care of for us.

  • And we'll see it used to great effect soon.

  • If you go ahead and just click anywhere on the screen,

  • we'll go to the main part of the game.

  • So this is a very simple representation of what Angry Birds is.

  • You start on the left side of the screen.

  • You have a bird, in this case an alien, we

  • used a free art pack that uses aliens instead of birds,

  • but it's the same concept.

  • You have an alien that you can click and drag.

  • So if you click it and then drag around, you

  • can see the trajectory that you'll have when you let go of the mouse.

  • So we're simulating where it's going to go via these purple circles.

  • And then the goal in Angry Birds is to throw the bird into,

  • or the alien, into the fortress guarding the pigs,

  • or in this case, square shaped aliens.

  • So if you go ahead and just launch the bird by letting go of the mouse

  • you'll see.

  • Oh, there we go.

  • And we knocked down the.

  • OK.

  • What happened was we shot the alien into the structure.

  • It destroyed one of the wooden blocks guarding the other alien.

  • And then, as soon as that happened, the top box,

  • because these are all being simulated via Box2D's physics engine,

  • that other box was detected as being unsupported.

  • So it fell down, it hit the other alien.

  • And we've coded it so that when a collision occurs

  • between an obstacle and our alien of sufficient speed,

  • it should kill the alien.

  • Which is how it works in Angry Birds.

  • So if you'll try it again.

  • And this time we hit both of those at the same time.

  • So it triggered both of those being deleted.

  • But this guy is still alive.

  • So after it stops moving, which is similar to how

  • it behaves in the original game, it's going to let us try again to shoot.

  • So if we try one more time.

  • And then we launch and hit it, we kill it and then we get a victory.

  • So that's the overall underlying foundation for what Angry Birds is.

  • Obviously we're using a very simple representation.

  • It doesn't have a lot of the frill that Angry Birds does.

  • But we could easily build upon this and create a fully fleshed out

  • game very similar to Angry Birds.

  • So thanks, Steven.

  • I appreciate the demonstration.

  • So that's our goal today.

  • We'll be talking about how to construct a very basic but functional simulation

  • of what Angry Birds is at its core.

  • Which is just flinging things into obstacles, destroying them,

  • and ultimately destroying the things that they're protecting,

  • the aliens, the pigs that are in the base game.

  • So here's a shot of what the different sprite sheets we're going to be using

  • are.

  • There's a really great sprite sheet that I got off of Open Game Art.

  • Kenny is the artist.

  • He makes a lot of great art.

  • If you notice, it's very similar looking to the art

  • that we use in the Mario lecture.

  • Actually, it's the same artist.

  • So if you're ever looking for assets, he's got a ton of awesome assets

  • on open game art.

  • So we have a set of aliens, square and round shaped.

  • I decided just arbitrarily we made the round shaped aliens the birds.

  • So we shoot those into the structures that are

  • protecting the square shaped aliens.

  • The square shape aliens will be the bad guys in this case.

  • And then we have another sprite sheet down here below on the left side.

  • Which just, I used the tile here just to make a ground element.

  • The rest of these you could easily include in the game if you wanted to,

  • but we're only using the ground here.

  • And then notice here, we have this large sprite sheet

  • which has a bunch of different shapes and sizes of materials.

  • The whole sprite sheet comes with metal and explosive and glass sheets as well.

  • But just for simplicity we only use the wood here.

  • But notice that we have entirely whole pieces

  • and then we have pieces that are partially destroyed

  • and then pieces that are hollow.

  • You could easily model all of these in your game and use them.

  • But we only decided to use just a couple of these,

  • which was just the horizontal and the vertical ones that

  • are completely whole.

  • These, unfortunately, don't have quite the same systematic layout

  • as the sprites that we used before.

  • They're not laid out in a grid evenly spaced.

  • So in this case, in util dot Lua, I ended up hard

  • coding the different XY width and height quads

  • for each of these, which is what you have to do in a situation

  • where you're interacting not with tiles per se,

  • but with more organic shaped objects.

  • So it can take a little more time to end up

  • constructing all of the quads for your objects

  • when you have a sprite sheet like this.

  • But, fortunately, you only have to do it once.

  • Here's a few useful links before we get started in talking about what Box2D is

  • and how to use it, and basically how it's called love dot

  • physics, effectively, in love2D.

  • The first two links are documentation for love 2D,

  • what the functions and objects are that we'll be talking about.

  • And a simple tutorial that talks about how to make a ball

  • bounce in love 2D using Box2D.

  • The third is a great resource that I used actually

  • to learn most of what I know about Box2D, especially

  • in the context of this lecture.

  • So it talks about a lot of different concepts.

  • It talks about all the things that we'll be talking about.

  • And then it goes into a lot more detail about how

  • you can go about constructing a lot of really cool, crazy things like tanks

  • and pulleys and a whole bunch of different things

  • that are worth looking into if you're looking into potentially making