Tween sprite with an arc.

[j0hnskot]

Hello!

 

Is there a way to tween a sprite to somewhere but with an arc? Like throwing a ball to the air and then falling.

Any examples are appreciated!

[playtwice]

They ways I have done this is either using multiple points or offsetting the sprite and then rotating it.

[alex_h]

I put something together for you on jsfiddle to show one way of achieving an arc using a straight tween on the x axis and Math.sin to create an arc on the y

 

http://jsfiddle.net/zHhus/

 

The relevant bit of the code is the function 'doTween'

function doTween(){    //NOTE THAT Y GOES FROM ZERO TO MATH.PI    var from = {x:10, y: 0};    var to = {x:w-10, y: Math.PI};    var tw = new TWEEN.Tween(from);    tw.to(to, 3000);    tw.onUpdate(function(){        tweenX = this.x;        //THIS IS THE IMPORTANT BIT (h is the height of the canvas)        tweenY = h - (Math.sin(this.y) * h);    });    tw.start();};

[j0hnskot]

Wow,thank you both! Really needed those tips! I'll test em out!

[eguneys]

I've made a bouncing ball example for my game, It can bounce to any direction you want, it doesn't do arcs though.

 

http://jsbin.com/rokelulo/21/edit?js,output

[j0hnskot]

I'm trying to implement what alex_h suggested but, god, math are too hard for my brain  

All i want is for a ball to reach an object with an arc, and when it's there it should start falling with an arc. Anything simpler? If not, i'll try to implement what suggested already.

[lewster32]

Here's a little cheat using just tweens which will always exactly fly through the target point specified: http://jsfiddle.net/lewster32/9UjPy/

[playtwice]

Here's a little cheat using just tweens which will always exactly fly through the target point specified: http://jsfiddle.net/lewster32/9UjPy/

That's a nice trick indead, may steal that method from you 

[lewster32]

Of course, by all means steal, adapt, reuse and enjoy! I use this method to make pieces on a board in an isometric turn-based-game 'hop' from one place to the next. It's by no means 'physically accurate' but it looks right and allows total control over the movement.

[j0hnskot]

Oh my god lewster... Thank you !!!!!!

 

Thanks everyone for those awesome tips!

[lewster32]

Just updated the routine to fix a little issue when not starting from 0. Should work regardless of the positions of the ball and the target, and even work backwards and upside down