[SFML & C++] 4 - Mouse Tracker // Tutorial

This is part of a series of small projects and tutorials using C++ and SFML

https://lptcp.blogspot.com/p/sfml-mini-projects.html

Library version: SFML 3.0.0

IDE: Visual Studio 2022 Community Edition – Download Latest Free Version

C++ Standard: ISO C++20

Set-up: https://www.sfml-dev.org/tutorials/3.0/

My Base Project: https://github.com/l-paz91/SFMLProjects/blob/main/main.cpp

In this project, we'll make a simple app that tracks the mouse movement on the screen and prints the X and Y coordinates. Here's what the finished product will look like:

Github: https://github.com/l-paz91/SFMLProjects/tree/main/MouseTracker

Step 1 - Displaying Text

So first, we need to display some text to the screen. We can do that using SF::Text.

In SFML, you need to create a font as well that you can pass to the text object, otherwise you won't be able to display anything. So let's do that as well:

Step 2 - Getting The Mouse Coordinates

Next we need to get the mouse coordinates. This is something we can do in our update section.

If you run the program now, the coordinates will update depending on where the mouse is, relative to the top left-hand corner of the window.

Your mouse can go outside of the window though and it will still report where it is on the screen. Depending on the type of app you're building, you may want to allow the mouse to go outside the screen, or you may want the window to have full focus of the mouse.

As I'm a games developer, usually the mouse should stay inside the window, so I'm going to do that.

Here I used a function on the main window itself to "lock" the mouse inside the window, whilst the window has focus. I find this to be quite annoying as I like to use most things in windowed mode, but to each their own. Grabbing the mouse may cause some issues if you have a 3D camera as the mouse may need to "go outside" the window in order to rotate the camera properly.

In the update section, I modified the code slightly to check if the window has focus, so we only display the coordinates when it does. 

Another slightly different way to do this is use some events:

Here I created a bool to track if the mouse was in the window. I then used the events sent by the library to set that bool and used that instead of checking if the window has focus. This is an approach I prefer, however it really depends on the application. Sometimes you really don't want the mouse leaving the window.

You can read more about these classes here:

https://www.sfml-dev.org/documentation/3.0.1/classsf_1_1Window.html

https://www.sfml-dev.org/documentation/3.0.1/classsf_1_1Event.html

https://www.sfml-dev.org/documentation/3.0.1/Mouse_8hpp.html

[SFML & C++] 3 - Real Time Clock // Tutorial

This is part of a series of small projects and tutorials using C++ and SFML

https://lptcp.blogspot.com/p/sfml-mini-projects.html

Library version: SFML 3.0.0

IDE: Visual Studio 2022 Community Edition – Download Latest Free Version

C++ Standard: ISO C++20

Set-up: https://www.sfml-dev.org/tutorials/3.0/

My Base Project: https://github.com/l-paz91/SFMLProjects/blob/main/main.cpp

In this project we'll be creating a simple app that displays the current time on your system. Here's what the finished product will look like:

Github: https://github.com/l-paz91/SFMLProjects/tree/main/RealTimeClock

Step 1 - Displaying Text

So first, we need to display some text to the screen. We can do that using SF::Text.

In SFML, you need to create a font as well that you can pass to the text object, otherwise you won't be able to display anything. So let's do that as well:

Step 2 - Getting The System Time

Go to your project settings. Make sure your C++ standard is set to 20 as we'll be using some functions from the new chrono library.

First we'll need some new header files:

Then, inside our game loop, we need to get the current time:

Now, I'm normally not a fan of using auto ( I generally just don't like type obfuscation), however, std::chrono can return some absolutely disgusting looking type names so in that case, I allow it.

So we have the current system time but it's not in any format we can display that makes sense to humans. Let's do that:

Here, I'm using C++20's std::chrono::system_clock::now() to get the current time, which is much nicer than the old C-style time functions. The localtime_s function converts our raw time value into a structured tm format that breaks down the time into hours, minutes, seconds, and other components. This is a safer version of the older localtime function. I then use a stringstream with std::put_time to format this structured time into the desired HH:MM:SS string format, which I feel is much cleaner that manually building strings.

I'm a big fan of stringstreams and you'll see me use them a lot in my code examples. Pretty much anytime I need to do string manipulation, I use stringstreams.

Compile and done!

Exercise 

As a game engine programmer, I'm all about optimisation. 

Since std::chrono::system_clock::now() always returns the current time, we always have the correct clock display regardless of the framerate. But, we're getting the time and updating the text object/doing text manipulation every frame when really we don't need to (for the purposes of this exercise anyway).

Change this program to only do the time calculations and string formatting once per second.

Hint - You can use code from my previous tutorial (Displaying the Framerate) or use SFML built in types like sf::Time.

If you get stuck: Exercise Solutions. There are many ways to do this; this is just one way of doing it.

[SFML & C++] 2 - Framerate Display // Tutorial

This is part of a series of small projects and tutorials using C++ and SFML

https://lptcp.blogspot.com/p/sfml-mini-projects.html

Library version: SFML 3.0.0

IDE: Visual Studio 2022 Community Edition – Download Latest Free Version

C++ Standard: ISO C++17

Set-up: https://www.sfml-dev.org/tutorials/3.0/

My Base Project: https://github.com/l-paz91/SFMLProjects/blob/main/main.cpp

In this project we'll be creating a simple app that displays the frame-rate on the screen. This can be a useful tool for developers when debugging an application. Here's what the finished product will look like:

Github: https://github.com/l-paz91/SFMLProjects/tree/main/FramerateDisplay

Step 1 - Displaying Text

So first, we need to display some text to the screen. We can do that using SF::Text.

In SFML, you need to create a font as well that you can pass to the text object, otherwise you won't be able to display anything. So let's do that as well:

In this project, I'm just using a default font on my PC, but you can download and use any font you like. If you run the program, you can see the text but currently it's not updated by anything.

Step 2 - Calculating Frames Per Second

SFML doesn't have a built in way to do this but we can use some simple arithmetic to achieve it.

That's a lot of frames. All we're doing here is adding Delta Time together each time we go round the loop. Once Delta Time reaches 1 (or just over it), we reset our variables back to 0 so we can accurately measure up to 1 again.

This is showing that my PC can process and render around 2000 frames in 1 second. That sounds impressive but this app isn't exactly doing much.

Note - Avoiding Framerate Dependency

Have you ever played a game and noticed your movements slow down or speed up depending on the current state of your framerate? This is framerate dependency. I first noticed it when I bought the SNES mini and played Super Mario World on an LCD TV for the first time and my muscle memory timing was all off due to how slow the game was. I thought I had mis-remembered how the game played as a child but then I remembered that CRT monitors have insane refresh rates compared to a 2010 LCD TV. Back then, SNES games were tied to how much you could process during V-Blanks (the time it took the ray gun to get back to the top of the screen), so Super Mario World ran much faster when I played it as a kid on my 14" CRT.

The framerate counter we've implemented shows how quickly your PC can process and render frames. However, if you tie game movement or mechanics directly to frames (like moving an object 5 pixels every frame), your game will run faster on powerful computers and slower on weaker ones.

This creates an inconsistent experience for players.

The solution is something you may have already seen (I implemented it in my first SFML tutorial here: https://lptcp.blogspot.com/2025/04/sfml-c-dvd-logo-screensaver-tutorial.html).

It's to scale your movement and actions by Delta Time. So instead of

object.move(5, 0) // 5 pixels per second (very fast if not connected to deltaTime)

use

object.move(5 * deltaTime, 0) // 5 pixels per second becomes very slow when scaled by deltaTime so you might want to make this much higher

This will move your object at the given speed regardless of framerate. This will make your game run at the same speed for everyone but it doesn't stop players with powerful PCs having a smoother experience than those with weaker PCs.

If you'd like to read more about this, here's a great resource:

https://gameprogrammingpatterns.com/game-loop.html

[SFML & C++] 1 - DVD Logo Screensaver // Tutorial

This is part of a series of small projects and tutorials using C++ and SFML

https://lptcp.blogspot.com/p/sfml-mini-projects.html

Library version: SFML 3.0.0

IDE: Visual Studio 2022 Community Edition – Download Latest Free Version

C++ Standard: ISO C++17

Set-up: https://www.sfml-dev.org/tutorials/3.0/

My Base Project: https://github.com/l-paz91/SFMLProjects/blob/main/main.cpp

For those of you who may not have grown up with DVDs, they came with a screensaver that consisted of the DVD logo bouncing around the screen. It became something of a meme as the logo would sometimes get tantalisingly close to hitting a corner but it never would.

This is a simple project that will get you loading in images and dealing with simple collisions. Here's what the finished product will look like:

Github: https://github.com/l-paz91/SFMLProjects/tree/main/DVDLogoScreensaver

Step 1 - Displaying the Image

First off. In SFML you need a texture to store your image, and then your objects use the texture to display the image. So let's create a texture.

Now we've got a texture. We need an object that can display it. I'll use a sprite.

We'll display the logo in the Render section of the game loop.

The default colour of an SFML background is black. My Png image is black so we won't be able to see it. We could try and change the colour of the logo itself but it's black so even if we multiply by another colour, it will still be black. The setColour() methods in SFML work by changing the hue. So we'll just simply change the background colour for the moment.

Step 2 - Making It Move

In making it move, there are 2 variables we need to think about; the direction and the speed.

We can represent the direction using a Vector and the speed with a float:

To make the logo move, we need to update the position of it each frame. We do that update in the update section before rendering.

If you play, the dvd logo starts moving across the screen diagonally and then goes off the screen. That's because we haven't told it to stop when it hits the "edge".

Also, the dvd logo doesn't move smoothly, that's because the direction and speed should be multiplied along with the delta time. This makes sure that the logo's movement is adjusted according to how much time has passed since the last frame was rendered, ensuring smooth movement at varying frame rates.

With that done, let's add some simple collision.

Step 3 - Simple Collision

I'm going to create a move function above main to store this logic.

I also made our window sizes global constants. We also need a clock for timing so we can make the movement smooth.

Now we just need to call the function:

Without using Delta Time, I had to set the speed very small (0.05) initially, but now you can increase the speed to whatever you like (otherwise it will look like it's not moving).

Optional quest - I've left you a quirk. Find it and fix it.

Step 4 - Extras

Lets do something a little extra though, when the logo hits an edge, lets change the colour of the background. We could try and change the colour of the logo itself but it's black so even if we multiply by another colour, it will still be black.

First lets create a variable to store this in

Our function now needs another argument, lets pass in the colour. We're making it a reference so we can change it in the function and it will stay the new colour between frames.

I made it a small function that we can call. We now just need to modify a few places in the main loop:

And done! That's a small project done in a hundred lines or so. You could also do other things when it hits the side of the screen like play a sound, change the image itself, increase the speed. You've then basically got a very basic version of Pong going on then....

(note, the gif is at a lower fps so the movement isn't smooth)

Chapter 5 // Exercises 1-5 - The C++ Programming Language

For this exercise I'm using Visual Studio Community 2022 and the header file std_lib_facilities:

https://github.com/l-paz91/TheCppProgrammingLanguage/blob/main/std_lib_facilities.h

The exercises can be found online and are not actually in the book:

https://www.stroustrup.com/4thExercises.pdf

Chapter 5 - A Tour of C++: Concurrency and Utilities

Exercise 1

When first reading this chapter, keep a record of information that was new or surprising to you. Later, use that list to focus your further studies.

1. Threading is still an area I don't really do all that much with. I'm aware of race conditions (and the need to ensure game code is secure for multi-threaded code) but I don't touch on it every day.

2. Async sounds particularly useful. I've never used that in my own projects yet.

Exercise 2

Write a program with two threads: one that writes hello every second and one that writes world! every second.

Github: https://github.com/l-paz91/TheCppProgrammingLanguage/blob/main/Chapter%205/exercise2.cpp

It's a bit mangled but does what the task asks.

Exercise 3

Time a loop. Write out the time in milliseconds. Do this for the default setting of your compiler and for a setting using an optimiser (e.g., -O2 or "release"). Be careful not to have the optimiser eliminate your whole loop as dead code because you did not use a result.

Github: https://github.com/l-paz91/TheCppProgrammingLanguage/blob/main/Chapter%205/exercise3.cpp

I used a function from an exercise from P&P (there's a link in the code) where it adds things to a map and keeps it ordered. Debug took 8272ms and Release took 740ms. I'm always impressed at just how good the compiler is at optimising code.

Exercise 4

Repeat the histogram drawing from example from section 5.6.3 for a normal_distribution and 30 rows.

Github: https://github.com/l-paz91/TheCppProgrammingLanguage/blob/main/Chapter%205/exercise4.cpp

This was a sneaky one. Normal distribution will produce negative numbers. Also, you can only use float, double or real with a normal_distribution. It also taught me about standard deviations.

Exercise 5

Use a regex to find all decimal numbers in a file.

Github: https://github.com/l-paz91/TheCppProgrammingLanguage/blob/main/Chapter%205/exercise5.cpp

.