Question

I’m making a 2D grid based game in Qt.

When clicking on a square in a grid the player moves to that square following a path calculated with an A* algoritm. However I would like to be able to animate this. So instead of immediately going to the goal the player has to go from square (node) to square until it reaches the goal at a speed that the user can set.

Question: What is the easiest way to achieve this?

Answer 1

Personally, I’d design this similar to the following:

class Player : public QObject {
    ...
    QPoint pos;
    QList<QPoint> path;
    QPropertyAnimation posAnimation;
};

Define pos as a Q_PROPERTY. This enables you to use QPropertyAnimation to define an animation on this value for animating the movement between two adjacent points. After the animation is done, take() one point from the path and reconfigure the animation, giving you an animation along the whole path.

Use a slot animationFinished() in the Player class to provide the next point to the animation.

To start such an animation, fill the path with the values (in a function move(QList<QPoint> path) or similar), set the values of the animation and start it.

These code snippets should help you:

// in constructor:
posAnimation.setPropertyName("pos");
posAnimation.setTargetObject(this);
connect(&posAnimation, SIGNAL(finished()), SLOT(animationFinished()));

// in the slot:
if(!path.empty()) {
    posAnimation.setStartValue(pos());
    posAnimation.setEndValue(path.takeFirst());
    posAnimation.start();
}

To define pos as a property, you have to define two slots: A reading and a writing function, also known as a getter and a setter:

class Player : public QObject {
    Q_OBJECT
    Q_PROPERTY(QPoint pos READ pos WRITE setPos) // define meta-property "pos"
    ...
public slots:
    QPoint pos() const; // getter
    void setPos(QPoint p); // setter
private:
    QPoint m_pos; // private member
};

QPoint Player::pos() const {
    return m_pos;
}
void Player::setPos(QPoint pos) {
    m_pos = pos;
}

The Q_PROPERTY line just declares a meta-property. This has nothing to do with C++, but Qt’s meta object compiler parses this line and adds an entry to the internal property list. Then, you can say player->property("pos") to access the position instead of player->pos(). You may wonder why this is useful. It’s useful whenever you only want to pass around a property name as a string, like to tell the QPropertyAnimation which property to animate. Another scenario is when using scripting like QML. Then you define properties all over your classes. You can read more about meta-properties in the Qt documentation: The Property System.