Boomerang effect

[Bavragor]

Hi,

I'm trying to replicate some sort of boomerang effect on an moving object. In short I'm shooting away a sprite but instead of shooting the sprite away in a straight line, I'd like it to move in an 'arc'.

Regrettably I have no idea how to achieve this sort of movement.

If someone could explain me the theory around such movements, that would be awesome. If you could include a code example, you'd be my hero (of the day).

P.S. I'm using P2 physics.

Thanks in advance.

[megmut]

When you say boomerang or arc, do you want the shooting sprite to drop, or actually loop back on yourself? 

[Bavragor]

For example the image below. The "full" circle is supposed to be shot at the "semi-full" circle in an arc. The bent line in this case showing the arc it should make. So the looping back on yourself isn't really necessary, gravity ain't necessary either.

[megmut]

Okay, then you want a a circular tween. Theres a very good resource here for tween example: http://gamemechanicexplorer.com/#easing-8

There is also an example of the tween in native JS, incase you want to write a custom function: http://jsfiddle.net/zHhus/

Just for good measure, I went and created an example in the sandbox for you  Here's the link! I hope this is what you were looking for! : http://phaser.io/sandbox/eAldhytV

[Bavragor]

Is it better to use tweens than actual physics? Because so far I was using the P2 physics and changing the velocities, etc etc.

Guess you can't do any colliding/bouncing etc with tweens?

[megmut]

There is a bounce tween, but bouncing on collision is for physics only. In my experience, the less you use physics, the better your performance is. You can, however, combine the two.. so if you tween the sprite.body.x, instead of sprite.x, then you will move the physical body that Phaser sees and detects collisions on. 

Alternatively, you could write a custom function that increases and decreases the sprites velocity x and y accordingly to form an arc.. but they just feels like over-engineering. Let me know how you get on tweening the sprite.body and if it still isn't the effect you desire, I'll see if I can take a crack at writing a function for it

[Bavragor]

I might try replacing the physics I'm using with tweens. Should see how that works out.

And it the meantime try to implement the example you've given me.

Thanks!

[Llorx]

If you are using p2, is that you want physics. I would use forces. When you throw the boomerang, in each update you add a continuous force in one direction (instead of setting velocities directly). Is like doing sprite.velocity.x += X each frame but instead you can use a vector for it and let the engine do the calculations. See http://phaser.io/docs/2.4.3/Phaser.Physics.P2.Body.html#applyForce

The force will be applied perpendicular to the moving direction, this way:

And the 'perfect' way to do it would be setting the perpendicular force left or right depending on the way that the boomerang is thrown (rotating clockwise or counterclockwise) and also the force will be higher or not depending on the speed that is rotating (the faster it rotates, the more perpendicular effect it has).

And, for 'ultra' perfect reality, the boomerang loses angular speed because of friction and such, so each update the perpendicular force will be lesser as the boomerang is rotating at less speed. Also note that a real boomerang perpendicular force is not only based on the rotating speed, but also the moving speed, as a still boomerang rotating at full speed does not move in any direction. But I think that for a game this is overworking (If you are not working on a simulator, as nowadays there are simulators for everything xD)

PD: Sorry if my Photoshop skills astonish you xD

[BliantFive]

Check this out: http://gamemechanicexplorer.com/#homingmissiles-1

Found it by accident and it helped me a lot learning how to do circular movement of any kind.

 

[Bavragor]

Thanks to the both of you, Llorx and BliantFive. I'll idd start using gravity/force instead of trying to arc the ball's movement manually!

[jjwallace]

Why not just use trig and have a rotationSpeed variable and a rotationAcceleration variable? with rotationDegrade = true / false?

rotationSteps = 0.1;
if(boomarang[i].rotationDegrade == false){
    boomarang[i].rotationAcc = rotationSteps;
    if(boomarang[i].rotationAcc > maxRotationAcc){
        boomarang[i].rotationDegrade = true;
    }
}else{
    if(boomarang[i].rotationAcc >0){
        boomarang[i].rotationAcc = -rotationSteps;
        }
}
boomarang[i].rotationSpeed += boomarang[i].rotationAcc;
boomarang[i].x += (Math.cos((Math.PI*(boomarang[i].angle-90))/180) * boomarang[i].varSpeed);
boomarang[i].y += (Math.sin((Math.PI*(boomarang[i].angle-90))/180) * boomarang[i].varSpeed);