Getting Started
Calculating and Drawing a Parabolic Trajectory Based on Initial Velocity
In this tutorial, we will walk you through the process of calculating a parabolic trajectory based on an initial velocity and launch angle, and drawing this trajectory before the object is launched. We'll use Construct 3 and the ParabolicTween plugin by Pixel Perfect Studio.
By the end of this tutorial, you'll have a system that calculates the trajectory of an object (like a bird or projectile) based on user input, and visualizes the path before the object is actually launched.
The ParabolicTween plugin is capable of the following:
Calculating parabolic trajectories based on initial velocity and angle. This can be combined with the Physics behavior to move the object.
Calculating parabolic trajectories based on a 2D destination (X, Y). This can also be combined with the Physics behavior to move the object.
Moving an object along a parabolic trajectory within a specific period of time by tweening the object. The movement is kinematic, meaning any physics interactions are ignored.
For more details, refer to the ACE documentation.
Prerequisites:
ParabolicTween Plugin: A plugin by Pixel Perfect Studio that allows you to simulate parabolic motion with customizable gravity and velocity.
Step 1:​ Layout Set Up
Add the following objects to your layout:

Add a Sprite object that will be our projectile. We are using an object called Bird.
Add the
Physics
behavior to the Bird.Add the
Parabolic Tween
behavior to the Bird.

Add a Sprite object called Path. We will use it to draw a point in time where the projectile will be when launched.
Add a Slider and name it Initial Velocity
Add a Slider and name it Launch Angle
Add a
Text
object, and copy it over each of our Sliders to identify them.Add a
Button
and name it Throw. When pressing it, the Bird will be thrown at the velocity and angle set in the scrollbars.

Your scene object list should look like this:

Step 2: Configure slider's value, and the Bird physics behavior
Configure the Bird´s Physics
Disable the Bird´s physics behavior.
Set the immovable flag to false.

The angle of gravity can be changed for the calculated parabola. Nevertheless, when using physics the angle must always be 90º, which points downwards in the canvas. For simulated trajectories or tweening, you can change the gravity angle to fit your needs.
Configure the Sliders
InitialVelocity:
Min value: 100
Max Value: 500

LaunchAngle:
Value: 270 (start angle)
Min value: 270º (upward)
Max value: 360º (to the right)

Step 3: Create a function to calculate the trajectory
Create a function called
CalculateTrajectory
. It will be called each time the value of the sliders changes, to redraw the trajectory.Add the
Bird.Set Parabola by Velocity
action to the function as follows:Use the "default" tag
Set the Velocity from our slider called
InitialVelocity.Value
Set the Angle ity from our slider called
LaunchAngle.Value
Set the gravity to 10. This value must match our physics world gravity


Call
Path.destroy
to clean up our layout from path objects. This approach is only for educational purposes. It's recommended to implement optimized algoritms to maintain a good performance.Add a Repeat action from the system plugin. We will create 20 points in the path, each at 0.1 seconds of the predicted trajectory.

Create a Path object within the Repeat, and add the following parameters:
Layer: Use the
Bird.LayerName
X: Read the predicted X coordinate of the parabola calculated by calling the expression
GetXAt
passing the "default" tag name, and theloopindex
multiplied by 0.1 seconds.Y: Read the predicted X coordinate of the parabola calculated by calling the expression
GetYAt
passing the "default" tag name, and theloopindex
multiplied by 0.1 seconds.


Step 4: Add the Interaction with the UI
Each time our slider's value changes, the function CalculateTrajectory should be called, triggering the path redraw with the new values set for angle and velocity.
Add the following code:
Add the condition
InitialVelocity.On Changing
Call
CalculateTrajectory
for this event.
Add the condition
LaunchAngle.On Changing
Call
CalculateTrajectory
for this event.

Add the button
Throw.On Click
condition to throw the bird. We will apply the calculated velocity to the physics behavior of the bird, to throw it following the calculated trajectory.Enable the
Bird.Physics
behavior.Call the action
Bird.Physics.Set
Velocity to pass the parabola's calculated velocity's vector components.X component: Pass the
Bird.ParabolicTween.GetVelocityX
expression using the tag name "default".Y component: Pass the
Bird.ParabolicTween.GetVelocityY
expression using the tag name "default".


Throw.On Click
calls the Physics.Set Velocity
Step 5: Test your game
Run the game, and play with the sliders. You should be able to change the initial velocity and angle and see the predicted trajectory path. And when pressing Throw, the Bird will move at the indicated velocity along the calculated trajectory.

Source Code
Last updated
Was this helpful?