Chapter 10. 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 as we did before in the Timber!!! project. What is 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:

  • 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. This is so we can format the HUD and the level up screen.

Add the extra include directive highlighted next so we can make some sstream objects to achieve this:

#include "stdafx.h" 
#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 explained code. To help identify where you should add the code, the new code is highlighted and the existing code is not. You may need to vary the position/size of some text/elements to suit your screen:

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

// Create a view for the HUD
View hudView(sf::FloatRect(0, 0, resolution.x, resolution.y));

// Create a sprite for the ammo icon
Sprite spriteAmmoIcon;
Texture textureAmmoIcon = 
TextureHolder::GetTexture("graphics/ammo_icon.png");
spriteAmmoIcon.setTexture(textureAmmoIcon);
spriteAmmoIcon.setPosition(20, 980);

// Load the font
Font font;
font.loadFromFile("fonts/zombiecontrol.ttf");

// Paused
Text pausedText;
pausedText.setFont(font);
pausedText.setCharacterSize(155);
pausedText.setFillColor(Color::White);
pausedText.setPosition(400, 400);
pausedText.setString("Press Enter 
 to continue");

// Game Over
Text gameOverText;
gameOverText.setFont(font);
gameOverText.setCharacterSize(125);
gameOverText.setFillColor(Color::White);
gameOverText.setPosition(250, 850);
gameOverText.setString("Press Enter to play");

// LEVELING up
Text levelUpText;
levelUpText.setFont(font);
levelUpText.setCharacterSize(80);
levelUpText.setFillColor(Color::White);
levelUpText.setPosition(150, 250);
std::stringstream levelUpStream;
levelUpStream <<
   "1- Increased rate of fire" <<
   "
2- Increased clip size(next reload)" <<
   "
3- Increased max health" <<
   "
4- Increased run speed" <<
   "
5- More and better health pickups" <<
   "
6- More and better ammo pickups";
levelUpText.setString(levelUpStream.str());

// Ammo
Text ammoText;
ammoText.setFont(font);
ammoText.setCharacterSize(55);
ammoText.setColor(Color::White);
ammoText.setPosition(200, 980);

// Score
Text scoreText;
scoreText.setFont(font);
scoreText.setCharacterSize(55);
scoreText.setFillColor(Color::White);
scoreText.setPosition(20, 0);

// Hi Score
Text hiScoreText;
hiScoreText.setFont(font);
hiScoreText.setCharacterSize(55);
hiScoreText.setFillColor(Color::White);
hiScoreText.setPosition(1400, 0);
std::stringstream s;
s << "Hi Score:" << hiScore;
hiScoreText.setString(s.str());

// Zombies remaining
Text zombiesRemainingText;
zombiesRemainingText.setFont(font);
zombiesRemainingText.setCharacterSize(55);
zombiesRemainingText.setFillColor(Color::White);
zombiesRemainingText.setPosition(1500, 980);
zombiesRemainingText.setString("Zombies: 100");

// Wave number
int wave = 0;
Text waveNumberText;
waveNumberText.setFont(font);
waveNumberText.setCharacterSize(55);
waveNumberText.setFillColor(Color::White);
waveNumberText.setPosition(1250, 980);
waveNumberText.setString("Wave: 0");

// Health bar
RectangleShape healthBar;
healthBar.setFillColor(Color::Red);
healthBar.setPosition(450, 980); 
// The main game loop 
while (window.isOpen()) 

The previous code is very simple and nothing new. It basically creates a whole bunch of SFML Text objects. It assigns their colors and sizes, then formats their positions, using functions we have seen before.

The most important thing to note is that we create another View object called hudView and initialize it to fit the resolution of the screen.

As we have seen, the main view object scrolls around as it follows the player. In contrast, we will never move hudView. The result of this is that as long as we switch to this view before we draw the elements of the HUD, we will create the effect of allowing the game world to scroll by underneath while the player's HUD remains stationary.

Tip

As an analogy, you can think of laying a transparent sheet of plastic, with some writing on it, over a TV screen. The TV will carry on as normal with moving pictures, the text on the plastic sheet will stay in the same place regardless of what goes on underneath it.

The next thing to notice, however, is that the high score is not set in any meaningful way. We will need to wait until the next chapter, when we investigate file I/O to save and retrieve the high score.

Another point worth noting is that we declare and initialize a RectangleShape called healthBar that will be a visual representation of the player's remaining health. This will work in almost exactly the same way that the time-bar worked in the last project, except of course, it will represent health instead of time.

In the previous code, there is a new sprite called ammoIcon that gives context to the bullet and clip statistics that we will draw next to it, in the bottom left of the screen.

Although there is nothing new or technical about the large amount of code that we just added, be sure to familiarize yourself with the details, especially the variable names, to make the rest of the chapter easier to follow.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.185.155