NullHypothesis NullHypothesis - 10 days ago 5
Swift Question

Curve Animation in Swift and UIKit - Parabolic Movement from starting/endingpoint

I'm still a beginner to UIKit but i'm working on something and I created a dynamic framework to spawn monsters and have them go along pre-determined waypoints from a config file.

So for a given monster, I started setting simple waypoints like go across the screen, or go along a particular path based on (x,y) coordinates. Each path has a series of waypoints, and the monster follows it, then reverses.

This works great, but now I want to have the monsters jump up along an arc (so something quadratic/parabolic). So I thought to myself this is fairly easy, simply create the waypoints to represent an arc, and i'll achieve this.
Right now i'm simply doing

SKAction.MoveBy(x,y, duration)


Well it worked, but the animation isn't smooth because I just guessed at the waypoints, instead of using an actual mathematical parabolic function. So I did things like:

(5, 10),
(5, 10),
(10, 10),
(15, 10),
.. and then on the way down
(-15, -10)
..
etc


So I think I either need to do 2 things, which i'm unsure about:


  1. Find something (website / tool / math function?) that can generate the smoother, proper set of (x,y) coordinates for arcs quickly for me so I can then input them into my config file and achieve a smooth monster jump along an arc. I don't remember this sort of math from school it's just been too long =/ .

  2. Use some sort of function built into Swift that can do this for me automatically (I did some research but most of it was either old Objective-C stuff, or looked insanely complicated).



Could someone point me in the right direction?

Thanks!

Answer

I don't know much about scene kit, but if you have a way to make your sprite travel across a Bezier path then a quadratic (not cubic) Bezier path is exactly what you need. A parabola is a quadratic curve, so it should be easy to model with a Quadratic bezier (2 end points plus a single control point.)

Creating a quadratic bezier curve is trivially easy. you specify a start and end point and a control point, and the curve follows the V defined by those 3 points.

Comments