C++ SFML Introduction

Creating an SFML Window

SFML (Simple and Fast Multimedia Library) provides windowing, graphics, audio, and input handling behind a clean C++ API.

Creating a window is as simple as constructing an sf::RenderWindow with a size and title; on Ubuntu you'd link it after installing libsfml-dev, and on Windows you'd link against the prebuilt static libraries.

Example: Creating an SFML Window

#include <SFML/Graphics.hpp>

int main() {
	sf::RenderWindow window(sf::VideoMode(800, 600), "My SFML Window");
	while (window.isOpen()) {
		window.clear();
		window.display();
		break; // demo: exit after one frame
	}
	return 0;
}

The Event Loop

An event loop repeatedly calls pollEvent() to drain the queue of things that happened since the last check -- the window being closed, a key pressed, the mouse moved -- so your program can react to each one.

Without this loop, a window would open but never respond to being closed or clicked.

Example: The Event Loop

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::RenderWindow window(sf::VideoMode(800, 600), "Events");
	sf::Event event;
	// Repeat while window.isOpen() is true
	while (window.isOpen()) {
		// Repeat while window.pollEvent(event) is true
		while (window.pollEvent(event)) {
			if (event.type == sf::Event::Closed)
				window.close();
		}
	}
	// Return 0 to signal that the program finished successfully
	return 0;
}

SFML Coordinates

Like most 2D graphics libraries, SFML places the coordinate origin (0, 0) at the window's top-left corner.

The window's overall pixel dimensions are set through the VideoMode object passed to the RenderWindow constructor, which also defines the outer bounds of that coordinate space.

Example: SFML Coordinates

#include <SFML/Graphics.hpp>

int main() {
	sf::VideoMode mode(800, 600); // origin (0,0) is top-left
	sf::RenderWindow window(mode, "Coordinates");
	return 0;
}

Controlling Frame Rate

Without any limiting, a render loop will run as fast as the CPU allows, needlessly burning power. setFramerateLimit() caps how many frames SFML renders per second, while sf::Clock lets you measure the actual elapsed time between frames yourself for finer control, such as computing delta time.

Example: Controlling Frame Rate

#include <SFML/Graphics.hpp>

int main() {
	sf::RenderWindow window(sf::VideoMode(800, 600), "FPS");
	window.setFramerateLimit(60);

	sf::Clock clock;
	sf::Time elapsed = clock.restart();
	return 0;
}

Texturing and Sprites Intro

A sprite is how SFML displays an image on screen -- you first load image data from disk into an sf::Texture, then attach that texture to an sf::Sprite object, which can be positioned, rotated, and scaled independently of the underlying image data it references.

Example: Texturing and Sprites Intro

#include <SFML/Graphics.hpp>

int main() {
	sf::Texture texture;
	texture.loadFromFile("player.png");
	sf::Sprite sprite;
	sprite.setTexture(texture);
	sprite.setPosition(100, 100);
	return 0;
}