Chapter 12: Layering Views and Implementing the HUD

In this chapter, we will get to see the real value of SFML Views. We will add a large array of SFML Text objects and manipulate them, like we did before in the Timber!!! project and the Pong project. What's new is that we will draw the HUD using a second View instance. This way, the HUD will stay neatly positioned over the top of the main game action, regardless of what the background, player, zombies, and other game objects are doing.

Here is what we will do in this chapter:

• Add text and a background to the home/game over screen
• Add text to the level-up screen
• Create the second View
• Add a HUD

Adding all the Text and HUD objects

We will be manipulating a few strings in this chapter. We are doing this so we can format the HUD and the level-up screen with the necessary text.

Add the extra include directive highlighted in the following code so that we can make some sstream objects to achieve this:

#include <sstream>
#include <SFML/Graphics.hpp>
#include "ZombieArena.h"
#include "Player.h"
#include "TextureHolder.h"
#include "Bullet.h"
#include "Pickup.h"
using namespace sf;

Next, add this rather lengthy, but easily explainable, piece of code. To help identify where you should add the code, the new code is highlighted, and the existing code is not:

int score = 0;
int hiScore = 0;
// For the home/game over screen
Sprite spriteGameOver;
Texture textureGameOver = TextureHolder::GetTexture("graphics/background.png");
spriteGameOver.setTexture(textureGameOver);
spriteGameOver.setPosition(0, 0);
/...

Updating the HUD

As you might expect, we will update the HUD variables in the update section of our code. We will not, however, do so every frame. The reason for this is that it is unnecessary, and it also slows our game loop down.

As an example, consider the scenario when the player kills a zombie and gets some more points. It doesn't matter whether the Text object that holds the score is updated in one-thousandth, one-hundredth, or even one-tenth of a second. The player will discern no difference. This means there is no point rebuilding strings that we set for the Text objects every frame.

Therefore, we can time when and how often we update the HUD. Add the following highlighted variables:

// Debug HUD
Text debugText;
debugText.setFont(font);
debugText.setCharacterSize(25);
debugText.setFillColor(Color::White);
debugText.setPosition(20, 220);
std::ostringstream ss;
// When did we last update the HUD?
int framesSinceLastHUDUpdate = 0;
// How often (in frames) should...

Drawing the HUD, home, and level-up screens

All the code in the following three code blocks goes in the drawing phase of our game loop. All we need to do is draw the appropriate Text objects during the appropriate states, in the draw section of the main game loop.

In the PLAYING state, add the following highlighted code:

    //Draw the crosshair
    window.draw(spriteCrosshair);
    // Switch to the HUD view
    window.setView(hudView);
    // Draw all the HUD elements
    window.draw(spriteAmmoIcon);
    window.draw(ammoText);
    window.draw(scoreText);
    window.draw(hiScoreText);
    window.draw(healthBar);
    window.draw(waveNumberText);
    window.draw(zombiesRemainingText);
}
if (state == State::LEVELING_UP)
{
}

The vital thing...

Summary

This was a quick and simple chapter. We looked at how to display the values that are held by variables of different types using sstream and then learned how to draw them over the top of the main game action using a second SFML View object.

We are nearly done with Zombie Arena now. All the screenshots in this chapter show a small arena that doesn't take advantage of the full monitor.

In the next chapter, the final one for this project, we will put in some finishing touches, such as leveling up, sound effects, and saving the high score. The arena can then grow to the same size as the monitor and far beyond.

FAQ

Here is a question that might be on your mind:

Q) Where can I see more of the power of the View class in action?

A) Take a look at the enhanced edition of the Zombie Arena game, in the download bundle. You can use the cursor keyboard keys to spin and zoom the game. Warning! Spinning the scene makes the controls awkward, but you get to see some of the things that can be done with the View class:

The zoom and rotate functionality were achieved with just a few lines of code in the input handling section of the main game loop. You can see the code in the Zombie Arena Enhanced Version folder of the download bundle or run the enhanced version from the Runnable Games/Zombie Arena folder.