Timber Game: Adding and Exploring Assets

Adding Assets to the Project

• It's time to integrate them into the project after deciding on the assets.
• It's assumed the assets from the book's download bundle will be used
• Use same file name when replacing default sound or graphic file with your own.
• The steps for adding assets include:
  • Go to the project folder: D : \VS Projects\Timber
  • Create three new folders: graphics, sound, and fonts
  • Copy the contents of Chapter 1/graphics into the graphics folder
  • Copy the contents of Chapter 1/sound into the sound folder
  • Download the Komika Poster font from http://www.1001freefonts.com/komika_poster.font
  • Extract the contents of the zipped download and add the KOMIKAP_.ttf file to the fonts folder

Exploring the Assets

• Graphical assets constitute scene sections for the Timber!!! game.

Screen and Internal Coordinates

• Images viewed on monitors consist of pixels, tiny light dots
• Gaming monitors are often 1,920 pixels horizontally and 1,080 pixels vertically
• Pixels are numbered from the top left of the screen
• In a 1,920 x 1,080 example, pixels are numbered from 0 to 1,919 on the x axis and 0 to 1,079 on the y axis
• Specific screen locations are identified using x and y coordinates when drawing characters, backgrounds, bullets, and text
• A 1,920 x 1,080 screen's approximate center is at position 960, 540
• Game objects have their own coordinate systems, beginning at 0,0 in the top left-hand corner
• Location 0,0 of a character is drawn to position 960, 540 on the screen
• Visual, 2D game objects like characters or zombies are called Sprites, typically made from an image file with an origin

C++ Code and Comments

• The subsequent line observed is int main().
• int represents a data type.
• C++ supports multiple types of data; an int signifies a whole number or integer
• main () is a section of code marked by opening ({) and closing ({) curly braces, referred to as a function
• Every C++ program contains a main function where the running of the program begins.
• The opening curly brace of the function main always begins execution.
• The return keyword, alone or followed by a value, instructs the program to go back to the code that started the function and has importance.
• The running of the program jumps back to the code that initiated the function
• The operating system initiates the main function
• Return 0 indicates that the main function exits and the program ends
• Adding 0 after the return keyword also sends that value to the operating system
• The code responsible for initiating a function is said to "call" the function, while the function "returns" the value

Opening A Window Using SFML

• The code opens a 1,920-pixel by 1,080-pixel full-screen borderless SFML window
• The #include directive directs Visual Studio to add the contents of another file before compiling.
• Some code not written becomes part of the program
• "Preprocessing" refers to adding code from other files
• The file extension .hpp indicates being called a header file
• The #include statement enables preprocessor inclusion of content in the folder named SFML

Understanding Objects

• The code creates a vm object from the videoMode class setting up two internal values, 1920 and 1080
• These values represent the resolution of the player's screen.
• The code creates a window object, which is a new object named window provided from the RenderWindow
• Furthermore, are setting up some values inside the window object.
• A class is like an architectural blueprint, which allows creation of usable objects like houses

The Main Game Loop

• A method to keep the program running until quitting is desired is needed, alongside marking different code sections.
• Add the following highlighted code to the existing code and then going through it:

int main(){
    // Create a video mode object
    VideoMode vm(1920, 1080);
    
    // Create and open a window for the game
    RenderWindow window(vm,"Timber!!!", Style::Fullscreen);
    
    while(window.isOpen())
    {
    }
}

Loops

• Everything between the opening ({) and closing (}) brackets of the while loop will continue to execute, over and over, potentially forever.
• Once the window object is set to close, the execution of the code will break out of the while loop and move on to the next statement

Input, Update, Draw and Repeat

• Although this first project uses the simplest version of a game loop, every game needs these phases in the code.
  • Get the player's input (if any).
  • Update the scene based on things such as artificial intelligence, physics, or the player's input.
  • Draw the current scene.
  • Repeat these steps at a fast-enough rate to create a smooth, animated game world.

Detecting a Key Press

• The following code checks whether the Esc is being pressed:

if (Keyboard::isKeyPressed (Keyboard::Escape))
{
    window.close();
}

Preparing the Sprite

• An object from the Sprite class requires an object from the Texture class to display itself as an image.
• The following highlighted code is to be added:

int main(){
    // Create a video mode object
    VideoMode vm(1920, 1080);
    
    //Create and open a window for the game
    RenderWindow window(vm,"Timber!!!", Style::Fullscreen);
    
    // Create a texture to hold a graphic on the GPU
    Texture textureBackground;
    
    // Load a graphic into the texture
    textureBackground.loadFromFile("graphics/background.png");
    
    // Create a sprite
    Sprite spriteBackground;
    
    // Attach the texture to the sprite
    priteBackground.setTexture (textureBackground);
    
    // Set the spriteBackground to cover the screen
    spriteBackground.setPosition(0,0);
    
    while(window.isOpen())
    {
    }
}

• In the highlighted code, the object called textureBackground from the SMFL Texture class is first created.
• The graphics is loaded from the folder using the textureBackground into textureBackground

Key Notes

• Textures load slow to the GPU.
• Textures are fast access once they are on the GPU.
• Texture is associated with Sprite object.
• Update the scene with position and orientation of Sprite objects
• Draw the Sprite object, which displays the Texture object in the Draw the scene section.

Game with Sprite

• Finally, the new Sprite object (spriteBackground) should be seen after using the double buffering system with window object.

Adding More Sprites

• You can add a tree, bee, and three clouds as sprites to the Timber!!! game.

Preparing, Drawing, and Moving Bee and Clouds

• Bee are created in the same way we created a background and a tree.
• For determining if the bee is active, there is a bool variable.
• There are three bool variables for determining whether each cloud is active and three float variables to hold the speed for each cloud.
• Apart the minor texture issue, the code we have just added is nothing new compared to the bee.

Random Numbers

• Two functions, alongside syntax and steps, are needed to create a random number
• Seeding the random number generator is required to make it not constantly return the same value
• Seed the random number generator with the time

// Seed the random number generator with the time
srand((int)time(0));

• The preceding code gets the time from the PC using the time function, that is, time(0)
• The call to the time function is enclosed as the value to be sent to the srand fuction
• With a conversion cast, the long code does the flowing conversion from one type to another:
  • Gets the time using time
  • Converts it into an int
  • Sends the value to srand, which seeds the random number generator

Timing

• Consistently make game runs smoothly because C++ and SFML are exceptionally fast to draw sprites

Frame Rate Solution

• Determine and use the frame rate from controlling games

 // How fast is each cloud?
float cloud1Speed
= 0;
float cloud2Speed = 0;

// Variables to control time itself
Clock clock;
while(window.isOpen())
{

• Before we can move the bee and the clouds, we need to consider timing.

Time Control

• clock type and name is delcared. with first class name and the object name the the clock type.
• Now, in the update section of the game, add the following new value:

 time dt = clock.restart();

• Then, add following to bee or cloud to give consistent time:

spriteBee.setPosition(spriteBee.getPosition().x - (beeSpeed dt.asSeconds())}, spriteBee.getPosition().y)

Pausing the Code

• To pause the code:

// Start the game
if (Keyboard::isKeyPressed (Keyboard:: Return)){
    pause = false;
}

Time and the HUD

• We can load, assign, and initialize SFML objects from String values.
• Implemenation is to the heads up display (HUD)
• sstream class provides useful implementation is combining Strings and other variable types
• When a different font is chosen from the existing, modification will be needed for existing code.