Design with Prompts

Download source code here

Transcript

[00:00:00] So today I'm going to show you how to design and build this Angry Birds game in just 10 minutes.

This tutorial is different because it uses actual laws of physics, and the bird interacts with the objects just like it would in the game.

You can literally use the same logic and build any kind of environment where objects interact with each other.

So let's get started.

For this tutorial, what we will do is we'll use a library. It's called MatterJS. it's a 2D physics engine for the web. It has such amazing stuff that you can do just right off the box.

We're going to do it in such little time that it's going to almost feel like, wow, how did this even happen?

First I'm going to create a simple Vite application. So I'm going to go to vitejs. dev and I will copy the command that, that is shown here. And I'm going to go into my terminal and I'm going to just paste this command and I'm going to say angry birds.

I'm going to say React and TypeScript. And I'm going to go into cd angrybirds as the command is written there, and I'm going to say npm [00:01:00] install

now that's done, I will open this project in my code editor. And once I do that, let me make it full screen so you can see clearly.

So now what I can do is I can go to my source directory and I can open app. tsx. And this is basically where the main program lives.

So the first thing we're going to do is we're going to create the scene in our browser. So we're going to use simple shapes to make the scene first.

And we're going to add all the interactivity, the mechanism and then after that, we will replace all the shapes with the birds and the game assets so that it feels like a real application.

We're going to say, create a scene using matter. js. Utilize the full screen add a ground to the bottom of this scene then create a pyramid of boxes and add them to the scene at the bottom

so it goes and [00:02:00] does all the code that's required to do this. And I'm just going to accept all the changes. It gave me some error. So I just have not installed Matterjs.

So I'm going to open a new terminal and I am going to install this. And when I've done that, the error should go on its own as it did. And I am going to go refresh my browser and see. Okay, not bad. I have at least a pyramid of boxes. And, but it's not exactly at the center of the screen, but we can fix that.

First we will try and remove the padding around the scene. And let's do that by saying, remove the padding around the scene position it in the center, covering the full screen.

Now what I'll do is I'll make the boxes fall on the ground because then it activates the physics engine and then these boxes are interactive. So right now these boxes are not,.

So we can do that by, let's clear out our terminal and now we can go and say, now initialize a runner and [00:03:00] make the boxes fall to the ground. This runner is something I figured that makes the code a little more smarter to execute this. It's because it's a little understanding of the mechanism with which it works, but I tried a few times without this runner, but, it took a little while for me to get there.

But once you know that this is exactly how it needs to be done, it was much faster.

So now that you have your falling boxes, let's go ahead and create a tower on the other side of the scene and we will make the ball rest on top of it.

So I'm going to go here and I'm going to say now move the pyramid. to the right in the x axis and make a vertical tower on the left and place a ball on top of it.

And now it should understand what I'm trying to say.

And I'm going to accept the quote that it gave me. Wow, there's a bit of elasticity of the tower, which is okay., we can work with that later, but I think this is kind of what I wanted [00:04:00] to start with. Let's make some little adjustments on the sizes.

I know you don't like coding, but if you see in the code, you have some values, they're just like, so you can see the number of rows. And if you just increase from 10 to 20, then you could see automatically the number of, blocks just increases accordingly. So these are like values that you could just simply adjust and your code just works

so now let's adjust the sizes of the tower and the ball so we can just fix it a little bit to our liking. So I'm going to go here and for now, for this part, I'm just going to adjust it directly in code because I don't want to be like spending too much time and asking it to make and explain exactly how much I want.

So I can see that the tower height is 15. So I'll probably make it 5. the tower width is 40. Let that be. Tower X is 100. Make it 450 or 550. And let's see the pyramid offset, offset the pyramid to the right.

So I'm just going to make it like 400. I think 400 is fine. So before 50. So let's give it a little more distance [00:05:00] to shoot.

Finally, let's just increase the sizes of the boxes.

Let's say increase the size of the box on the pyramid and that should take care of increasing the part of it and it'll leave a comment in the code so we could always also adjust it after.

So we can actually go and see what it did, right? It had something called a box size. So earlier it did not have, so it added it and then it adjusted the code to accommodate the box size. So I'm just going to accept it. And, let's see. I think, yeah, this is pretty much what I wanted.

One last thing. I'm going to make the ball a little bit bigger. So I'm going to say increase the radius of the ball. Size could also work, but radius is a little more specific. I have said yes, accepted the code, and there you go. Oh, there's, why is the tower wobbly?

Make the tower one vertical rectangle

stack squares. I think it understood that it, it went and made all these changes that it didn't ask. [00:06:00] I hope AI gets better with time and understanding these things, but yeah, we have the scene set up right now, the way we want

Now let's go and add the interactivity to the scene. So what we're going to do is go back into our cursor. So let's start a new chat with our composer and we will say,

make the ball interactive and allow me to move it using the mouse or touch. And then what it would do is just turn the ball into a body that is given by MatterJS that just gives all these properties and see if you can go into the code, you can see that it creates an interactive ball.

And it adds some mouse control over here, and it adds a mouse constraint and then yeah, that's pretty much it. I'm going to accept all the changes and I'm going to go back into our code and see what it does. There you go. Oh, that's fun.

It's already close to what we want to get to and the ball is interactive . It feels like a little [00:07:00] bowling game and it interacts with all the objects in the scene. It interacts, it bounces from the ground, it goes and hits the boxes and great.

Okay, so now is the tricky part. Now we want to implement the slingshot behavior. So when you drag, it doesn't have to, drag it in free fall like this and you don't let the tower just like fall out of the scene, but you want it to behave like a slingshot. And then when you leave it, it needs to go shoot at the boxes.

So we're going to go back into our cursor and let's open another new chat.

And we're going to say. Create a constraint. Again, I know constraint is something that I read in the documentation in terms of a little idea of how things work. It's better to know these things If you just go through the documentation just once just to understand the logic behind how things are written, but you don't actually need to know the code, because when you do it, then you can also debug it easier when something doesn't go well.

And you can interact with your code in a much more informed way that gets [00:08:00] much better results. Okay, so create a constraint from the center of the ball. So I can pull it

around like a slingshot. The anchor point should be at the center of the ball. As I drag the ball, the constraint should stretch the ball within a circular area.

when I release the ball, it should come back to its original position.

It looks like it did lots of changes. So I'm going to accept it. There is one error. Let me go and fix that error. Okay. It worked. I'm going to save and I'm going to refresh and let's see

I think it's pretty cool. Like this is exactly what we wanted. Uh, I know the tower is a bit funny. We can fix the tower later, but the spring action is perfectly as we wanted. Now we just have to make it shoot

so in my cursor, I'm going to say, when I release the ball, detach from the [00:09:00] constraints and shoot the ball. like a slingshot in the direction I release it.

And I'm going to accept these changes and there are some errors. I can just go and say AI Fix in chat and that should tell me what the problem is.

Okay, I'm going to accept this. Those are, I think, TypeScript errors. So let me refresh. And when I release the ball. Okay. I think we are getting somewhat close, but the release velocity is so slow. But I'm sure it should be a simple way to, uh, to just modify the release velocity.

So to adjust the release velocity, I'm going to go back into my cursor and I will say increase the release force of the slingshot. To increase the release force, we modify the force calculation. I think it should give us a simple function that we could just like modify. So I'm going to accept it and let me refresh and let me see if it, okay, it's increasing. So let's say this is the magnitude function. It increased from 0. [00:10:00] 005 to 0. 001. So what if we make it 0. 010? Um, and let's see what happens. Whoa, that was super fast.

005, think this is kind of what we want. Okay. this is looking quite good.

Now for the last part, um, what we will do is we will replace the images and we will create the scene. I'm going to close this for now and we have a public folder. So this is where all our images are going to live.

I have this image, which is the block. I have this image, which is the bird. And then I have this image, which is the sling. And I am going to take all of them and put it in our source directory.

There you go. And then we will also add the background image. So the background image is an SVG. So you don't see the image here, but when we import it, it won't be pixelated and it will, fit well with the scene and also in any kind of device.

So we can go back into our code, refresh it, and, we will open [00:11:00] our composer, start a new one.

Now import, images, block. png. and bird. png and replace the block in the pyramid with block. And the ball with bird. png

It imported the block and the bird and I'm going to accept everything. Thankfully, there are no errors. I'm going to hit save, go back to my code and it says that it failed to import block. So I'm just going to say , this issue exists and it will understand that the block and the, okay, there you go. It gave a fix. I think this is pretty cool.

This is kind of what we wanted Yeah, some minor adjustments, but we are getting much closer to our final outcome already.

Now what we'll do is we'll reduce the padding between the boxes. And I wonder why that's happening. I think it's because the size of the box is bigger than the size of the image. So we're going to say, there is a padding between, padding around the blocks [00:12:00] with the new image, remove that padding.

Okay, it did increase the scale of the box size. So I'm going to say yes, and I think it's getting better. So I'm going to say to 160 and make it 160 and see what happens. Oh, I can see it. So basically if I increase it, it reduces. So I'm going to make it a hundred and make this a hundred.

I'm going to hit save. Okay. I think that's pretty much close to what we want. So let's make it 90. No, 110 perfect.

Now the last part is to add the background. So to do that, we're going to go back into our cursor. Let's refresh and start a new one. And say use bg. svg as the background image for the scene. There seems to be one error. Accept it and then let's go back. Pretty cool.

So the last thing I'm going to do is to just replace the tower with the sling image. So I'm going to go and [00:13:00] say, replace the tower's dimensions with the image sling. png

Okay. Let's see what it did.

It is kind of what I wanted.

So let's see if we can adjust the values a bit.

So I adjusted the size of the sling to just make it look a little bit better. But yeah, I think that is most of what we wanted to do here. And for the last part, we will move the whole contents a little above and then we are done.

So I'm just going to go back into a cursor, open a new one. And I'm going to say

move the ground up by 200 pixels, just so we can play around with it later and move the position of the slingshot, and the ball along with it. And I think it should take care of it on its own.

I guess I'm happy with what we have here for now. The last thing I'm going to make the, color of the, of the ground transparent. I'm gonna go, say, make the color of the ground [00:14:00] transparent.

And now we have our Angry Birds.

That marks the end of this video. Thank you for watching. I hope this showed you how to use a physics engine into your own thing. Of course it's not polished, you will require a lot more tweaking and adjusting to your use case.

But, I guess for the purpose of this video, this is all I have for today. See you in the next one