In these tutorials, we will create a Super-Mario-like jump&run using C++ and SFML. First I will show you how to install Qt-Creator and how to setup a little SFML test app.
I’ve chosen Qt-Creator since it’s the IDE that I usually use for C++, it’s free and external libraries are much easier to include than in Eclipse Indigo with CDT. I use Linux, but you only have to replace the paths to follow on Windows.
I’ll use SFML 1.6 for now, but will update the tutorials for SFML 2.0 when there is a final release. And please let me know in the comments if there is interest in Python+PySFML tutorials, too.
Let’s install Qt-Creator
Go to this site and download the version for your OS. (In my experience, the online installer saves time, but you can of course use the offline installer, too. We need Creator, but you should download the Designer and the source code too, if you want to use Qt for more than SFML)
After downloading it, you’ll have to make the file executable. You can use your filemanager for this (Dolphin, Nautilus,.. – right-click the file, pick properties, go to the permissions tab and mark “is executable”) or you use chmod u+x QtSdk-online-linux-x86_64-v1.2.1.run in terminal (you have to adjust the filename and don’t forget to go to your download folder first). Execute (file manager or type ./QtSdk-online-linux-x86_64-v1.2.1.run in terminal) the installer then. (run it, don’t kill it. 
)
Make sure that all parts you want to install are marked and let the installer do its work. You can easily change the configuration later by using the maintenance tool, though.
Next task: Installing SFML
If you’re also using Linux, you’ll find SFML 1.6 in most cases in the repositories of your Linux distribution.
If you’re using Windows, Mac or a Linux distro that doesn’t offer it in the repositories, you should visit this site and download the version for your OS.
Unpack the archive in filemanager or terminal. Switch to your Downloads directory in terminal (cd ~/Downloads) and use cd SFML-1.6 and then sudo make install.
Let’s open a SFML window to test the setup
Pick New file or project…from Qt-Creator’s File menu.
Pick the Plain C++ Project from Other Projects, click next and type C++SfmlSM in the project name field. Click next twice and then finish without making any changes.
The result should look like this. (Click to enlarge)
Open the c++SfmlSM.pro file by double-clicking it (it’s right below your project name in the projects view) and change it into this:
TEMPLATE = app CONFIG += console SOURCES += main.cpp LIBS += -L/usr/lib -lsfml-graphics -lsfml-window -lsfml-system -lsfml-audio INCLUDEPATH = usr/include
You see that we erased the subtraction of Qt. We don’t want to write a Qt program, but we want to use one of its functions, qDebug(), for our convenience.
Furthermore, we added the include path and the libraries for SFML. (Windows or Mac users will have to adjust the paths. That may be needed even on some Linux systems – when you installed SFML in your home directory, e.g.)
If you followed the manual SFML install earlier, please change the paths to -L/usr/local/lib … and usr/local/include in the .pro file above!
If you ever tried to integrate external libraries in Eclipse, you’ll love the simple approach of Qt-Creator!
Double click main.cpp and replace its content by copying the following source code into it
#include <iostream>
// Qt-Creator delays output to the console via cout till the app is finished.
// With qDebug() we get it at runtime
#include <QDebug>
#include <SFML/Graphics.hpp>
using namespace std;
// Creates the RenderWindow with a size of 800*600 and 32 bits colordepth as
// a global variable
sf::RenderWindow App(sf::VideoMode(800, 600, 32), "Jump & Run Tutorial");
// The event that we use to catch the closing of the game
sf::Event Event;
bool init() {
// return that initialization was successful
return true;
}
void update() {
// look for events
while (App.GetEvent(Event))
{
// if the user did close the window (by pressing the x button of the
// window, e.g.), close the game
if (Event.Type == sf::Event::Closed) {
App.Close();
}
}
}
void draw() {
// Clear the graphics window
App.Clear();
// Everything that needs to be drawn will be here later
// Actualize the display
App.Display();
// Look the the console window to see this output
qDebug()<<"Just to see qDebug in action.";
}
int main()
{
bool initSuccess=init();
// if an error occured during init() close the game
if (!initSuccess){
App.Close();
}
// gameloop till game is closed
while (App.IsOpened())
{
update();
draw();
}
return EXIT_SUCCESS;
}
Compile and run the program. An empty black window will pop up. You can close it by clicking the x Button in the corner of the window title bar. We will build on this in the next part. If you have trouble with the tutorial or questions, please leave a comment.
Part 02 should arrive within 3 days. Don’t forget to follow our RSS feed to miss no update (left sidebar at the top). UPDATE: Part 2 will be published on Sunday, 23th and contain creating a level and loading/displaying it with a ’tile engine’.
