C++ Tutorial #15 – Drawing Graphics on Screen Using SFML

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Today we’re going to take a break and install an API called SFML. For those of you who don’t know what an API is; an API stands for Application Programming Interface. It provides programmers with more tools for writing software. SFML stands for Simple and Fast Multimedia Library, this API is used to make it easier for people to develop games and other software. It supports Windows, Mac, and Linux operating systems. SFML also supports several programming languages such as C, C#, C++/CLI, D, OCaml, Ruby, Python, JAVA, and VB.NET. In this post, we’re going to setup CodeBlocks to write programs using SFML. Before we get started, let me point out that you shouldn’t use the SFML project type that CodeBlocks provides. It doesn’t work!

Don't Use SFML Project

 

 

Step 1

 

Run CodeBlocks and check which version you have. You should be able to see it on the startup page underneath the logo. The version that I have is the latest as of the date of this post, which is 16.01 GCC 4.9.2 – 32 bit Version.

sfml-setup-img2

 

 

Step 2

 

Navigate to the SFML download page and and click the button labeled “Latest stable version”. Next, you’ll want to pick the right setup for your compiler. Since I have CodeBlocks with MinGW GCC 4.9.2 – 32 Bit, I will download that one.

 

SFML Download Page Choose SFML Compiler Version

 

 

 

Step 3

 

Once you have the files downloaded, navigate to the directory where you have installed CodeBlocks. Create a folder called Libraries, and extract the files in the .zip folder  to the folder we just created. It should look something like this:

Hierarchy

 

 

Step 4

 

I know, this is a long step, but it’s easy:

Run CodeBlocks again. On the menu bar, navigate to Settings > Compiler…

CodeBlocks Compiler Settings

 

 

Click on the Search Directories tab. On the Compiler tab inside the Search Directories tab, add the include directory that’s located inside the SFML folder.

sfml-setup-img7

 

 

Click on the Linker tab, and add the lib directory. This is also located inside of the SFML folder.

sfml-setup-img8

 

 

Now click on the Linker Settings tab, and add the following link libraries:

  • sfml-graphics-s-d
  • sfml-window-s-d
  • sfml-network-s-d
  • sfml-audio-s-d
  • sfml-system-s-d
  • opengl32
  • freetype
  • jpeg
  • winmm
  • gdi32
  • openal32
  • flac
  • vorbisenc
  • vorbisfile
  • ogg
  • ws2_32

CodeBlocks Link Libraries

 

 

Last, go back to the Compiler Settings tab, click on the #defines tab and type “SFML_STATIC” (without quotes) in the textbox. When you’re done, click OK and you should be good to go. Now let’s write some code!

#Defines Tab

 

 

Before we begin coding, we’ll have to create a blank project with CodeBlocks.

Start Blank Project

 

 

Once you have created your project, navigate to the SFML Library folder that you just placed inside the CodeBlocks installation directory. Open the bin folder, and copy the DLL files inside of it, and paste it to the directory of your blank project you just made.

DLL File Placement

 

Go back to CodeBlocks, create a new .cpp file in your project, and name it “main.cpp”. Then we can begin coding!

 

 

 

Your program should look something like this:

Project Finished

 

Let me explain how this works:

 

This section of code is where we initialize the window and all of our shapes. Just like how we declare our variables; in SFML, we can do that with windows, images, shapes, lines, etc.

 

 

This section does what it says, it renders a window. We start out by giving our window a name: “window”. Inside of the parenthesis, we place the size and text of our window. We do that by writing out sf::VideoMode, and set the width and height inside of the parenthesis. For the text, we just place the text surrounded in quotation marks.

 

 

This section initializes our circle. we give our CircleShape the name “circle”. In parenthesis, we set the radius to 25. Then we give our circle other properties such as changing the fill color, outline color, outline thickness, and position where the circle is placed.

 

 

This section, we initialize our rectangle. We set our size of the rectangle, and just like the circle thing, we set our other properties.

 

 

This section, we initialize our polygon. This is a little bit different because we have to set how many points it has, and the position of each point. Like arrays, you start with zero and go up. Notice how we wrote the colors differently. In SFML, you can write out the RGB(Red Green Blue) colors. There is also a fourth parameter you can use for alpha, which changes the transparency. We’ll do that in another tutorial

 

 

This is our while loop, otherwise known as the game loop! All the magic happens here while the window is open. In this part of the program, we handle events and draw images on our window.

 

 

 

Events are actions that the user takes while the program is running. This can be a mouse click, a key press, a window resize, or an exit.  These events are retrieved using the pollEvent function. Inside of this loop, you can place as many events that you like. In this program, we only have one. This event closes the window when we press the exit button.

 

 

This is where we draw our images. We first start by using the clear function. This clears everything that’s drawn on the screen. Next, we have our draw function. All you need to do is place the object you want to draw in the parameters. Last, we have our display function. This displays the window on our screen.

 

Facebooktwittergoogle_plusredditpinterestlinkedinmail

About Justin

Computer programmer and owner of kauergames.com.
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.