Game Code SchoolGame Code School - » SFML

Building a simple game engine in C++

John Horton — Thu, 15 Sep 2016 09:42:02 +0000

In this tutorial project, we will build a fully working and functional but simple C++ game engine. All that the game engine will do is allow the player to control one object moving left and right on a background, however, once you have completed the project you will be able to use the example game object class,

Bob

as a blueprint for adding as many other objects as you like. The tutorial won’t cover collision detection as that was discussed in the pong game and once you have read that tutorial it would be trivial to add this feature into the update function that we will be writing. Note that this really is a “simple” engine and future tutorials will expand and evolve this code to add more features. The long-term shortcomings of the engine are discussed at the end. What you do get with this simple game engine is a level of abstraction that will allow you to build a relatively complex game, without ending up in a tangled mess of code.
[widgets_on_pages id=”udemy_advert_cpp_1″][widgets_on_pages id=”udemy_code_details”]

About this project

Skill level 1
Time to complete 90 minutes

New concepts

Building a simple reusable game engine in C++
Using textures with Sprites
Managing lengthy code with abstraction

Assumed previous experience

Basic proficiency with Windows
Setup SFML and Visual Studio development environment
Building your first SFML game project
SFML variables demo: Moving circles
SFML conditions and branching demo: Bouncing shapes
Building a simple Pong clone

Creating the simple game engine project in Visual Studio

To get started we need to create a new project in Visual Studio, complete with all the required properties to work with SFML. If you haven’t completed the Building your first SFML game project you will need to do that first in order for the next steps to work.

These next steps set up our new SFML C++ game engine project.

Open Visual Studio and from the main menu choose File | New Project. In the left-hand menu click C++. Select the HelloSFML template and name your project Simple Game Engine.
Now click OK.
Right-click the HelloSFML.cpp file under the Source Files heading from the right-hand Solution Explorer window. Choose Rename and rename the file to Main. This is a more appropriate name as this will indeed be the source file containing the main function.
Open Main.cpp by double-clicking it. Now delete all of its contents as we will be starting with an empty file.
Copy & paste the SFML .dll files from the YOUR_DRIVE:\SFML\bin to YOUR_DRIVE:\Visual Studio Stuff\Projects\Simple Game Engine\Simple Game Engine. Obviously, if you configured your development environment slightly differently then your folder names will vary.

Now we can get coding. All the code is on the page and all the assets you need are made available from this page, but please take a look at the bonus download offer.

[sociallocker id=”14566″]

Thanks for the love! Here is the link to the simple-game-engine-c-bonus-download

Click to download the bonus!

[/sociallocker]

Also, note that all the bonus downloads for this and every future tutorial is available on an exclusive download area for my Patreon subscribers.

Planning the simple game engine

One of the problems that we had in the Pong game was how long and unwieldy the code was. If you consider that Pong is perhaps the simplest game it is possible to make then we need to think about improving the structure of our code. Object oriented programming in C++ allows us to break our code up into logical and manageable chunks called classes.

We will make a big improvement to the manageability of the code in this project compared to the Pong game with the introduction of an

Engine

class. The Engine class will have three
private functions. They are

input

update

, and

draw

. This should sound very familiar if you have done the Pong project. Each of these functions will hold a part of the code that was previously all in the

main

function. Each of these functions will be in a code file of its own,

Input.cpp

Update.cpp

, and

Draw.cpp

respectively.

There will also be one public function in the

Engine

class, which can be called with an instance of

Engine

which will be declared in

Main.cpp

. This function is appropriately called

start

and will be responsible for calling

input

update

, and

draw

, once for each frame of the game:

In addition, because we have abstracted the game loop to the

Engine

class, we can also move virtually all of the variables from main and make them members of

Engine

. All we need to do to get our game engine revving is create an instance of

Engine

and call its

start

function from

main

. Here is what the super-simple

main

function will look like when we are done. Don’t code it just yet, though.

int main()
{
	// Declare an instance of Engine
	Engine engine;
	// Start the engine
	engine.start();
	// Quit the game
	return 0;
}

If you want to go way beyond this tutorial, please take a look at these three related books.

[widgets_on_pages id=”bcgp_cfgp_gpp”]

Now we can build the classes that we discussed.

Coding the Bob class

Bob

is a simple class that will represent the player’s controllable character. It can only move left and right but when you see the code you will see that it would be trivial to extend this functionality. More significant, however, is that the

Bob

class can be easily copied and modified to become just about any type of game object you like. Simply apply the appropriate texture in the constructor, behaviour in the

update

function then declare, update and draw them in exactly the same way that we will soon see. If you want dozens, hundreds, or more of your new game object then just declare an entire array of them.

Bob.h

First, let’s code the header file of the

Bob

class.

Right-click Header Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) Header File (.h) and then in the Name field, type Bob.h. Finally, click the Add button. We are now ready to code the header file for the Bob class.

#pragma once
#include 

using namespace sf;

class Bob
{
	// All the private variables can only be accessed internally
private:

	// Where is Bob
	Vector2f m_Position;

	// Of course we will need a sprite
	Sprite m_Sprite;

	// And a texture
	// Bob has been working out and he is now a bit more muscular than before
	// Furthermore, he fancies himself in lumberjack attire
	Texture m_Texture;

	// Which direction(s) is the player currently moving in
	bool m_LeftPressed;
	bool m_RightPressed;

	// Bob's speed in pixels per second
	float m_Speed;

	// Public functions
public:

	// We will set Bob up in the constructor
	Bob();

	// Send a copy of the sprite to main
	Sprite getSprite();

	// Move Bob in a specific direction
	void moveLeft();

	void moveRight();

	// Stop Bob moving in a specific direction
	void stopLeft();

	void stopRight();

	// We will call this function once every frame
	void update(float elapsedTime);

};

In the previous code, we declare objects of type

Texture

and

Sprite

. You will see in the next code how we associate these with each other so that whenever we do anything with the

Sprite

it will be adorned by this rather handsome Bob character. Notice also the is a

Vector2f

called

m_Position

which can be manipulated and will be used to set Bob’s current position on the screen.

Right-click and select Save Image as… to download the previous image.

There are also two Boolean variables which will be set and unset in order to communicate with the

update

function which way Bob should be moving, if at all. There is also an

int

called

m_Speed

which will be assigned a value which determines how fast Bob will move.

The

public

section of the class has a

getSprite

function to return a copy of the

Sprite

object to the

draw

function where it is required in order to draw Bob to the screen. There are four setter functions

moveLeft

moveRight

stopLeft

, and

stopRight

. These functions will be called from the

input

function and are used to set the values of the two Booleans that control the movement.

The final function in the

Bob.h

file is the

update

function. You can see it takes a

float

variable. This function will be called each and every frame from the update function of the

Engine

class and will update Bob’s position by the right amount in the appropriate direction each frame.

Bob.cpp

Now we can code the definitions for all the functions we have just seen.

Right-click Source Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) C++ File (.cpp) and then in the Name field, type Bob.cpp. Finally, click the Add button. We are now ready to code the .cpp file for the Bob class.

#include "stdafx.h"
#include "bob.h"

Bob::Bob()
{
	// How fast does Bob move?
	m_Speed = 400;

	// Associate a texture with the sprite
	m_Texture.loadFromFile("bob.png");
	m_Sprite.setTexture(m_Texture);		

	// Set the Bob's starting position
	m_Position.x = 500;
	m_Position.y = 800;

}

// Make the private spite available to the draw() function
Sprite Bob::getSprite()
{
	return m_Sprite;
}

void Bob::moveLeft()
{
	m_LeftPressed = true;
}

void Bob::moveRight()
{
	m_RightPressed = true;
}

void Bob::stopLeft()
{
	m_LeftPressed = false;
}

void Bob::stopRight()
{
	m_RightPressed = false;
}

// Move Bob based on the input this frame,
// the time elapsed, and the speed
void Bob::update(float elapsedTime)
{
	if (m_RightPressed)
	{
		m_Position.x += m_Speed * elapsedTime;
	}

	if (m_LeftPressed)
	{
		m_Position.x -= m_Speed * elapsedTime;
	}

	// Now move the sprite to its new position
	m_Sprite.setPosition(m_Position);	

}

In the constructor function,

Bob

, above we set

m_Speed

which means Bob would cross a 1920 pixel screen width in around 5 seconds. We load the

bob.png

image into the

Texture

object and we associate it with the

Sprite

object. We also set the starting horizontal and vertical positions for Bob by initializing

m_Position.x

and

m_Position.y

. It is worth noting that depending on the resolution of your monitor you might want to adjust these values.

The

getSprite

function as expected returns a copy of

m_Sprite

. The four movement related functions play with our two Booleans. The

...Pressed

functions set the appropriate Boolean to

true

and the

stop...

functions set the same to

false

. We can now see how all these ties together in the

update

function.

The

update

function starts with two

if

statements. The first checking whether

m_RightPressed

true

and the second detecting whether

m_LeftPressed

true

. Inside each of the

if

blocks

m_Speed

multiplied by

elapsedTime

is added or subtracted from

m_Position.x

. The

elapsedTime

variable is calculated and passed in by the

start

function of the

Engine

class. We will code that next.

As a final step for this class add

bob.png

to the

Simple Game Engine/Simple Game Engine folder

Coding the Engine class

The Engine class is what controls everything else. Once it is started in the main function which runs when the app runs it will hold control right up until the player quits the game. Let’s code it now, it is quite straightforward.

Engine.h

Right-click Header Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) Header File (.h) and then in the Name field, type Engine.h. Finally, click the Add button. We are now ready to code the header file for the Engine class. Add the following code.

#pragma once
#include 
#include "Bob.h";

using namespace sf;

class Engine
{
private:

	// A regular RenderWindow
	RenderWindow m_Window;	

	// Declare a sprite and a Texture for the background
	Sprite m_BackgroundSprite;
	Texture m_BackgroundTexture;

	// An instance of Bob
	Bob m_Bob;

	// Private functions for internal use only
	void input();
	void update(float dtAsSeconds);
	void draw();

public:
	// The Engine constructor
	Engine();

	// start will call all the private functions
	void start();

};

Let’s talk about the variables first. There is an SFML

RenderWIndow

which is what we use to display everything. There is a

Sprite

and a

Texture

which will be used to draw a pretty background image. We declare an instance of the

Bob

class that we just finished coding a moment ago. There is also the three

private

functions,

input

update

, and

draw

. They are

private

because we don’t need or want to call them from outside of the

Engine

class.

Next, the code declares two

public

functions. The constructor called

Engine

will set the instance of the class up ready go and the

start

function is the function that will continuously call the

input

update

and

draw

functions, in that order, every frame.

Engine.cpp

In the

Engine.cpp

file, we will put the constructor (

Engine

) and the public

start

function. All the rest of the functions will go in their own

.cpp

file, with a name that makes it clear what function goes where. This will not be a problem for the compiler as long as we add the appropriate include directive (

#include "Engine.h"

) at the top of all the files that contain function definitions from the

Engine

class.

Let’s get started by coding

Engine

and

start

Engine.cpp

. Right-click Source Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) C++ File (.cpp) and then in the Name field, type Engine.cpp. Finally, click the Add button. We are now ready to code the .cpp file for the Engine class.

#include "stdafx.h"
#include "Engine.h"

Engine::Engine()
{
	// Get the screen resolution and create an SFML window and View
	Vector2f resolution;
	resolution.x = VideoMode::getDesktopMode().width;
	resolution.y = VideoMode::getDesktopMode().height;

	m_Window.create(VideoMode(resolution.x, resolution.y),
		"Simple Game Engine",
		Style::Fullscreen);

	// Load the background into the texture
	// Be sure to scale this image to your screen size
	m_BackgroundTexture.loadFromFile("background.jpg");

	// Associate the sprite with the texture
	m_BackgroundSprite.setTexture(m_BackgroundTexture);

}

void Engine::start()
{
	// Timing
	Clock clock;

	while (m_Window.isOpen())
	{
		// Restart the clock and save the elapsed time into dt
		Time dt = clock.restart();

		// Make a fraction from the delta time
		float dtAsSeconds = dt.asSeconds();

		input();
		update(dtAsSeconds);
		draw();
	}
}

The constructor function gets the screen resolution and then opens a fullscreen window with

m_Window.create

. Finally, in the constructor, we load the image into the

Texture

and associate it with the

Sprite

You need to add an image for the background. Here is a great place to get lots of images with varying sizes.

http://www.spyderonlines.com/wallpapers/game-background-images.html

Use an image editor like GIMP or Photoshop to scale the background to the same resolution as your screen. Rename the image as

background.jpg

. Add the

backgroung.jpg

image to the

Simple Game Engine/Simple Game Engine

folder.

The other function in the code above is the

start

function. This function contains just a continuous

while

loop that will only break when the window (

m_Window

) is closed. We will give the player the ability to do this in the

input

function soon.

The

start

function then calculates how long the previous frame took, stores the answer as a

float

called

dtAsSeconds

then calls

input

update

and

draw

. Notice that

dtAsSeconds

get passed to

update

that will require the value because it will be calling the

update

function of the

Bob

instance.

I hope you agree that is extremely simple. It is arguably easier than have to handle the sprawl of code that we did in the Pong game.

Coding the three stages of the game loop

[widgets_on_pages id=”udemy_advert_cpp_2″][widgets_on_pages id=”udemy_code_details”]
The next three functions will be coded in their own individual files but don’t forget that they are part of the

Engine

class and were declared in the

Engine.h

file. At the top of each file, we will add the directive

#include "Engine.h"

so that Visual Studio knows what we are doing.

Handling player input

The first of these functions we will code is

input

Right-click Source Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) C++ File (.cpp) and then in the Name field, type Input.cpp. Finally, click the Add button. Here is the code for Input.cpp.

#include "stdafx.h"
#include "Engine.h"

void Engine::input()
{
	// Handle the player quitting
	if (Keyboard::isKeyPressed(Keyboard::Escape))
	{
		m_Window.close();
	}

	// Handle the player moving
	if (Keyboard::isKeyPressed(Keyboard::A))
	{
		m_Bob.moveLeft();
	}
	else
	{
		m_Bob.stopLeft();
	}

	if (Keyboard::isKeyPressed(Keyboard::D))
	{
		m_Bob.moveRight();
	}
	else
	{
		m_Bob.stopRight();
	}						

}

In the

input

function, we use the SFML

Keyboard::isKeyPressed

constants to verify which keyboard keys are currently pressed. If the Escape key is pressed

m_Window

is closed. This has the effect of breaking out of the

while

loop in the

start

function. This causes execution to go back to the

main

function and the game will close.

If the A or D keys are pressed we call the appropriate

move...

function on our

Bob

instance. Notice that when the A or D keys are not pressed the two

else

clauses call the corresponding

stop...

functions. This is the final piece of the puzzle that enables the player to move Bob left and right.

Updating the game objects

Next, we come to the super-simple

update

function. Any new objects you create should have their own

update

functions called from here. You should also add collision detection to the end of this function.

Right-click Source Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) C++ File (.cpp) and then in the Name field, type Update.cpp. Finally, click the Add button. Here is the code for Update.cpp.

#include "stdafx.h"
#include "Engine.h"

using namespace sf;

void Engine::update(float dtAsSeconds)
{
	m_Bob.update(dtAsSeconds);
}

As we only have one game object we call

m_Bob.update

and pass in

dtAsSeconds

and then we are finished with this function.

Drawing the scene

This is the final function of the

Engine

class.

Right-click Source Files in the Solution Explorer and select Add | New Item…. In the Add New Item window, highlight (by left-clicking) C++ File (.cpp) and then in the Name field, type Draw.cpp. Finally, click the Add button. Here is the code for Draw.cpp.

#include "stdafx.h"
#include "Engine.h"

void Engine::draw()
{
	// Rub out the last frame
	m_Window.clear(Color::White);

	// Draw the background
	m_Window.draw(m_BackgroundSprite);
	m_Window.draw(m_Bob.getSprite());

	// Show everything we have just drawn
	m_Window.display();
}

In the

draw

function, there is nothing that we didn’t see in the Pong game. First, we clear the screen with the

clear

function. Next, we draw the background followed by Bob. The things to note here are that we must draw the background first so Bob is drawn on top and that when we draw Bob we call the

getSprite

function which gets a copy of the

Sprite

in the

Bob

class.

Getting the engine started with Main

This is the shortest

main

function out of all the C++ tutorials on this site.

Add the code we have already glimpsed at to

Main.cpp

. Here it is again in its entirety.

#include "stdafx.h"
#include "Engine.h"

int main()
{
	// Declare an instance of Engine
	Engine engine;

	// Start the engine
	engine.start();

	// Quit in the usual way when the engine is stopped
	return 0;
}

First, we declare an instance of

Engine

, call the

start

function and execution will move to the

Engine

class until the player quits by pressing the Escape key.

You can now run the game and move Bob left and right with the A and D keyboard keys.

Use the A and D keys to move

Conclusion, flaws & what next?

When you added the background and the player we had to adjust the code to suit your specific resolution. This is obviously not suitable for a game you want to release on Steam. It is quite easy to fix this flaw using the SFML

View

class. I didn’t add this feature because at some point I had to stop adding features. The

View

class uses OpenGL to make independent drawing layers and can be used to make some really cool effects like split-screen gameplay, mini maps, and levels that can rotate and zoom. I will publish a whole working game that uses these features soon.

Another obvious flaw that you probably spotted was that the game engine doesn’t handle for different game states like paused, home screen and playing. You can quickly cater for this by creating some Booleans to represent each state. Perhaps

isPlaying

isPaused

etc. This isn’t the best way of doing it but as I said before I had to draw the line at the features to include in what should be a simple tutorial. We will see a neater and more efficient way to handle states in a forthcoming full-game project, most likely a platformer.

In addition, any game you are going to release to the world will have more features like sound, music, artificial intelligence, saving of high scores and more besides. Most of these features can be bolted onto this engine. It is true, unfortunately, that eventually you will end up with code sprawl again but the purpose of the tutorial is meant to be instructional as well as practical and when we dive into something more complicated this engine should serve as good preparation and starting point.

I hope you had some fun with this simple C++ game engine. Please ask questions and leave comments if you would like to.

Coding a simple Pong game with SFML

John Horton — Thu, 10 Dec 2015 18:51:27 +0000

In this first playable game project we will build a very simple Pong clone. If you don’t know what Pong is then you are much younger than me and you should take a look at its appearance and history before continuing. We will use everything we learnt about C++ Functions and OOP to create a class for each of the objects of the game (a bat and a ball) as well as functions within these classes to make our bat and ball behave as we expect.[widgets_on_pages id=”udemy_advert_cpp_1″][widgets_on_pages id=”udemy_code_details”]

About this project

Skill level 1
Time to complete 30 minutes

New concepts

Separating the class definition from the declaration
Getter and setter functions

Assumed previous experience

Basic proficiency with Windows
Setup SFML and Visual Studio development environment
Building your first SFML game project
SFML variables demo: Moving circles
SFML conditions and branching demo: Bouncing shapes

To get started we need to create a new project, complete with all the required properties to work with SFML. If you haven’t completed the Building your first SFML game project you will need to do that first. In that project, we created a Visual Studio project template, so that starting a new SFML project is now a two-minute job instead of a half an hour long chore.

The next steps set up our new SFML C++ project.

Open Visual Studio and from the main menu choose File | New Project. In the left-hand menu click C++. Select the HelloSFML template and name your project Pong.
Now click OK.
Right-click the HelloSFML.cpp file under the Source Files heading from the right-hand Solution Explorer window. Choose Rename and rename the file to Main. This is a more appropriate name as this will indeed be our “main” source file.
Open Main.cpp by double-clicking it. Now delete all of its contents as we will be starting fresh and discussing all of the code as well.
Copy & paste the SFML .dll files in the YOUR_DRIVE:\SFML\bin to YOUR_DRIVE:\Visual Studio Stuff\Projects\Pong\Pong.

Now we can get coding.

[widgets_on_pages id=”bcgp_cfgp_gpp”]

Building the Bat class

In the tutorial on coding a C++ class, we mentioned that we should separate the declaration from the definition. As we create the

Bat

class we will see exactly how to do this. Perhaps unsurprisingly the

Bat

class will represent the player’s bat.

Right-click on Header Files in the Solution Explorer window. And select ADD | New Item. This step is shown in the next image.

Now select C++ Header File (.h) (1) and enter bat.h in the Name: field (2) as shown next.

Click the Add button (3) and our new file will be created for us.

Coding bat.h

Now we will code the class declaration. This will look a bit different to how it did in the Introduction to OOP in C++ tutorial but when we move on to the definition which will go in a separate file (Bat.cpp) things will look more familiar and will make more sense.

Take a look at the next block of code. This will be the entire contents of our bat.h file. In it, we

#include

the SFML library that we need, declare some member variables that are

private

and then declare some functions which are

public

We will discuss the variables and functions in more detail when we use and implement them in Bat.cpp in a minute. For now just note their names, parameters and return types. We have a

Vector2f

called

position

which will indeed hold the horizontal and vertical position of the player’s bat. We have an SFML

RectangleShape

which will be the actual bat that appears on the screen and we have a

float

called

batSpeed

that is the number of pixels per frame that the bat can move at.

The functions are as follows. A function called

Bat

which we learnt is the constructor because it has the same name as the class. Notice it takes two

float

parameters. This is perfect for initializing the position on the screen when we first create an

Bat

object. Next is the

getPosition

function which returns a

FloatRect

, the four points which define a rectangle. Then we have

getShape

which returns a

RectangleShape

. This will be used to return to the main game loop

batShape

, so it can be drawn.

Finally, we have the

moveLeft

moveRight

and

update

functions which take no parameters and return no values. We will see how these are useful to us very soon.

Add all this code we have just discussed to the bat.h file.

#pragma once
#include 

using namespace sf;

class Bat
{
private:
	Vector2f position;

	// A RectangleShape object
	RectangleShape batShape;

	float batSpeed = .3f;

public:
	Bat(float startX, float startY);

	FloatRect getPosition();

	RectangleShape getShape();

	void moveLeft();

	void moveRight();

	void update();

};

Now we can get to the real functionality of the

Bat

class.

Coding bat.cpp

Let’s create the file then we can start discussing the code. Right-click the Source Files folder in the Solution Explorer window. Now select C++ File (.cpp) and enter Bat.cpp in the Name: field. Click the Add button and our new file will be created for us.

We will divide the code for this file into two to make discussion of it simpler. Take a look at part one of the code and explanation below.

bat .cpp part one

In this first part, we can see that we

#include

bat.h. This makes all the functions and variables that were declared previously in bat.h available to us. Then we implement the constructor. Notice we use the syntax

Bat::Bat

as the function name to make it clear we are using the

Bat

function from the

Bat

class.

This constructor receives two

float

values,

startX

and

startY

. The next thing that happens is we assign these values to

position.x

and

position.y

. The

Vector2f

named

position

now holds the values that were passed in and because

position

is a member variable, these values are accessible throughout the class. Note however that

position

was declared as

private

and will not accessible in our Main.cpp file. Not directly anyway. We will see how we resolve this issue soon.

Finally, in the constructor, we initialize our

RectangleShape

called

batShape

by setting its size and position.

Add the code we have just discussed to the Bat.cpp file.

#include "stdafx.h"
#include "Bat.h"

// This the constructor and it is called when we create an object
Bat::Bat(float startX, float startY)
{
	position.x = startX;
	position.y = startY;

	batShape.setSize(sf::Vector2f(50, 5));
	batShape.setPosition(position);
}

Now for the rest of the functions.

bat.cpp part two

We have five more functions that we need to code. Let’s go through them one at a time. Refer to the next block of code during this discussion.

First, we have the

getPosition

function. All it does is return a

FloatRect

to the code that called it. The

batShape.getGlobalBounds

, itself returns a

FloatRect

that is initialized with the coordinates of the four corners of the

RectangleShape

batShape

. We will use this function in Main.cpp when we are determining whether the ball has hit the bat.

Next, we have

getShape

. All this function does is pass a copy of

batShape

to the calling code. This is necessary so we can draw the bat in Main.cpp. When we code a public function with the sole purpose of passing back private data from a class we call it a getter function.

Now we can look at the

moveLeft

and

moveRight

functions. All they do is add or subtract

batSpeed

from

position.x

. This means that every time we call either

moveLeft

moveRight

we will tweak the horizontal position of the player’s bat. This is just what we need.

The last function in the

Bat

class is

update

. We will call this function one per frame of the game. The

update

function will grow in complexity as our game objects get more complicated. For now, all we need to do is set the position of

batShape

with whatever the current values held in

position

happen to be.

Add the code we have just discussed to the Bat.cpp file right after the previous code we added.

FloatRect Bat::getPosition()
{
	return batShape.getGlobalBounds();
}

RectangleShape Bat::getShape()
{
	return batShape;
}

void Bat::moveLeft()
{
	position.x -= batSpeed;
}

void Bat::moveRight()
{
	position.x += batSpeed;
}

void Bat::update()
{
	batShape.setPosition(position);
}

That’s it for the

Bat

class. What we have effectively done is this. We have a

RectangleShape

that is initialized to a position on the screen that will be determined when we create a

Bat

. We have the ability to change the position variable to the left or right at any time we choose by calling

moveLeft

moveRight

. Once per frame the

RectangleShape

will be moved to whatever position is contained within the

position

variable. The code in Main.cpp also has the ability to get a copy of this RectangleShape by calling getShape, this is ideal for when we need to draw it. The code in Main.cpp can also call

getPosition

to get the coordinates that define the four points of the bat which we will use for detecting collisions with the ball.

Let’s make a ball.

Building the Ball class

As we did for the

Bat

class we will create a new .h file to hold the class declaration for our

Ball

class. Right-click on Header Files in the Solution Explorer window. And select ADD | New Item. Now select C++ Header File (.h) and enter ball.h in the Name: field. Click the Add button and our new file will be created for us.

Coding ball.h

Take a look at the next block of code. We can see we have another

Vector2f

for holding the position of the ball. We have another

RectangleShape

which will be used to draw the ball and we have two float variables

xVelocity

and

yVelocity

to represent the horizontal and vertical speeds of the ball. These variables are all private so not accessible directly from outside the code of the class.

We also have a selection of public functions. The one named

Ball

will obviously be our constructor. Just like our

Bat

constructor, it takes two

float

parameters that will set the starting position. Just as we did with the

Bat

class we have a

getPosition

and

getShape

functions that return a

FloatRect

and

RectangleShape

respectively.

Now we have the

getXVelocity

getter function which will return the value of some private data to the calling code.

Now we have something a little bit different that won’t make complete sense until we actually use them. When we make a quick and simple version of a game like Pong it is possible to foresee a couple of problems we will encounter:

What happens when the ball hits the side of the screen?
What happens when the ball hits the bat or the top of the screen?
What happens when the ball hits the bottom of the screen?

The three functions

reboundSides

reboundBatOrTop

and

hitBottom

will deal with the above the events. We will see exactly how in a minute.

Finally, just like in the

Bat

class we have a

update

function that will be called once per frame of the game to move the ball around.

Add the code we have just discussed to the ball.h file.

#pragma once
#include 

using namespace sf;

class Ball
{
private:
	Vector2f position;

	// A RectangleShape object called ref
	RectangleShape ballShape;

	float xVelocity = .2f;
	float yVelocity = .2f;

public:
	Ball(float startX, float startY);

	FloatRect getPosition();

	RectangleShape getShape();

	float getXVelocity();

	void reboundSides();

	void reboundBatOrTop();

	void hitBottom();

	void update();

};

Next for the implementation.

Coding ball.cpp

Let’s create the file then we can start discussing the code. Right-click the Source Files folder in the Solution Explorer window. Now select C++ File (.cpp) and enter Ball.cpp in the Name: field. Click the Add button and our new file will be created for us.

We will divide the code for this file into two to make discussion of it simpler. Take a look at part one of the code and explanation below.

ball.cpp part one

Here we have the constructor and it does exactly the same thing that the

Bat

constructor did. It captures the required starting position passed in as parameters, sets the size and position of the

RectangleShape

that will represent the ball on the screen. Add the code below to Ball.cpp.

#include "stdafx.h"
#include "Ball.h"

// This the constructor and it is called when we create an object
Ball::Ball(float startX, float startY)
{
	position.x = startX;
	position.y = startY;

	ballShape.setSize(sf::Vector2f(10, 10));
	ballShape.setPosition(position);
}

The next part of the code is much longer but not complicated in any way.

ball.cpp part two

[widgets_on_pages id=”udemy_advert_cpp_2″][widgets_on_pages id=”udemy_code_details”]
There are seven more functions in

Ball

. Let’s run through them one at a time.

First

getPosition

is a getter which returns a

FloatRect

to the calling code. We will soon see how we use the

getPosition

functions from

Bat

and

Ball

to do collision detection in our Main.cpp code.

Next we have

getShape

which does exactly the same job that the

getShape

function in the

Bat

class did. It returns a copy of the

RectangleShape

to be drawn on the screen.

The

getXVelocity

function is a getter for the

xVelocity

member variable and does it’s one simple job of returning the value stored in

xVelocity

The

reboundSides

function will be called every time the ball hits the sides of the screen. Look at the code inside it. It simply makes

xVelocity

the negative of whatever it currently is. So if it is positive (moving right) it will become negative and move left, and vice versa as well.

The

ReboundBatOrTop

function is a tiny bit more in-depth, but not much. The first line of code in this function

position.y -= (yVelocity * 30)

directly alters the

position.y

value by the equivalent of 30 frames of movement and prevents the ball from getting stuck on the bat. This is a common bug when using simplistic physics like we are here. The second line of code reverses the direction of the ball.

The

hitBottom

function is very straight forward as well. First, it sets the

position.y

value to 1, effectively placing the ball back at the top of the screen and the

position.x

to 500, placing it around about the middle horizontally.

Finally, for the Ball class, we have the

update

function which is a bit more in-depth than the

update

function in the

Bat

class. Unlike a bat, a ball is always moving. So the first thing that happens each frame is we update

position.x

and

position.y

xVelocity

and

yVelocity

. Then, just as we did for the

Bat

class, we update the position of the

RectangleShape

with the new values stored in

position

Add the code we have just discussed directly after the previous code, into the Ball.cpp file.

FloatRect Ball::getPosition()
{
	return ballShape.getGlobalBounds();
}

RectangleShape Ball::getShape()
{
	return ballShape;
}

float Ball::getXVelocity()
{
	return xVelocity;
}

void Ball::reboundSides()
{
	xVelocity = -xVelocity;
}

void Ball::reboundBatOrTop()
{
	position.y -= (yVelocity * 30);
	yVelocity = -yVelocity;

}

void Ball::hitBottom()
{
	position.y = 1;
	position.x = 500;
}

void Ball::update()
{
	// Update the ball position variables
	position.y += yVelocity;
	position.x += xVelocity;

	// Move the ball and the bat
	ballShape.setPosition(position);
}

Coding Main.cpp

At last, we are in a position to put our new classes to work and make the Pong game come to life. Switch to the Main.cpp file in Visual Studio and we can discuss the first part of six parts that go to make up the code for this file.

We will be displaying some text known as a HUD (Heads Up Display) in this game which will show the player’s score and remaining lives. For this, we need a font.

Download this free-for-personal-use font from http://www.dafont.com/theme.php?cat=302.
Click the Download button.
Unzip the download.
Add the DS-DIGIT.ttf file into the YOUR_DRIVE:\Visual Studio Stuff\Projects\Pong\Pong folder.

Main.cpp part one

Add all the following

#include

directives and the using statement to the top of the file. Notice that we are including our two new classes by the code

#include "bat.h"

and

#include "ball.h"

// These "include" code from the C++ library and SFML too
#include "stdafx.h"
#include "bat.h"
#include "ball.h"
#include 
#include 
#include 

// Avoid having to put sf in front of all the SFML classes and functions
using namespace sf;

Onwards to part two.

Main.cpp part two

In the next block of code, we create a window that is 1024 x 768 pixels in size. As this is going to be a working game we declare two

int

variables to keep track of the player’s lives and score. Then we create an instance of a

Bat

and a

Ball

. We pass in appropriate starting positions for each, as required by their constructors which we coded previously.

All the rest of the code in part two deals with displaying the HUD (score and lives) on the screen. Some of this we have seen previously in the Hello SFML project but some of it is new. We create an SFML

Text

object called

text

and an SFML

Font

object called

font

. We then load the font that we placed in the project folder a few moments ago. Next, we use

setFont

to assign our new font to our

hud Text

object. Next, we set the size followed by the color of the font using

setCharacterSize

and

setFillColor

functions.

Add the code we have just discussed to Main.cpp.

// This is where our game starts from
int main()
{
	int windowWidth = 1024;
	int windowHeight = 768;
	// Make a window that is 1024 by 768 pixels
	// And has the title "Pong"
	RenderWindow window(VideoMode(windowWidth, windowHeight), "Pong");

	int score = 0;
	int lives = 3;

    // create a bat
	Bat bat (windowWidth / 2, windowHeight - 20);

	// create a ball
	Ball ball(windowWidth / 2, 1);

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

 // We need to choose a font
 Font font;
 // http://www.dafont.com/theme.php?cat=302
 font.loadFromFile("DS-DIGIT.ttf");

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

 // Make it really big
 hud.setCharacterSize(75);

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

We are ready to enter the game loop!

Main.cpp part three

In this third part of the Main.cpp code we will handle the player’s input. There are two ways to handle player input in SFML and I encourage you to research them both further(event handling and keyboard input). Here we use both. First, in the

while

loop that has the condition

window.pollEvent(event)

, we check if any messages have been sent to the operating system and subsequently passed on to SFML. We could check for lots of different types of messages here but content ourselves by checking if the window was closed. If it was we call

window.close

and the game will quit.

Next, we explicitly check for the current state of some of the keys at the given moment (as opposed to in a queue). Look carefully at the various

if

statements and the simple but important code that we call when the

if

statement is true.

Keyboard::Left

bat.moveLeft()

. Next is if

Keyboard::Right

bat.moveRight()

. What is happening here is that once each frame we check to see if the left or right arrow (cursor) keys are currently being pressed and if they are we call the appropriate

moveLeft

moveRight

functions on our

bat

object. This will have the effect of updating the

position.x

variable that we coded previously.

        // This "while" loop goes round and round- perhaps forever
	while (window.isOpen())
	{
		/*
			Handle the player input
			*********************************************************************
			*********************************************************************
			*********************************************************************
		*/

		Event event;
		while (window.pollEvent(event))
		{
			if (event.type == Event::Closed)
				// Someone closed the window- bye
				window.close();
		}

		if (Keyboard::isKeyPressed(Keyboard::Left))
		{
			// move left...
			bat.moveLeft();
		}
		else if (Keyboard::isKeyPressed(Keyboard::Right))
		{
			// move right...
			bat.moveRight();
		}
		else if (Keyboard::isKeyPressed(sf::Keyboard::Escape))
		{
			// quit...
			// Someone closed the window- bye
			window.close();
		}

We will soon see the knock-on effect of changing the

position.x

variable. First let’s work out if any collisions have taken place.

Main.cpp part four

This next block of code comprises four main

if

statements although one of them has a further nested

if

statement.

The first main

if

statement checks whether the ball has hit the bottom of the screen. It does so by using the

getPosition

function we coded in the

Ball

class and checking the

top

variable of the returned

FloatRec

t to see if it has exceeded the height of the screen. If it has then a number of things happen next. First, we call the

hitBottom

function to reposition the ball at the top of the screen and reverse its direction, then we subtract a life from the player. Next, still inside the

if

statement that determined the ball hit the bottom, we check if the player has run out of lives. If the player has run out of lives we reset the score to zero and the lives back to three. The player is essentially starting again.

In the next main

if

statement, we find out if the ball has hit the top of the screen by checking if the top of the ball is at a position less than zero. If it has, all we need to do is call the

reboundBatOrTop

function which reverses the direction. Furthermore, we add a point to the player’s score.

The next

if

statement checks for a collision on the left or right-hand side of the screen. The condition uses the logical OR

||

operator so it can test for the ball’s left-hand side being less than zero or the ball’s right-hand side being greater than the width of the screen in one condition. If the condition is true, all we need to do is call the

reboundSides

function on

ball

and the ball’s direction is reversed.

The last

if

statement is a little bit different to the others because it detects if the ball has hit the bat. It achieves this using the

getPosition

function just like the other collision detecting

if

statements did but this time it chains that function call with another call to a function called

intersects

. Take a look at this

if

condition closely and we will explore what is going on.

The

ball.getPosition()

part of the code returns a

FloatRect

object, just like we coded it to do. Now, because

FloatRect

, itself is a class, it too has functions that can be called. The returned

FloatRect

from

getPosition

is used to call its

intersects

function passing in as a parameter the returned

FloatRect

from

bat.getposition

. Essentially we are saying, does the ball intersect the bat? If it does the condition is true and we call the

reboundTopOrBat

function which reverses the ball and sends it heading off towards the top of the screen again.

Enter the following code after the previous code we entered.

        /*
			Update the frame
			*********************************************************************
			*********************************************************************
			*********************************************************************
		*/

		// Handle ball hitting the bottom
		if (ball.getPosition().top > windowHeight)
		{
			// reverse the ball direction
			ball.hitBottom();

			// Remove a life
			lives --;

			// Check for zero lives
			if (lives < 1) {
				// reset the score
				score = 0;
				// reset the lives
				lives = 3;
			}

		}

		// Handle ball hitting top
		if (ball.getPosition().top < 0)
		{
			ball.reboundBatOrTop();

			// Add a point to the players score
			score++;

		}

		// Handle ball hitting sides
		if (ball.getPosition().left < 0 || ball.getPosition().left + 10 > windowWidth)
		{
			ball.reboundSides();
		}

		// Has the ball hit the bat?
		if (ball.getPosition().intersects(bat.getPosition()))
		{
			// Hit detected so reverse the ball and score a point
			ball.reboundBatOrTop();
		}

Nearly there!

Main.cpp part five

The final part of updating the current frame requires us to call the

update

functions of both the

bat

and the

ball

objects. In the

bat update

function, we simply update the position and in the ball update method we move the ball in the appropriate direction and then update its position. They are now ready to be drawn.

The last part of the code in this block is totally new. We are declaring an object of type

stringstream

and calling it

ss

. We can use

ss

to concatenate (add together) characters and numerical values to create a single string-like object. This, as we will see, is perfect for displaying a dynamic score and number of lives in our

hud

object. The slightly strange looking

ss << "score:" << score...

code does exactly this. We then set the String held in

ss

hud

which of course is a

Text

object.

Add the code we have just discussed.

ball.update();
bat.update();

// Update the HUD text
std::stringstream ss;
ss << "Score:" << score << "    Lives:" << lives;
hud.setString(ss.str());

Let’s draw.

Main.cpp part six

First, we clear the previous frame with

window.clear

, then we draw the bat and the ball using

window.draw

passing in a call to the

getShape

function of each of our two objects. As these functions return the appropriate

RectangleShape

the effect is that they are drawn on the screen. We then call

window.draw

and pass in

hud

to draw the HUD. Finally we call

window.display

to draw the current frame to the screen.


         /*
			Draw the frame
			*********************************************************************
			*********************************************************************
			*********************************************************************
		*/

		// Clear everything from the last frame
		window.clear(Color(26, 128, 182,255));

		window.draw(bat.getShape());

		window.draw(ball.getShape());

		// Draw our score
		window.draw(hud);

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

	return 0;
}

Run the game and you will be able to entertain yourself, just as I did when I was four years old.

What can we do better next time?

There are a few flaws with our game. Some are obvious and some not quite as obvious.

If you were to run this game on a super-fast PC and then run it on an ageing laptop, you would see that the game actually runs at totally different speeds. A professional game would control the number of frames per second (FPS) so that it ran exactly the same regardless of the speed of the PC. This is not especially tough and we could have incorporated it in this project. I just thought there were enough new ideas already.

Another issue is that we have only used boring shapes for all the game objects. This isn’t too much of an issue for a Pong clone but we will need to use real graphics if we are going to win Indie game of the year anytime soon.

There is also the issue that by creating and managing each and every object individually we will eventually have an extremely cluttered code base. Imagine if we did a Zombie Survival game with dozens of Zombies. How would we manage the zombies? Would we have dozens of zombie objects like z1, z2, z3, z4… etc.?

We will be improving on all these issues and solve the problems as we progress with more C++ tutorials and the next SFML project.

Note to self: Zombie Survival game seems like a good choice for next project.

Conditions and branching demo: Bouncing shapes

John Horton — Mon, 16 Nov 2015 16:00:18 +0000

In this mini-project we will get to use C++ condition checking with some

if

statements. Like the last project we will draw some shapes (slightly different this time) and move them. This time however instead of letting them disappear off of the screen we will detect when they are leaving the screen on any of the four sides and then “bounce” them back the other way.

[widgets_on_pages id=”udemy_advert_cpp_1″][widgets_on_pages id=”udemy_code_details”]

About this project

Skill level 1
Time to complete 30 minutes

New concepts

Using C++ conditions
Using C++
```
if
```
statements
Another look at the SFML
```
Shape
```
class
Introduction to C++ constants
The most basic collision detection in the world

Assumed previous experience

Basic proficiency with Windows
Setup SFML and Visual Studio development environment
Building your first SFML game project
SFML variables demo: Moving circles

To get started we need to create a new project, complete with all the required properties to work with SFML. If you haven’t completed the Building your first SFML game project you will need to do that first. In that project we created a Visual Studio project template, so that starting a new SFML project is now a two minute job instead of a half an hour long chore.

The next steps set up our new SFML C++ project. If you want more detailed steps and images to perform these steps check the previous project. Game variables demo: Moving circles.

Open Visual Studio and from the main menu choose File | New Project. In the left-hand menu click C++. Select the HelloSFML template and name your project Conditions And Branching.
Now click OK.
Right-click the HelloSFML.cpp file under the Source Files heading from the right-hand Solution Explorer window. Choose Rename and rename the file to Main. This is a more appropriate name as this will indeed be our “main” source file.
Open Main.cpp by double-clicking it. Now delete all of its contents as we will be starting fresh and discussing all of the code as well.
Copy & paste the SFML .dll files in the YOUR_DRIVE:\SFML\bin to YOUR_DRIVE:\Visual Studio Stuff\Projects\Conditions And Branching\Conditions And Branching.

Now we can get coding.

[widgets_on_pages id=”bcgp_cfgp_gpp”]

Writing the code

Copy and paste all the code that follows into your currently empty, Main.cpp file. You don’t need to type it all in order to learn, but you should definitely read all the comments and analyse as best you can the code before we go through it a bit at a time.

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

// This is where our game starts from
int main()
{
	// Make a window that is 1000 by 700 pixels
	// And has the title "Conditions and branching demo"
	// Change the resolution if it is unsuitable for you

	int windowWidth = 1000;
	int windowHeight = 700;

	sf::RenderWindow window(sf::VideoMode(windowWidth, windowHeight), "Conditions and branching demo");

	// Let's make a few shapes
	// define a circle with radius = 100
	// Our new circle is called "tri"!!??!!
	sf::CircleShape tri(100);

	// A circle with 3 points
	// There is a clue in the variable name
	tri.setPointCount(3);

	// Here is another "circle"
	sf::CircleShape bumpy(100);
	bumpy.setPointCount(15);

	// Now lets have some variables for their positions (x and y)
	float triX = 0;
	float triY = 0;

	float bumpyX = windowWidth;
	float bumpyY = windowHeight;

	// Here are some variables that can never change.
	// Thet are called constants.
	// We make their names all uppercase to remind us.
	// We use the const keyword to make them constant.
	// We will see their purpose soon.
	const float LEFT = -1;
	const float RIGHT = 1;
	const float UP = -1;
	const float DOWN = 1;

	// The direction is not constant
	// tri starts with RIGHT and DOWN
	float triDirectionX = RIGHT;
	float triDirectionY = DOWN;

	// The direction is not constant
	// bumpy starts with LEFT and UP
	float bumpyDirectionX = LEFT;
	float bumpyDirectionY = UP;

	// How fast will they move
	float speed = .1;

	// This "while" loop goes round and round- perhaps forever
	// It only stops when the player closes the window
	while (window.isOpen())
	{

		// Has the player closed the game window?
		sf::Event event;
		while (window.pollEvent(event))
		{
			if (event.type == sf::Event::Closed)
				// Someone closed the window- bye
				window.close();
		}

		// Handle the ai, physics and process updates
		// Watch out for collisions with the edge of the screen

		// First the tri shape
		if (triX > windowWidth) {
			// Triangle is near right of screen
			triDirectionX = LEFT;
		}
		else if (triX < 0) {
			// Triangle is near left of screen
			triDirectionX = RIGHT;
		}

		if (triY > windowHeight) {
			// Triangle is near bottom of screen
			triDirectionY = UP;
		}
		else if (triY < 0) {
			// Triangle is near top of screen
			triDirectionY = DOWN;
		}

		// Now for bumpy
		if (bumpyX > windowWidth) {
			// Bumpy shape is near right of screen
			bumpyDirectionX = LEFT;
		}
		else if (bumpyX < 0) {
			// Bumpy shape is near left of screen
			bumpyDirectionX = RIGHT;
		}

		if (bumpyY > windowHeight) {
			// Bumpy shape is near bottom of screen
			bumpyDirectionY = UP;
		}
		else if (bumpyY < 0) {
			// Bumpy shape is near top of screen
			bumpyDirectionY = DOWN;
		}

		// Let's move our two shapes based of the values
		// held by the appropriate ...directionX and ...directionY
		// and the speed variable
		triX = triX + speed * triDirectionX;
		triY = triY + speed * triDirectionY;

		bumpyX = bumpyX + speed * bumpyDirectionX;
		bumpyY = bumpyY + speed * bumpyDirectionY;

		// Set the position of the shapes
		tri.setPosition(triX, triY);
		bumpy.setPosition(bumpyX, bumpyY);

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

		// Draw our game scene
		window.draw(tri);
		window.draw(bumpy);

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

	return 0;
}

Run the demo by clicking the Local Windows Debugger button.

Try changing the value of speed by a significant amount, perhaps to .5 and watch how the shapes dramatically speed up.

Now we can analyse the code a bit at a time.

Analyzing the code

[widgets_on_pages id=”udemy_advert_cpp_2″][widgets_on_pages id=”udemy_code_details”]
The first thing we see in the code we have seen before. Two

#include

directives to make available the necessary files to make a basic Windows program and the SFML graphics module. Then we enter the

main

function and our code will begin to be executed.

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

// This is where our game starts from
int main()
{

First, we make a window using an SFML

RenderWindow

class. This we do very slightly differently to how we did it before. Notice we declare two variables

windowWidth

and

windowHeight

. We initialize them to

and

respectively. We then use these two variables in the line of code that creates a window. This, of course, will have the effect of creating a window for our game that is 1000 pixels wide and 700 pixels high.

We will see what advantage having these two variables will bring us, soon.

// Make a window that is 1000 by 700 pixels
// And has the title "Conditions and branching demo"
// Change the resolution if it is unsuitable for you

int windowWidth = 1000;
int windowHeight = 700;

sf::RenderWindow window(sf::VideoMode(windowWidth, windowHeight), "Conditions and branching demo");

Next, we make some shapes using the SFML

CircleShape

class. First, slightly counter-intuitively we make a circle called

tri

? The next line of code sets the number of points using the

setPointCount

function, to 3. This is how we can make a whole variety of different shapes using SFML. Simply set the number of points and you have the shape you require. By setting three points we get a triangle.

Next, we create another

CircleShape

object and call it

bumpy

. We set the number of points at

. If you ran the code you will have seen you get something much more like a circle, albeit quite a bumpy circle, hence the name.

Lastly, in this block of code, we declare and initialize some variables to hold the horizontal and vertical locations of our two shapes;

tri

and

bumpy

. We name the variables appropriately as

triX

triY

bumpyX

and

bumpyY

. What is perhaps more interesting is the values to which we initialize them.

The

triX

and

triY

variables are both set to zero and so when used to position the

tri

shape will be in the top left corner of the screen. We initialize the

bumpyX

and

bumpyY

variables with

windowWidth

and

windowHeight

respectively. As

windowWidth

and

windowHeight

, as you would expect, contain the width and height of our window; when these variables are to set the position of the bumpy shape, it will be in the bottom right corner of the screen.

// Let's make a few shapes
// define a circle with radius = 100
// Our new circle is called "tri"!!??!!
sf::CircleShape tri(100);

// A circle with 3 points
// There is a clue in the variable name
tri.setPointCount(3);

// Here is another "circle"
sf::CircleShape bumpy(100);
bumpy.setPointCount(15);

// Now lets have some variables for their positions (x and y)
float triX = 0;
float triY = 0;

float bumpyX = windowWidth;
float bumpyY = windowHeight;

Now we see something totally new to us. We declare four

float

variables as we have done on other occasions but each of the lines of code is prefixed with the

const

keyword. This makes the value that we initialize the variable to, unchangeable, constant. Technically speaking they are not actually variables(because they can’t vary); they are constants.

Now look at the values that we give these constants. Either -1 or 1. The exact use for these we will soon see. As a kind of advanced explanation, we use these values because when you multiply something by one it remains the same and when you multiply something by minus one it becomes its inverse. This simple fact is going to be useful.

It is a convention to name constants in all upper-case characters.

// Here are some variables that can never change.
// Thet are called constants.
// We make their names all uppercase to remind us.
// We use the const keyword to make them constant.
// We will see their purpose soon.
const float LEFT = -1;
const float RIGHT = 1;
const float UP = -1;
const float DOWN = 1;

Now we declare four more

float

variables, one for both the horizontal and vertical directions of travel for each of our two shapes. Notice that we assign their starting values using one of our four constants. These represent the starting directions of travel of our two shapes.

Lastly, in this next block of code, we declare and initialize a

speed

variable at

.5

. This will be the number of pixels per frame that our shapes will move at. We will see, however, that we can modify this value using the following variables:

```
triDirectionX
```
,
```
triDirectionY
```
,
```
bumpyDirectionX
```
and
```
bumpyDirectionY
```
,

in order to make our shapes bounce all over the place.

// The direction is not constant
// tri starts with RIGHT and DOWN
float triDirectionX = RIGHT;
float triDirectionY = DOWN;

// The direction is not constant
// bumpy starts with LEFT and UP
float bumpyDirectionX = LEFT;
float bumpyDirectionY = UP;

// How fast will they move
float speed = .1;

Next, we enter the loop that will be continually repeated to create the frames of our game. We will finally demystify the details of loops in the next C++ tutorial but for now, all we need to know is everything in the remainder of our code is repeated over and over at least hundreds of frames per second.

// This "while" loop goes round and round- perhaps forever
// It only stops when the player closes the window
while (window.isOpen())
{

This next code we have also seen before and it causes our game to exit if the player closes the window. The next working project will go into this in greater detail including handling more input from the player.

// Has the player closed the game window?
sf::Event event;
while (window.pollEvent(event))
{
	if (event.type == sf::Event::Closed)
		// Someone closed the window- bye
		window.close();
}

This next block of code is the main learning point. Let’s examine the first

if

statement and then we can quickly understand them all. The code

if(triX > windowWidth)

tests for the

triX

variable being greater (higher) than the

windowWidth

variable. If the

triX

variable is greater then we can safely assume that the

tri

shape is about to disappear off of the right-hand side of the screen. Now look at the code that executes inside the if block should that condition be true. The code

triDirectionX = LEFT

assigns to

triDirectionX

the value in the

LEFT

constant, which is -1. Exactly what this does for us will become apparent in the next block of code

Before the next block of code, however, quickly look at the rest of the

if

statements. They all look for one of our shapes either exceeding the values stored in

windowWidth

windowHeight

or going below (less than) zero. In each case, the appropriate value,

LEFT

RIGHT

UP

DOWN

is assigned to the variable

triDrirectionX

triDirectionY

bumpyDirectionX

bumpyDirectionY

The other thing to observe is that the

if

statements are paired with

else if

statements. This is because we know that, if for instance

triX

IS greater than

windowWidth

then it is a waste of time also checking whether

triX

is less than zero, in the same frame.

Take another look at the code that follows and if necessary refresh your memory with the following two C++ tutorials.

// Handle the ai, physics and process updates
// Watch out for collisions with the edge of the screen

// First the tri shape
if (triX > windowWidth) {
	// Triangle is near right of screen
	triDirectionX = LEFT;
}
else if (triX < 0) {
	// Triangle is near left of screen
	triDirectionX = RIGHT;
}

if (triY > windowHeight) {
	// Triangle is near bottom of screen
	triDirectionY = UP;
}
else if (triY < 0) {
	// Triangle is near top of screen
	triDirectionY = DOWN;
}

// Now for bumpy
if (bumpyX > windowWidth) {
	// Bumpy shape is near right of screen
	bumpyDirectionX = LEFT;
}
else if (bumpyX < 0) {
	// Bumpy shape is near left of screen
	bumpyDirectionX = RIGHT;
}

if (bumpyY > windowHeight) {
	// Bumpy shape is near bottom of screen
	bumpyDirectionY = UP;
}
else if (bumpyY < 0) {
	// Bumpy shape is near top of screen
	bumpyDirectionY = DOWN;
}

In the next code, all our hard work comes together. We manipulate each of the x and y coordinates of both of our shapes using the following formula:

coordinate x = coordinate x + speed * direction

A specific example we demonstrate better what is happening. If we assume the

triX

coordinate is currently equal to 120. That is, 120 pixels across from the left of the screen and it is travelling left. Where will we draw the

tri

shape on the x axis this frame? The sum goes like this:

new x location = 120 + .1 * -1

Just for clarity, the 120 is the current coordinate, the .1 is the value of the speed variable and the -1 is the value of

triDirectionX

because

LEFT

would have been assigned to it when it reached the far right of the screen. The answer is therefore:

new x location = 119.9

We can see that the coordinate is indeed moving steadily to the left.

This formula is repeated for each of the horizontal and vertical locations of both of our shapes.

Finally at the end of this block of code we call

setPosition

on each of our shapes to move them to their newly calculated positions.

// Let's move our two shapes based of the values
// held by the appropriate ...directionX and ...directionY
// and the speed variable
triX = triX + speed * triDirectionX;
triY = triY + speed * triDirectionY;

bumpyX = bumpyX + speed * bumpyDirectionX;
bumpyY = bumpyY + speed * bumpyDirectionY;

// Set the position of the shapes
tri.setPosition(triX, triY);
bumpy.setPosition(bumpyX, bumpyY);

In this last block of code, we clear the screen and actually draw the two shapes.

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

		// Draw our game scene
		window.draw(tri);
		window.draw(bumpy);

		// Show everything we just drew
		window.display();

	}// This is the end of the "while" loop

	return 0;
}// End of the program

Summary and what’s next?

That was a big chunk of code but hopefully nothing too complicated. We now have shapes that bounce around the screen. We achieved this by moving the shapes each frame by a magnitude of .1 but by multiplying that magnitude by either 1 or -1 we controlled their up, down, left, right headings. We also used constants for the first time. Note that we could have not bothered with the constants and simply hard-coded the 1 or -1 values in the

if

statements where we changed the direction of our shapes. However, by using appropriately named constants we make it completely plain what they are for and what their values represent. This becomes more important as our code gets longer, spread over multiple files and more complex.

The next logical step is to read the tutorial on C++ loops which will be followed up by another SFML project where we will expand again on the functionality of our games.

Game variables demo: moving circles

John Horton — Wed, 11 Nov 2015 11:12:44 +0000

In this mini-project we will get to experiment with how we can use C++ variables in our games. We will play around with some

float

variables and see how they can be used with the SFML

CircleShape

class to put circles on the screen. We will then see how we can use what we learnt in the manipulating C++ game variables tutorial to move them around the screen. Kind of like giant pong (without the paddles). If you don’t know what a class is yet it doesn’t matter. We will see some neat things in action but learn about what is going on behind the scenes in a later tutorial.

[widgets_on_pages id=”udemy_advert_cpp_1″][widgets_on_pages id=”udemy_code_details”]

About this project

Skill level 1
Time to complete 30 minutes

New concepts

Using C++ variables
Changing C++ variables
Using a Visual Studio project template
Another look at the main game loop
Brief introduction SFML event handling
SFML CircleShape
SFML setFillColor

Assumed previous experience

Basic proficiency with Windows
Setup SFML and Visual Studio development environment
Building your first SFML game project

To get started we need to create a new project complete with all the required properties to work with SFML. If you haven’t completed the Building your first SFML game project you will need to do that first. In that last project we created a Visual Studio project template so that starting a new SFML project is now a two minute job instead of a half an hour long chore.

Open Visual Studio and from the main menu choose File | New Project. In the left-hand menu click C++ and you will see the following options.

Select the HelloSFML template as highlighted in the previous image. Name your project Variables Demo as also highlighted in the above image. Now click OK.

Right-click the HelloSFML.cpp file under the Source Files heading from the right-hand Solution Explorer window. Choose Rename and rename the file to Main. This is a more appropriate name as this will indeed be our “main” source file. Open Main.cpp by double-clicking it. Now delete all of its contents as we will be starting fresh and discussing all of the code as well.

The only thing we need to do now is to copy all the .dll files to the current project’s working folder.

[widgets_on_pages id=”bcgp_cfgp_gpp”]

Copying the .dll files to the project folder

My project folder is D:\Visual Studio Stuff\Projects\Variables Demo\Variables Demo. 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 of the two locations 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\Variables Demo\Variables Demo. Don’t drag and drop them because that will move them and they will be harder to find when we do the next project.

The actual Code

Add the entire starting code for this variables demo by copy and pasting the code below. Unlike when we were just doing a “hello world” SFML project, this time, we will discuss all sections of the code. Some aspects like variables, because they are the real topic of this mini-project, we will make sure we know exactly what is going on. Some of the other aspects we will look at from a distance just to get a feel for what is happening and then revisit them after we have completed the related C++ tutorials.

Be sure to read all of the comments and the code. It won’t all make sense but that doesn’t matter as we will break it down into chunks and go through it all soon. Here is the code to copy and paste into Main.cpp.

// 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 

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

	// Make three circles with 50 pixels radius
	// called circleRed, circle Green and circleBlue
	sf::CircleShape circleRed(50);
	sf::CircleShape circleGreen(50);
	sf::CircleShape circleBlue(50);

	// Color the circles appropriately
	circleRed.setFillColor(sf::Color(255, 0, 0));
	circleGreen.setFillColor(sf::Color(0, 255, 0));
	circleBlue.setFillColor(sf::Color(0, 0, 255));

	// Here's the variables stuff
	float xGreen = 200;
	float yGreen = 200;

	float xBlue = 300;
	float yBlue = 300;

	// Position the red circle at x,y 100,100 "Hard-coded"
	circleRed.setPosition(100, 100);

	// Position the green circle at the postion -
	// stored in xGreen and yGreen
	circleGreen.setPosition(xGreen, yGreen);

	// Position the blue circle at the postion -
	// stored in xBlue and yBlue
	circleBlue.setPosition(xBlue, yBlue);

	// Now all our circles are ready to draw -
	// we can enter the main game loop
	// This "while" loop goes round and round...
	// until player closes window
	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();
		}
                // End user input detection

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

		// Process game logic, AI, movement etc
		// We will add some new code here in a minute!!!!!!

        // End of new code

		// Draw our game scene here
		//Draw the cirlces
		window.draw(circleRed);
		window.draw(circleGreen);
		window.draw(circleBlue);

		// Show everything on the screen
		window.display();

	}// This is the end of the "while" loop

	return 0;
}

Running the demo

Now click the button shown in the next image to run our Variables Demo project.

Wow, three circles!

Wouldn’t it be cool to make them move? We will soon by manipulating the variables but first, let’s understand the code we have written so far.

Explaining the code block by block

At the top of the Main.cpp file we have a bunch of comments and then we have two

#include

directives. These make available other files into our project. Sometimes we will add

#include

directives for code that we have written ourselves and other times, like now we include other people’s code. The

stdafx.h

file is a usual suspect of a Windows program and nothing to do with games. I suggest for now you just accept that we need it but if you’re really curious you could do a Web search for its purpose.

More interesting is the

SFML/Graphics.hpp

file. This is a header file. We know it is a header file because of its

.hpp

file extension. Header files are the files where we declare the format of the C++ code which does the actual work. This sounds a bit odd but will make sense when we learn about functions in a later tutorial. The reason we need to include

Graphics.hpp

is because it declares some SFML classes and functions which we use in this project.

At this stage, we can think of a class as a container for our code and we can think of a function as part of a class which performs a specific task.

CircleShape

is a class in this header file,

setFillColor

and

setPosition

are both functions from this header file. We will look more closely at these soon in this tutorial. Take another look at the code we have just discussed.

// 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

This next code is where the code begins execution from. When the player double-clicks on our .exe in a finished game or we click the Local Windows Debugger button, this is where it starts from. All C++ programs have an

main()

entry point. Actually

main

is itself a function.

// This is the main C++ program- Duh!
// It is where our game starts from
int main()
{
    ...

In the next block of code, we see the slightly daunting

sf::RenderWindow window(sf::VideoMode(800, 600), "Variables Demo");

line of code. For now, we just need to know that it will create a window that is 800 pixels by 600 pixels and has a title of Variables Demo.

Next, we create three circles. Or, more specifically three

CircleShape

objects. The exact way this works isn’t important at this stage except that the code is able to make these

CircleShape

objects because we

#included Graphics.hpp

. What is more important to us right now is that these three

CircleShape

objects have names, very much like we have variables with names we can also create objects, from classes and give them a name. The names are

circleRed

circleGreen

and

circleBlue

. The

inside the brackets

()

is the radius we would like our

CircleShape

objects to have, in pixels. Try changing one of them now and re-run the project. Don’t worry about understanding objects and classes, just note that we have three

CircleShapes

with names.

Study the code we have just discussed one more time.

// Make a window that is 800 by 600 pixels
// And has the title "Variables Demo"
sf::RenderWindow window(sf::VideoMode(800, 600), "Variables Demo");

// Make three circles with 50 pixels radius
// called circleRed, circle Green and circleBlue
sf::CircleShape circleRed(50);
sf::CircleShape circleGreen(50);
sf::CircleShape circleBlue(50);

In the next block of code, you can see we use our object names followed by

setFillColor

. As mentioned previously,

setFillColor

is a function (code that does something) and we are able to use that function on each of our three objects. When we do this we say we are calling the function. Basically, we are executing the C++ code in that function. Notice in the brackets following the

Notice in the brackets following the

setFillColor

function call it looks a little convoluted but each has a set of three numbers. These three numbers are values for red, green and blue respectively. We can think of this as a mixing palette. And depending upon the amounts of each color that are mixed in determines the color that is made. The

setFillColor

function then makes the circle in question into that color. Each RGB color value ranges from 0 (none of that color) to 255 (strongest possible value of that color). So, 255,0,0 makes red; 0,255,0 makes green and 0,0,255 makes blue. Understanding the RGB color model at this point isn’t important. If you just about get that calling

setFillColor

on a

CircleShape

object allows you to set its color we can move on.

Study the code block we have just discussed and then we will look at the next bit of code.

// Color the circles appropriately
circleRed.setFillColor(sf::Color(255, 0, 0));
circleGreen.setFillColor(sf::Color(0, 255, 0));
circleBlue.setFillColor(sf::Color(0, 0, 255));

In the next block of code, we are initializing our four

float

variables with values, just like we did in the Game variables in C++ tutorial. What is more interesting is how we put those variables to work in the code block that comes after it. Make sure you are comfortable with initializing the variables in this next block of code then move on.

// Here's the variables stuff
float xGreen = 200;
float yGreen = 200;

float xBlue = 300;
float yBlue = 300;

Now we see the

setPosition

function being called on each of our

CircleShape

objects in turn. When we call

setPosition

circleRed

we use the values

100, 100

. These values are passed to the

setPosition

function and

circleRed

will be drawn at the screen coordinates 100 pixels on the x-axis and 100 pixels on the y-axis.

Next, we call

setPosition

on the

circleGreen

object. The difference here is that we don’t use actual, real values; we use variables that contain values.

circleGreen.setPosition(xGreen, yGreen)

will draw the circle at 200 pixels on the x-axis and 200 pixels on the y-axis. This is because the

xGreen

and

yGreen

variables store the values 200 and 200. At first glance a commonly asked question might be, “Why bother with the variables? We could have just passed in the values 200, 200″.

The simple answer is that when we use variables instead of hard-coded values, we can change them while the game is actually running.

Let’s quickly finish explaining the last few blocks of code then we will see how this helps us. After

circleGreen.setPosition

is called using the

xGreen

and

yGreen

variables we then call

circleBlue.setPosition

with the

xBlue

and

yBlue

variables. As these two variables were both initialized to 300 the position of the circle is set to the x and y-axes accordingly. Study the code we have just discussed.

// Position the red circle at x,y 100,100 "Hard-coded"
circleRed.setPosition(100, 100);

// Position the green circle at the postion -
// stored in xGreen and yGreen
circleGreen.setPosition(xGreen, yGreen);

// Position the blue circle at the postion -
// stored in xBlue and yBlue
circleBlue.setPosition(xBlue, yBlue);

We are going to brush over this next code until we have covered a later tutorial. Here is the important parts explained. The code

while (window.isOpen())

is the start of the main game loop which is repeated over and over again. It processes all the ai, physics, user input and draws the scene. We will aim to keep this loop running at around 60 frames per second (FPS). For now, with this simple code, it is more likely running at thousands of frames per second.

There is another loop within this loop that begins

while (window.pollEvent(/event))

. This short code loops through all the messages that might have been received from the operating system. Sometimes there will be zero messages, other times there might be many. We can choose which ones we care about and respond to them. It is here where we will handle the player’s input, moving the game character, quitting, etc. In this code, we just handle what happens when the player closes the window and quits the program. To properly understand this code we need to learn a bit more C++ but take a look at it anyway the code isn’t entirely unfathomable.

// Now all our circles are ready to draw -
// we can enter the main game loop
// This "while" loop goes round and round...
// until player closes window
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();
	}
        // End user input detection

Now we clear whatever we drew in the last frame with

window.clear()

. Then we draw our circles

circleRed

circleGreen

and

circleBlue

by calling

window.draw

for each circle in turn. Remember that at this point our program has already executed the code to color and position these circles. Also remember when we run this code; although we are looking at three static circles they are actually being rubbed out and redrawn thousands of times per second.

The final bit of code in this block is the closing

of the while loop that started with

while (window.isOpen())

Study this next code and as you do identify the code comments that say

// We will add some more code here in a minute!!!!!!

and the next code comment that says

// End of new code

. It is between these two lines that we will add some more code soon. Study the code we have just discussed.

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

	// Process game logic, AI, movement etc
	// We will add some more code here in a minute!!!!!!

    // End of new code

	// Draw our game scene here
	//Draw the cirlces
	window.draw(circleRed);
	window.draw(circleGreen);
	window.draw(circleBlue);

	// Show everything on the screen
	window.display();

}// This is the end of the "while" loop

The

return 0

line of code quits the entire program. So when we call window.close() the main game loop ends and execution comes to this line and it’s all over. We will explore how the loop control works in more detail in a later tutorial.

	return 0;
}

Making the circles move

[widgets_on_pages id=”udemy_advert_cpp_2″][widgets_on_pages id=”udemy_code_details”]
Now add this next block of code between

// We will add some more code here in a minute!!!!!!

and the next code comment that says

// End of new code

// We will add some more code here in a minute!!!!!!

// Let's manipulate our coordinates variables
// Increase xGreen by one hundreth each game frame
xGreen = xGreen + .01;
// Decrease yGreen by one hundreth each game frame
yGreen = yGreen - .01;

// Increase xBlue by three, hundreths each game frame
xBlue = xBlue + .03;
// Increase yBlue by three, hundreths each game frame
yBlue = yBlue + .03;

// Position the green circle at the postion -
// stored in xGreen and yGreen
circleGreen.setPosition(xGreen, yGreen);

// Position the blue circle at the postion -
// stored in xBlue and yBlue
circleBlue.setPosition(xBlue, yBlue);

// End of new code

Now click the button shown in the next image to run our Variables Demo project again.

And their off.. Each time through the loop the values of

xGreen

yGreen

xBlue

and

yBlue

are modified. Then when we call

setPosition

again the circles are in those new locations when the scene is drawn. It is because the change is gradual over time that we see them move smoothly.

What is happening here is very simple yet powerful. It demonstrates in the simplest way possible how every game’s animation works.

Update the scene
Draw the scene
Repeat

The code

xGreen = xGreen + .01

adds .01 onto the value stored in

xGreen

. The code

yGreen = yGreen - .01

subtracts .01 from the value of

yGreen

. Also, as we are already aware, this happens many times per second making the circle smoothly animate itself upwards and to the right.

The code

xBlue = xBlue + .03

adds .03 onto the value stored in

xBlue

. The code

yBlue = yBlue + .03

adds .03 to the value stored in

yBlue

. As with

circleGreen

this happens many times per second making the blue circle smoothly (but faster than

circleGreen

) animate itself down and to the right.

Things to do and what’s next?

Try playing with the values that we use to move the circles to make them faster or head in different directions. What happens when we move objects by different amounts on the x-axis than that of the y-axis.

Something to consider about the code we have just written is this: If we let the program run for just a short time the moving circles will disappear into oblivion. We need a way to ‘know’ when they are going somewhere we don’t want them to go so we can change their behavior.

That’s as far as this tutorial will explore. The next logical step and part of the solution to the problem of ‘knowing’ posed above would be to read the Checking for conditions in C++ code where we will get to the bottom of all those odd looking if keywords.

Something else to think about as an aside is to consider the imperfections of the code we have just written. Our green circle moved by .01 pixels per frame. The number of frames that are executed per second is entirely dependent upon how powerful the computer that it is running on. We are going to need to solve this problem. Otherwise, a shooter would be faster (and probably harder) on newer PCs.

Building your first SFML game project

John Horton — Thu, 05 Nov 2015 11:34:33 +0000

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”]

About this project

Skill level 1
Time to complete 40 minutes (downloads might take longer)

New concepts

Project configuration
C++ headers
Libraries
Linking
Visual Studio templates
Some real SFML/C++ code!

Assumed previous experience

Basic proficiency with Windows
Set up a Visual Studio 2017 and SFML development environment

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.

Select All Configurations from the Configuration: drop-down.
Select C/C++ then General from the left-hand menu.
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.

Select Linker then General.
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.

Switch the Configuration: drop down to Debug as we will be running and testing our games in debug mode for now.
Select Linker then Input.
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.
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.

Download this free-for-personal-use font from http://www.1001freefonts.com/28_days_later.font.
Click the Download button.
Unzip the download.
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 

// 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++.

Game Code SchoolGame Code School - » SFML

Building a simple game engine in C++

About this project

New concepts

Recommended preparation tutorials

Assumed previous experience

Creating the simple game engine project in Visual Studio

Planning the simple game engine

Coding the Bob class

Bob.h

Bob.cpp

Coding the Engine class

Engine.h

Engine.cpp

Coding the three stages of the game loop

Handling player input

Updating the game objects

Drawing the scene

Getting the engine started with Main

Conclusion, flaws & what next?

Coding a simple Pong game with SFML

About this project

New concepts

Recommended preparation tutorials

Assumed previous experience

Building the Bat class

Coding bat.h

Coding bat.cpp

bat .cpp part one

bat.cpp part two

Building the Ball class

Coding ball.h

Coding ball.cpp

ball.cpp part one

ball.cpp part two

Coding Main.cpp

Main.cpp part one

Main.cpp part two

Main.cpp part three

Main.cpp part four

Main.cpp part five

Main.cpp part six

What can we do better next time?

Conditions and branching demo: Bouncing shapes

About this project

New concepts

Recommended preparation tutorials

Assumed previous experience

Writing the code

Analyzing the code

Summary and what’s next?

Game variables demo: moving circles

About this project

New concepts

Recommended preparation tutorials

Assumed previous experience

Copying the .dll files to the project folder

The actual Code

Running the demo

Explaining the code block by block

Making the circles move

Things to do and what’s next?

Building your first SFML game project

About this project

New concepts

Recommended preparation tutorials

Assumed previous experience

Getting started

Configuring the SFML project

The slightly dull (but important) configuration stuff

Creating a reusable project template

Copying the .dll files to the project folder

Writing the SFML “Hello World” game code