[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)