j0hnskot

Tween sprite with an arc.

11 posts in this topic

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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();};

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.