C++ Animation (SFML)

Animation is showing slightly different pictures quickly so things seem to move, like a flipbook. In SFML you change a shape's position a little each frame.

In this page:

Moving a Shape
Using Delta Time
Sprite Sheet Animation
Scale and Rotation Animation
Boundary Collision Animation

Syntax

cpp

sf::Clock clock;

while (window.isOpen()) {
  float dt = clock.restart().asSeconds();
  x += speed * dt;
  shape.setPosition(x, y);
}

Moving a Shape

The simplest form of animation is updating a shape's stored coordinates each pass through the game loop -- for example, incrementing its X position by a small amount every frame -- and then calling draw() again, which SFML renders at the shape's new location.

Example: Moving a Shape

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::CircleShape shape(20.f);
	// Declare x and set it to 0.f
	float x = 0.f;
	// Loop: repeat while the condition holds
	for (int frame = 0; frame < 5; frame++) {
		x += 2.f;
		shape.setPosition(x, 100);
	}
	// Return 0 to signal that the program finished successfully
	return 0;
}

Using Delta Time

If you move an object by a fixed number of pixels every frame, it will visibly move faster on a machine that renders more frames per second than on a slower one.

Multiplying the movement amount by delta time (the real elapsed time since the last frame) normalizes speed so the animation looks the same regardless of frame rate.

Example: Using Delta Time

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::Clock clock;
	// Declare x and set it to 0.f
	float x = 0.f;
	// Declare speed and set it to 100.f
	float speed = 100.f;
	float deltaTime = clock.restart().asSeconds();
	x += speed * deltaTime;
	// Return 0 to signal that the program finished successfully
	return 0;
}

Sprite Sheet Animation

A sprite sheet packs many animation frames into a single image file to avoid loading dozens of separate textures. sf::IntRect defines a rectangular sub-region of that sheet to display at any given moment, and cycling through a sequence of rects over time produces the animation.

Example: Sprite Sheet Animation

cpp

#include <SFML/Graphics.hpp>

int main() {
	sf::Sprite sprite;
	sf::IntRect frame1(0, 0, 32, 32);
	sf::IntRect frame2(32, 0, 32, 32);
	sprite.setTextureRect(frame1);
	sprite.setTextureRect(frame2); // next animation frame
	return 0;
}

Scale and Rotation Animation

Continuously updating a shape's rotation or scale value each frame -- rather than its position -- produces spinning or pulsing effects.

Because these are separate transform properties, you can combine rotation, scale, and position animation on the same object simultaneously.

Example: Scale and Rotation Animation

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::CircleShape shape(20.f);
	// Loop: repeat while the condition holds
	for (int frame = 0; frame < 5; frame++) {
		shape.rotate(5.f);
		shape.setScale(1.f + frame * 0.1f, 1.f + frame * 0.1f);
	}
	// Return 0 to signal that the program finished successfully
	return 0;
}

Boundary Collision Animation

To make an object bounce, check its position against the window's edges each frame; when it crosses a boundary, invert the relevant component of its velocity (X for left/right walls, Y for top/bottom) so it continues moving away from the edge instead of off-screen.

Example: Boundary Collision Animation

cpp

#include <iostream>

int main() {
	float x = 95.f, velocityX = 3.f;
	float windowWidth = 100.f;
	if (x + velocityX > windowWidth || x + velocityX < 0)
		velocityX = -velocityX; // bounce off the edge
	std::cout << "New velocity: " << velocityX << std::endl;
	return 0;
}

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson C++ Drawing Shapes (SFML) Next Lesson → C++ Mouse & Keyboard Input