# Better animation of elements in SFML/C++

This is not about animating individual characters or elements, I'm happy with spritesheets for that. What I'm looking for is the animation of elements on screen.

For example my game starts and the logo comes in flying from a random direction, then rotates or something and stops in one position, then a game character (one or more) comes from the side and does some action.

I haven't done many projects yet, I have written just one complete game, so I don't know whether I've correctly worded the question.

What I've been doing is giving the element an initial and final position and make it move accordingly and using status flags to check its state. The problem is when I want to move it in more than one way. Of course, I can just use the state variables and make it move, but I've been thinking there's got to be an elegant method for it

EDIT: I'm looking at animations such as in World of Goo etc.

This seems like you want to manipulate the position and rotation of objects over time. AFAIK sfml does not provide this functionality out of the box, but it should be pretty easy and straightforward to implement this on your own.

I once built a similar solution for a three dimensional simulation, but it should translate well to a 2D graphical application.

First of you have two concepts: the Manipulator and the according ManipulatorManager. Manipulator is an abstract base class for all kinds of manipulations of a specific object, for example a sprite. Manipulated can be all properties like position or rotation, move on a path or anything similar. The Manager watches the state of the Manipulators and updates them every frame.

The interface for the manipulator looks something like that:

class Manipulator {
public:
Manipulator(float expiration_time) : expiration_time(expiration_time);
bool is_expired() { return expiration_time < 0.f; }
void update(float dt) { this->expiration_time -= dt; }
protected:
float expiration_time;
}


An implementation of this class is the SimpleLineManipulator which influences the position of a sprite over a certain time on a straight line:

class SimpleLineManipulator {
SimpleLineManipulator(Sprite *spr, Vector2f begin, Vector2f end, float expiration_time);
...
private:
Sprite* sprite;
Vector2f begin, end;
float total_time; // initialized with expiration_time
}


And this is how the update method looks like (where the most of the work takes place):

void SimpleLineManipulator::update(float dt) {
Manipulator::update(dt);
Vector2f position = lerp(end, begin, total_time/expiration_time);
spr->SetPosition(position.x, position.y);
}


All you have to do now is call the update() method every frame. It should be easy to implement a rotatory manipulator or manipulators that work on a path (a list of positions). You can now also combine these manipulators to create combined effects.

I hope I could outline the architecture in a clear manner. Feel free to ask :)

• That was a pretty good explanation! Thank you. Just a quick question, should the element classes inherit from the Manipulator class? Jul 5, 2011 at 10:54

Constantinius already provides a good starting point from where you might start with actual coding, but in case you want to know about what you're doing here in general, I'd like to add a few words.

Translating objects over time from point A to point B is done by applying a function f(x) to the position of the object, where x can be anything, ranging from simply the current position of the sprite to the amount of time that elapsed between two frames, etc.

This process is usually done via the help of a sub field of numerical analysis which is called interpolation.

A common example would be linear interpolation. If you know the constant starting point A and end point B, one possible function would simply be f(t) = A + (B - A) * (t_max - t) , where

• t is the time elapsed since the object started from point A
• t_max is the time you want the object to take until it reaches its destination
• 0 <= t <= t_max .

As you see, the function is returning a vector, so you can apply it to the position of your object without problems.

This is of course only a rough introduction to maybe let you taste a little blood and wake your interest, hence I shall redirect you to Google if you want to know more about it.

• Thanks for your answer! I was thinking what lerp was in Constantinius' answer and you struck on that point exactly! Jul 5, 2011 at 10:56