Game Dev Journey - Angry Birds Slingshot

Game Dev Journey

Create a new scene with Node2D as root

Rename it to Slingshot

Add a Sprite2D using slingshot image as texture

For the elastic bands

Add a Line2D

Rename it to LeftLine

Add 2 points

Place 1st point on right stick

2nd point stretched backwards

Duplicate the left Line node

Rename it to RightLine

Stretch the point from the left stick

To the LeftLine point

Add an Area2D rename to TouchArea

Add a CollisionShape2D

Add a CircleShape2D

Expand to represent touch area

Add a Marker2D rename to SlingshotCenter

Position it at the center of the slingshot

Add a new script to the Slingshot node

We will connect the input event signal from the touch area

To the input_event function

So that this function runs whenever it detects input

The pattern for connecting signals via code instead of using the Inspector is:

node.name_of_signal.connect(name_of_function)

Why connect this way instead of graphically via the Inspector?
When you connect a signal via the Inspector, that connection is hidden inside the .tscn (scene) file. If another programmer (or you, six months later) opens the script and sees func _on_touch_area_input_event(), they have to guess what triggers it. They are forced to click through the Scene Tree, check the Node tab, and hunt for the little green connection icon.

When you connect signals in _ready(), the script becomes self-documenting. Anyone reading the code can see exactly what nodes are sending signals and where they are going without ever leaving the script editor.

Set up the potential states that the slingshot can be in

Add a variable to set the default state

Add ready variables for node references

Create the function the signal connects to

Put the slingshot into the PULLING state

Set up the process function to match

The state of the slingshot

For now we will deal with the pulling state

When the slingshot is in the PULLING state, the game does three things every single frame:

Listens for the drag: It checks to ensure the player is still actively holding down the left mouse button (Input.is_action_pressed).
Tracks the cursor: It finds the exact 2D coordinates of the mouse cursor on the screen (get_global_mouse_position()).
Stretches the bands: It takes the end-points (points[0]) of the two rubber band graphics (left_line and right_line) and dynamically snaps them to wherever the mouse cursor is.

This is the visual trick that makes it look like the player is grabbing and stretching the elastic bands of the slingshot back with their mouse.

Because this is happening inside _process (which runs 60 times a second), the rubber bands will smoothly follow the player's cursor in real-time until they let go!

Add a Camera2D node to the scene so that you can test it.

We now need to limit how far the elastic band can be stretched

Add an export var so we can test the

max pull distance via the inspector

Update the pulling state:

Locate mouse and center of slingshot

Calculate distance between mouse and center.

We don't want the player to stretch the slingshot across the entire screen If they pull further than our max_pull_distance, we use a neat math trick to stop it.

We use a Godot command called .normalized(). This gives us the pure direction the mouse is pointing, completely ignoring the distance.
We then multiply that direction by our maximum distance. This forces the rubber band to stop stretching, snapping it to the edge of an invisible circle around the slingshot, just like a dog reaching the end of a leash.

Finally, we attach the ends of our left and right rubber band graphics (Line2D) to this calculated position so the player sees the slingshot stretch.

Page updated

Google Sites

Report abuse