Hello Guest, please login or register.
Did you miss your activation email?
Login with username, password and session length.

Pages: [1]   Go Down

Author Topic: SFML-Tutorial 1  (Read 2813 times)

0 Members and 1 Guest are viewing this topic.

Antidote

>.>
SFML-Tutorial 1
« on: May 03, 2012, 04:26:43 pm »
  • In all seriousness who's serious?
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 1485
In this tutorial we will setup a Code::Blocks project that utilizes SFML. Now if you're adventurous you can use SFML 2.0-RC However for the sake of this tutorial series we will use 1.6.

First download SFML from the downloads page here: http://sfml-dev.org/download.php, or if you're on linux get it from your package manager or the usual suspects.

Once you have SFML downloaded and extracted to a sensible location I.E. C:\Libraries we can proceed to create our project

Step 1 - Create Code::Blocks Project:
On the Code::Blocks welcome screen click on "Create a new project" and Choose Empty Project. On windows once you've created the project we need to add our "Paths" to the project if you're on linux you can skip this step as it should the headers and libraries should automatically be available.

Now i know what some of you may be thinking "Why can't i just add it to the include/lib directory of Mingw and skip this", you certainly can, however it's not recommended as it causes bloat an just makes a mess out of the already cumbersome include/lib paths. Why sift through >1000 headers when you can just look through a few dozen?

Step 2 - Add Paths and Libraries:
First we need to add our include and linker paths, to do this simply right click on the project root and select "Build Options". You should get this dialog:

First select the the root entry (it has the name of your project), now click on the "Search directories" tab.
Since Code::Blocks defaults to the "Compiler" tab we can go ahead and add our headers.

So click add and browse to SFML's include directory, also for the sake of readability, as tempting as it may be DO NOT add include/SFML to the path, we want this code to compile seamlessly on all OSes so keeping that in mind you should something like the following:


Now do the same for the library paths by clicking on the "Linker" tab under the "Search Directories" tab.

Now we need to add the libraries to each "Build" setting. First select the either "Release" or "Debug" then click on the "Linker Settings" tab for debug we need to add sfml-graphics-d, sfml-window-d, and sfml-system-d in that order for "Release" you can just remove "-d" from the lib. It should look like this:

Step 3 - The code:

Now we get to the fun part, making our computer do our bidding, in the words of Darth Vader: "What is your bidding my master"

Anywho, in order to get a window we need to do a few simple yet important steps:

first we need to create a main.cpp file with the following code:
Code: [Select]
// First we need to include the SFML Graphics Header, this defines sf:RenderWindow which we need to display our program
#include <SFML/Graphics.hpp>

using namespace sf; // Optional, and I don't recommend it as it cuts down on readibility and can also cause other weird definition errors.

// Our main function
int main()
{
    RenderWindow window(VideoMode(640, 480, 32), "SFML - Tutorial 1 Empty Window"); // This line tells SFML to create a window that is 640x480 and 32 Bits Per Pixel
    // Note however this does not actually display the window. you have to use a loop checking window.IsOpened() every frame.

    while(window.IsOpened())
    {
        // now that the window is "opened" we need to Poll for Events, this is done using window.GetEvent(Event) on SFML < 2.0 and window.PollEvent(Event) SFML >= 2.0
        Event e;

        // Use a loop to get all events. Here you can detect key presses, handle resizing events, minimize events etc.
        while (window.GetEvent(e))
        {
            if (e.Type == Event::Closed)
                window.Close(); // This checks if Alt+F4 or the "X" button is pressed, if so it closes the window ending our session
        }

        window.Clear(Color::Black); // This clears the screen every frame allowing us to render graphics without a "Hall Of Mirrors" effect
        window.Display(); // this is what actually displays the window including all the graphics we rendered to the buffer. SFML automatically flips the buffer so you don't have to.
    }

    return 0; // The application completed successfully
}

Now I know i just posted a wall of code, however it's actually quite simple. All it does is creates an instance of sf::RenderWindow, polls for events, clears the window, and displays everything rendered

I will go ever each important line so bear with me.

Code: [Select]
#include <SFML/Graphics.hpp>
This header file includes everything pertaining to the Graphics API provided by SFML, it similarly has a header file for, Networking, and Audio, there is also a Window header but it's pretty redundant if you're going to be using the API provided by SFML.

The header defines stuff like sf::RenderWindow, which as you can guess, is what creates our window that we render to.

Code: [Select]
using namespace sf;

This line is actually frowned upon by a lot of hardcore programmers, for many reasons, most good.
For one thing it cuts down on readability, for another it can cause a HUGE headache when using two different APIs with similar function names and classes. I personally don't recommend using it, it's mostly just for (in)convenience.

Code: [Select]
RenderWindow window(VideoMode(640, 480, 32), "SFML - Tutorial 1 Empty Window");
this creates a Render Window instance that we can use to draw our graphics on and get our loop started. It seamlessly creates the window using the proper resources for each OS, X11 on linux, Cocoa on OS-X, Win32 on Windows.

In this case, it tries to make a window that is 640 pixels wide and 480 pixels tall by 32 bits per pixel. 32bpp gives us a crisp image, but on older machines 16 is a more stable choice. If you need to use 8bpp your drivers probably need to be reinstalled or your GFX Card upgraded.

Please note that SFML Requires a Pixel Shader of at least 1.0 for PostFX to work if you're so inclined, but that's for another day.

Code: [Select]
while(window.IsOpened())

Now this is where we actually get to the guts of our program. This creates our main loop so we can do things like, update physics, poll events, etc.

All it does is check if the window is opened, if not it simple ends the loop. This is a great way to end the game without having to use a global isRunning variable since you can just simply check if the window has been closed.

Code: [Select]
        Event e;

        // Use a loop to get all events. Here you can detect key presses, handle resizing events, minimize events etc.
        while (window.GetEvent(e))
        {
            if (e.Type == Event::Closed)
                window.Close(); // This checks if Alt+F4 or the "X" button is pressed, if so it closes the window ending our session
        }

Up until now i've been only going over one line at a time. However it's ridiculous to do that for this. As it's all interconnected.

First you define an sf::Event variable, and using a second loop you go through each event in the stack. This allows you do do things like: Check for keypresses, see if the window needs to be closed, handle resize events, and a whole host of other things, for a full documentation of sf::Event please refer to the following: http://sfml-dev.org/tutorials/1.6/window-events.php

what this particular loop does is check if Alt+F4 or the close button has been pressed, if it evaluates as true it closes the window and kills the main loop.

It's a simple yet effective way to get things done. However it does not support realtime key checks since it's all done in one shot. I'll go over how to make an input manager at a later date.

Code: [Select]
window.Clear(Color::Black);
This line clears the backbuffer and prepares it for the next scene, in this case clearing it to black. If you don't do this one of two things will happen: A) the program will simply crash (not likely) or B) You get whats known as a "Hall Of Mirrors" effect which is simply new data being superimposed on old data. It looks absolutely fugly so try to avoid it.

between this line and the next is where you want to do all of your drawing code. Before this line is where you want to do all of your updates. In order to keep slowdowns to a minimum try to avoid having updates and drawing code in the same function. it results in jittery and sometimes no-responsive behavior. It also makes slow downs difficult to debug.

Code: [Select]
window.Display();
Now this function is what actually displays our buffer. It simply flips the backbuffer to the front and vice versa. Then it displays the window if it's not already drawing the buffer to the screen.

Now we can compile our code, if all goes well you should see this:

Congrats!
You just created your first SFML application, pretty painless eh?

EDIT: Herp derped and forgot about linker settings, fixed that
« Last Edit: May 03, 2012, 07:07:26 pm by Antidote »
Logged
  • Axiomatic Data Laboratories

thestig

Re: SFML-Tutorial 1
« Reply #1 on: May 03, 2012, 06:47:31 pm »
Just curious about the IDE, are you only going to cover how to get setup in Code::Blocks? And it would be a good idea to perhaps do a small section dedicated to Source Control Management.. svn or git?  Good !@#$% so far, can't wait to see more. :)
Logged

Antidote

>.>
Re: SFML-Tutorial 1
« Reply #2 on: May 03, 2012, 06:58:27 pm »
  • In all seriousness who's serious?
  • *
  • Reputation: +0/-0
  • Offline Offline
  • Gender: Male
  • Posts: 1485
I'll probably add a VS2008 tutorial, but I won't touch VS2010 as it's pretty unstable on my computers.
And svn is pretty simple to understand, I might do a small mini tut on it and combine it with another one
Logged
  • Axiomatic Data Laboratories
Pages: [1]   Go Up

 


Contact Us | Legal | Advertise Here
2013 © ZFGC, All Rights Reserved



Page created in 0.07 seconds with 43 queries.

anything