This tutorial will guide you in creating a basic Flappy Bird game. We'll walk you through the entire process using the provided template. The focus will be on learning and implementing new concepts. Therefore, we'll leave the parts that require writing some logic code up to you.
An example solution will be released so that you can compare it to yours. We've also included a file with some potential features that you can add. Remember that you can press F1 to open the help menu, or you can right-click a symbol and press "lookup signal" if you don't know what something does.
If you look at the left side of the screen you'll notice we only have an `Area2D`, a `Sprite2D` and an `AnimationPlayer` node. As you can guess the latter will provide us with an animation. The player still misses a hitbox, let's add it by adding a `CollisionShape2D` node. Right click `Area2D` -> Add Child Node -> Select `CollisionShape2D`. The next step is making sure the hitbox resembles the bird. We can specify the hitbox by clicking on `CollisionShape2D` and opening the `Inspector` tab on the right hand side. There we can select the shape and specify the dimensions. At the top of your screen,press on `2D` so that we can see the hixbox. Now select a `CapsuleShape` as shape and change the `Radius` and `height` accordingly. If you can't see the `Radius` and `Height` options press on the little circle next to `CapsuleShape`.
Add a `Sprite2D` to the `RigidBody2D`. In the `Inspector` tab you'll see an empty texture field. Give it a texture by pressing on empty -> select Load -> select sprites.png inside the directory res.
Sprites.png contains every sprite you might want to use however we only need the upper pipe.
Inside `region`, click on `Enabled` and click on the button `Edit Region`. You can now select the pipe.
Finish it all off by giving it a `CollisionShape2D` and matching the collision hitbox with the texture.
Repeat it all for the lower pipe.
The last step is moving the pipes so a gap is created between them. You should end up with something like this.
We want to dynamically load in towers so unfortunately we can't use the same method we used for the player. Head over to the code and follow the instructions, look for TODO 2 comments.
Let's create another scene, Select 2D and name it UI. We need to change the standard `Node2d` to `CanvasLayer` by right clicking the node -> change type -> select `CanvasLayer`.
We'll leave it to you to implement the required functions and variables to keep track of the score. We're going to use a signal in the next part to connect you function with the right event.