Angry birds style aiming ( ballistic trajectory)


Could you please provide guidance on how to create the curved part?
I mean line not dots.

I know there is a tutorial on YouTube, I have seen and read its code.

  • I have read tutorials for other engines and mathematical contents
  • I know mathematics, physics, trigonometry

Does this engine provide a facility to do this task?


I have told you I have read that tutorial’s code.

Is it possible to draw this line by javascript? is there any help?

GDevelop’s first class game logic is via the event system, not Javascript

Javascript is available for logic, but you are generally expected to be an experienced JS dev and build out your own methodologies using the JavaScript API documentation if you are utilizing it for any game logic. There will not nornally bw any code tutorials for JS usage, no.

This needs work. It can be simplified and the end point is a bit off but it’s very close. The aiming is crude but the basics are there.

The concept is like the aiming example. It continually shoots a copy of the cannonball. When the ball starts to drop, it uses that point to draw a quadratic curve.

try me: click anywhere to shoot.

source:(click the green [code] button, [download zip] and open the JSON file with Gdevelop

If there’s an easier or better way, please , I’m all ears.

1 Like

It sounds like good. I’ll read it.

Could you provide more details about how it works?

“Here or in the game’s comments section, the code you’ve created is too large!”

The math is quite large. I copied it from a previous project.

Draw a quadratic curve and a point on the curve.

It doesn’t matter how you fire the projectile as long as the test projectile is fired in the same direction and with all the same settings. So, the test projectile follows the same path as the real projectile.

The principle is simple. I’m honestly amazed it works. It continually fires cannon balls based on the cursor. I added a timer to reduce the nedded resources. It can be set to whatever.

When a ball reaches the top of its arch the Y velocity changes from a negative to a possitive. It seems backwards but that’s because Y starts at the top. So, as it goes up, the Y value goes down. So, when the ball starts to drop on the screen, the Y is actually increasing.

So, when it starts to drop, it’s half way through it’s path. The x and y are saved and the drawline is set to true. The dropping boolean variable isn’t actually needed. It was from a previous version before I decided to just delete the test ball. I believe that can be removed.

With the center point set to control point x, y then the rest of the events calculate an adjusted control point for a quadratic curve. A quadratic curve is based on 3 points. A start, end and a control point.

Normally, the control point creates a curve that doesn’t go through the control point but the remaining functions calculate the math to draw through the point. The end point is calculated as center distance times 2.

The formula can definitely be optimized. I don’t fully understand the equation. It’s not mine. But I know how to make it work. I used extra variables because that’s how. It was written plus I was using old events with now events. It also makes it easier to write and read.

This is how it would normally draw it.

The the last 3 draw circle actions are just for testing.

I hope this helps.

I have read your codes several times but keep confusing ball and ballpath!!

The ball is the projectile and the ball path is a duplicate of it. They both have the physics and matching settings. Each have the same force applied to them in the same method and direction. You can remove the action that hides the ballpath to see that part in repeatedly shoots the object similar to the aiming demo. Shooting an object is the only way I know how to calculate the path. Otherwise, there are just too many physics parameters to take into account. It’s only purpose is to calculate the path. I also turned off the layer and mask setting in the physics to prevent them from colliding with themselves. If the boxes on the bottom are unchecked then you might need to checked them for the ball object not the path object. You don’t want that to collide with anything.

Fire a path object
When it starts to fall get the x, y, that’s the highest point and the midway point.
Use the distance between the fire point and the mid point to calculate an end point
Use the start point, a modified control point and end point to draw a quadratic curve.

1 Like

Hello SaeedP,

I was working on an extension that allows you to do this in October, but something else got in the way and I never finished it. I am still rather busy with a different project so I can’t promise but I might be able to get it done in a few days. So in case you haven’t found a solution yet and can wait, you can expect the extension to be available before the year ends.

1 Like

You can join the Gdevelop discord server to stay updated about it and more. All the very best with your project! :star2:

1 Like

If I want to be honest I didn’t understand what happened.

But these are the results of my research on this case:

Maybe it will help you in the future.

1 Like

I will look at them later. Thank you. I’ve tried the math route before. It’s complicated. There are a lot of variables to consider. A formula would definitely be better. You can also look at the source code. That might provide a better stategy.