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:

1. Calculating parabolic trajectories based on initial velocity and angle. This can be combined with the Physics behavior to move the object.

2. Calculating parabolic trajectories based on a 2D destination (X, Y). This can also be combined with the Physics behavior to move the object.

3. 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:

1. Add a Sprite object that will be our projectile. We are using an object called Bird.

   1. Add the Physics behavior to the Bird.

   2. Add the Parabolic Tween behavior to the Bird.

1. Add a Sprite object called Path. We will use it to draw a point in time where the projectile will be when launched.
2. Add a Slider and name it Initial Velocity

3. Add a Slider and name it Launch Angle

4. Add a Text object, and copy it over each of our Sliders to identify them.

5. 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

1. Configure the Bird´s Physics

   1. Disable the Bird´s physics behavior.

   2. Set the immovable flag to false.

Bird´s attributes.

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.

1. Configure the Sliders

   1. InitialVelocity:

      1. Min value: 100

      2. Max Value: 500

1. LaunchAngle:

   1. Value: 270 (start angle)

   2. Min value: 270º (upward)

   3. Max value: 360º (to the right)

Step 3: Create a function to calculate the trajectory

1. Create a function called CalculateTrajectory. It will be called each time the value of the sliders changes, to redraw the trajectory.

2. Add the Bird.Set Parabola by Velocity action to the function as follows:

   1. Use the "default" tag

   2. Set the Velocity from our slider called InitialVelocity.Value

   3. Set the Angle ity from our slider called LaunchAngle.Value

   4. Set the gravity to 10. This value must match our physics world gravity

Calling: Set Parabola By Velocity

Stablishing the world gravity to match the parabola's gravity.

1. 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.

2. 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.

1. Create a Path object within the Repeat, and add the following parameters:

   1. Layer: Use the Bird.LayerName

   2. X: Read the predicted X coordinate of the parabola calculated by calling the expression GetXAt passing the "default" tag name, and the loopindex multiplied by 0.1 seconds.

   3. Y: Read the predicted X coordinate of the parabola calculated by calling the expression GetYAt passing the "default" tag name, and the loopindex multiplied by 0.1 seconds.

CalculateTrajectory function

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:

1. Add the condition InitialVelocity.On Changing

   1. Call CalculateTrajectory for this event.

2. Add the condition LaunchAngle.On Changing

   1. Call CalculateTrajectory for this event.

On Changing even triggers for each slider.

1. 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.

   1. Enable the Bird.Physics behavior.

   2. Call the action Bird.Physics.Set Velocity to pass the parabola's calculated velocity's vector components.

      1. X component: Pass the Bird.ParabolicTween.GetVelocityX expression using the tag name "default".

      2. Y component: Pass the Bird.ParabolicTween.GetVelocityY expression using the tag name "default".

Event button 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

181KB

Tutorial Sample1.c3p