Now that we have a working development environment we can go ahead and configure a project and write some code that actually does something. For the sake of actually seeing SFML in action we will write some code but we will not learn about each and every line of it. Rather we will improve our understanding as we progress during future SFML projects and C++ tutorials .[widgets_on_pages id=”udemy_advert_cpp_1″][widgets_on_pages id=”udemy_code_details”]

Getting started

In this project we will start from the very beginning as this is our first SFML project. It is true that there is quite a bit of messing around to be done with regard to configuring our first project to use SFML in the way that we need. We will however be saving these configurations in a Visual Studio template so that all future projects can be started with a couple of clicks. When we have done this we will finally get to see SFML in action as we draw some fancy text to the screen.

Configuring the SFML project

Start Visual Studio 2017 and select File | New Project.

In the New Project window choose Visual C++ || Windows Desktop then Win32 Console Application. You can see all these selections in the next screenshot.

Now at the bottom of the New Project window type HelloSFML in the Name: field. It is a tradition when learning a new language to start making a program which says “Hello World” to the user. This is what we will do in this project but we will quickly get closer and closer to a real game as we progress through future projects.

Next, browse to the Visual Studio Stuff\Projects\ folder that we created in the Setting up a Visual Studio 2017 and SFML development environment project. This will be the location that all our project files will be kept.

When you have completed the steps above click OK.  and Visual Studio will create our new project.

[widgets_on_pages id=”bcgp_cfgp_gpp”]

The slightly dull (but important) configuration stuff

Next, we will add some fairly intricate and vital project settings. This is the laborious part but we will only need to do this once. What we need to do is to tell Visual Studio, or more specifically the code compiler that is part of Visual Studio where to find a special type of code file from the SFML SDK. The special type of file I am referring to is a header file. Header files are the files that define the format of the SFML code. So when we use the SFML code the compiler knows how to handle it. Note that the header files are distinct from the main source code files and they are contained in files with the .hpp file extension. All this will become clearer when we eventually start adding our own header files in a few projects time. In addition, we need to tell Visual Studio where it can find the SFML library files.

We can achieve the above by doing the following:

From the Visual Studio main menu select Project | HelloSFML properties. In the resulting HelloSFML Property Pages window take the following steps which are numbered and can be referred to in the next image.

1. Select All Configurations from the Configuration: drop-down.
2. Select C/C++ then General from the left-hand menu.
3. Locate the Additional Include Directories edit box and type the drive letter where your SFML folder is followed by \SFML\include. So the full path to type if you located your SFML folder on your D drive is, as shown in the screen-shot D:\SFML\include.

This image refers to the steps above.

Click Apply to save our configurations so far.

Still, in the same window perform these next numbered steps which again refer to the next image.

1. Select Linker then General.
2. Find the Additional Library Directories edit box and type the drive letter where your SFML folder is followed by \SFML\lib. So the full path to type if you located your SFML folder on your D drive is, as shown in the screen-shot is D:\SFML\lib.

This image refers to the steps above.

Click Apply to save our configurations so far.

Finally for this stage, still in the same window perform these numbered steps which again refer to the next image.

1. Switch the Configuration: drop down to Debug as we will be running and testing our games in debug mode for now.
2. Select Linker then Input.
3. Find the Additional Dependencies edit box and click it at the far left. Now copy & paste the following sfml-graphics-d.lib;sfml-window-d.lib;sfml-system-d.lib;sfml-network-d.lib;sfml-audio-d.lib; at the indicated place (3). Again be REALLY careful to place the cursor exactly and not to overwrite any of the text that is already there.
4. Click OK.

This image refers to the previous steps

Let’s make a template of our work so far so we never have to do this again.

Creating a reusable project template

This is really easy. In Visual Studio select File | Export Template…. Then in the Export Template Wizard window make sure the Project template option is selected and the HelloSFML project is selected for the From which project do you want to create a template option. Click Next and then Finish. That’s it. Next time we create a project I’ll show you how to do it from this template.

Copying the .dll files to the project folder

That’s the tedious stuff done. In future, we will just be able to create a new project based on the template we just made. The only other step will be to copy the .dll files into the project folder which we will step through now.

My project folder is D:\Visual Studio Stuff\Projects\HelloSFML\HelloSFML. The files we need to copy into there are located at D:\SFML\bin. Of course, if you installed Visual Studio and the Visual Studio Stuff folder on a different drive then replace D: from the previous paths with your appropriate drive letter. Open a window for each location and highlight the required files as shown in the next screenshot on the left.

Copy & paste the files in the YOUR_DRIVE:\SFML\bin to YOUR_DRIVE:\Visual Studio Stuff\Projects\HelloSFML\HelloSFML.

Let’s code!

Writing the SFML “Hello World” game code

[widgets_on_pages id=”udemy_advert_cpp_2″][widgets_on_pages id=”udemy_code_details”]
Notice in the Visual Studio editor window there is a code file that was created for us. You can see the tab at the top-left in the next image the file name is HelloSFML.cpp. The .cpp stands for C++.

As I mentioned at the start of the slightly lengthy tutorial I won’t be explaining the code but I just want you to copy & paste some so you actually have something to show for all this effort.

Before we do SFML needs a font in order to draw text.

1. Download this free-for-personal-use font from http://www.1001freefonts.com/28_days_later.font.
2. Click the Download button.
3. Unzip the download.
4. Add the 28 Days Later.ttf file into the YOUR_DRIVE:\Visual Studio Stuff\Projects\HelloSFML\HelloSFML folder.

Delete all the code in the HelloSFML.cpp code file and add this code. Don’t be overwhelmed, at least half of it is just comments that don’t do anything but give hints and we will get to the bottom of all the weird symbols and words in a future tutorial. Be sure to read all the comments!

// Anything after // is a comment not actual C++ code
// Comments are important and I use them to explain things
// Why not read the comments in this code

// These "include" code from the C++ library and SFML too
#include "stdafx.h"
#include <SFML/Graphics.hpp>

// This is the main C++ program- Duh!
// It is where our game starts from
int main()
{
	// Make a window that is 800 by 200 pixels
	// And has the title "Hello from SFML"
	sf::RenderWindow window(sf::VideoMode(800, 200), "Hello from SFML");

	// Create a "Text" object called "message". Weird but we will learn about objects soon
	sf::Text message;

    // We need to choose a font
	sf::Font font;
	font.loadFromFile("28 Days Later.ttf");

	// Set the font to our message
	message.setFont(font);

	// Assign the actual message
	message.setString("Hello world");

	// Make it really big
	message.setCharacterSize(100); 

	// Choose a color
	message.setFillColor(sf::Color::White);

	// This "while" loop goes round and round- perhaps forever
	while (window.isOpen())
	{
		// The next 6 lines of code detect if the window is closed
		// And then shuts down the program
		sf::Event event;
		while (window.pollEvent(event))
		{
			if (event.type == sf::Event::Closed)
				// Someone closed the window- bye
				window.close();
		}

		// Clear everything from the last run of the while loop
		window.clear();

		// Draw our message
		window.draw(message);

		// Draw our game scene here
		// Just a message for now

		// Show everything we just drew
		window.display();
	}// This is the end of the "while" loop

	return 0;
}

Now click the button shown in the next image

Gaze in awe at your creation.

If you found this tutorial hard you can rest easy. It is not uncommon when learning any language that setting up the development environment can be challenging. C++ environments can be especially so because of the way that headers and libraries work. These will become more familiar and less of a strain as we proceed. And most tutorials and projects in the future will be much shorter than this one.

GTA 6 is so close I can smell it! Not quite I suppose but we can start learning to code in C++.