GDevelop Physics Launch Tutorial – Part 3

In this tutorial series, we are creating a physics-based game similar to that of Angry Birds using the GDevelop game engine. In part 2 we got working slingshot mechanics setup and in this part, we’re going to be making it easier to aim and add some additional adjustments to make the slingshot system more enjoyable.

If you want to jump on to the tutorial from this part, you can find the finished result from part 2 right here: Part 2 Result.

Better aiming

One of the most difficult parts with the project currently is that it’s very hard to see where the ball is going to go before release. Let’s solve this issue by adding a line that shows the direction the ball will launch from the slingshot.

First, make a new object, but instead of selecting “Sprite”, instead select “Shape Painter”. A “Shape Painter” will allow us to dynamically draw graphics to the screen, and we’ll be using this to draw the line from the slingshot in the direction the ball is going to go.

Select “Shape Painter” and then name the object “Arc_Draw”. Set the outline color to a nice grey color (I’m using 156;156;156) and set the opacity to 128 and the outline size to 8. Finally, set the “Fill opacity” to 0, as we are just wanting a line and do not need it filled with any color. When all set up, it should look something like this:

Hit “Apply” and then drag the “Arc_Draw” object into the scene and position it near the middle of the curves of the slingshot. The position of the Arc_Draw object will be where our line starts.

Next, select the “Game_Scene (Events)” tab and add a new event. Click “add condition” and then search for “Scene variable” and select “Boolean value of a scene variable”. In the properties, select “Is_Touch_Down” and for “Check if the value is” set it to “TRUE” and then hit OK.

In this condition, then add an action and select the “Arc_Draw” object. Then search for visibility and select “Show”. This is so whenever a drag is detected, it will show the Arc_Draw object, which is what we want so the line will be visible.

Next, copy the event with all of the “Change the scene variable Touch_Delta_X set to MouseX ..” and all that and paste it as a sub event under the one we just added that changes the visibility of the line. When done, it should look like this:

This is so we have the current angle values, which we’ll need for our line.

Next, make another new event and set it as as sub event of “The boolean value of scene variable Is_Touch_Down is true”. Then, add an action by pressing “Add Action” and select the “Arc_Draw” object.

Now, we could use a straight line here, and that would be perfectly valid, but because of how the ball falls a little over time, let’s add a slightly curved line. GDevelop has a handy function for this in ShapePainter objects called “Bezier Curve”. Search for “Bezier Curve” and select it.

This is going to present a bunch of properties. Let’s go through each one at a time:

  • For “X position of start point”, set the value to “Arc_Draw.Width()/2.0”. This is so the starting position is right in the center of the Arc_Draw object on the X axis, rather than starting at the top left corner.
    • We can’t use CenterX() here because the “Bezier Curve” function takes positions relative to the position of the object. Instead, we just need to add half the width, which should offset it by something like 16 pixels if your Arc_Draw object is 32 pixels wide.
  • For “Y position of start point”, set the value to “Arc_Draw.Height()/2.0”. This is so the starting position is right in the center of the Arc_Draw object on the Y axis.
  • For “First Control Point X” set the value to 0, and for “First Control Point Y” set the value to -32.
    • The control points on a bezier curve define how the arc between the two points defined is drawn. The angle of the first point to the first control point defines the shape. For our purposes, we just want a small curve, so we’ll have the first control point going straight up above the first point.
  • For “Second Control point x” set the value to “-XFromAngleAndDistance(Variable(Touch_End_Angle), 200)” This works just like when we set the velocity: It gets the X position from an angle at the distance given. Because this is the exact same code that we are using for the velocity, we know it is going to point in the same direction as the launch for the ball.
    • We are only setting it to 200 here though instead of 1000 because we only want to draw the line 200 pixels far. If we set it to 1000, it would go much to far and the curve wouldn’t be correctly reflecting the direction the ball will travel (and it would be off screen!)
  • For “Second Control point Y” set the value to “-YFromAngleAndDistance(Variable(Touch_End_Angle), 200) -2”. This works just like before, though we’re adding a 2 pixel offset on the Y axis. This adds just a little bit of height to the control point, which makes it curve downwards slightly as it reaches the end position.
  • For “Destination Point X” set the value to “-XFromAngleAndDistance(Variable(Touch_End_Angle), 200)” and for “Destination Point Y” set the value to “-YFromAngleAndDistance(Variable(Touch_End_Angle), 200)”. This just sets the position to the direction from the angle at a distance of 200 pixels.

Here’s how it looks when all inputted into the properties:

Once done, go ahead and hit “OK”. Now, we only have one last little thing to do before we can try it out!

Add a new event and press “Add condition”. Search for “Scene variable” and select “Boolean value of a scene variable”. In the properties, set the value to “Is_Touch_Down” and in “Check if the value is” set it to “FALSE”. Then press “Add action” and select “Arc_Draw”. Finally, search for “Visible” and select “Hide”. This will hide the line when we’re no longer dragging the mouse, which is what we want since we’re no longer aiming the slingshot.

Here’s how everything in the events should look like currently:

With that done, go ahead and give it a try! You should now find that when you click and drag, a line will appear from the slingshot that shows the direction the ball will be heading towards!

Some additional tweaks

The game is coming along nicely, but there is still a few tweaks we can make to the slingshot to really make it shine.

The first of these is adding a ball when we are dragging the mouse, so it looks like we’re about to launch something rather than a ball just appearing out of thin air. First, create a new object, select “Sprite”, and name it “Player_Alien_Placeholder”. Add an animation and assign it to “Assets/Aliens/alienGreen_round.png”.

Now, before hitting “Apply”, let’s go to the effects tab on the top of the window, right next to behaviors. Effects give various post-processing steps to the object and can change the look of the object. Hit “Add an effect” on the bottom right. This will add a new effect to the stack. Leave the effect name as “Effect” but set the type to “Black and White”. This will make our object colorless, which is what we’re looking for. Here’s how it looks when all setup:

Once the effect is added, then hit “Apply”. Next, drag the placeholder into the scene and position it right on top of the slingshot, right in the curves so it looks like it’s being held by the slingshot.

Now we need to go to the events so we can make it appear and disappear when the player is dragging the mouse.

In the “The boolean value of scene variable Is_Touch_Down is true” event, add a new action right under “Show Arc_Draw”. Select “Player_Alien_Placeholder” and then search “visibility” and select “Show”. This is so when the player is dragging the mouse, the placeholder will be visible on the slingshot.

Then in the “The boolean value of scene variable Is_Touch_Down is false” event, add a new action right under “Hide Arc_Draw”. Select “Player_Alien_Placeholder” and then search “visibility” and select “Hide”. This is so when the player is not dragging the mouse, the place holder will not be visible on the slingshot.

Go ahead and give the game a test! Now when you are dragging the mouse, there should be a colorless alien ball on the slingshot and when you release, it disappears and a colored alien ball will launch from the slingshot instead.

Awesome! Before we finish this part, let’s adjust one last thing. Now that we have a nice line to show the arc that the alien ball will travel, we don’t really need to see Touch_Start_Pos anymore. In the “At the beginning of scene” event, add an action right under “Hide Slingshot_Respawn_Point”. Select “Touch_Start_Pos” and then search “visibility” and then select “Hide”. With this done, now the object will not be visible and instead we can just use the nice curved arc to aim.

Here’s how the entire game events looks like currently:

With all these changes made, we’re getting closer and closer to having a nice, polished game. Now the game should play something like this:

In the next part, we’ll add something to shoot at and finish up the tutorial series! You can find part 4 right here: Part 4.

You can downloaded the finished project for part 3 here: Part 3 finished.