Timber Game: Adding and Exploring Assets

• Instructions assume use of the book's download bundle assets, but personal assets can replace the provided assets if named the same.
• Project folder location is D:\VS Projects\Timber.

Adding Assets to the Project

• Three new folders, graphics, sound, and fonts, are created in the project folder.
• The contents of "Chapter 1/graphics" from the download bundle are copied into the D:\VS Projects\Timber\graphics folder.
• The contents of "Chapter 1/sound" are copied into the D:\VS Projects\Timber\sound folder.
• The Komika Poster font is downloaded from http://www.1001freefonts.com/komika_poster.font.
• The contents of the downloaded ZIP file are extracted, and the KOMIKAP_.ttf file is added to the D:\VS Projects\Timber\fonts folder.

Exploring the Assets

• The graphics make up the Timber!!! game; this includes:

• axe

• background

• bee

• branch

• cloud

• log

• player

• rip

• tree

• Sound files are in .wav format.

• BFXR generated the sound effects.

• chop.wav: An axe chopping a tree

• death.wav: A "losing" sound

• out_of_time.wav: sound for losing by running out of time

Understanding Screen and Internal Coordinates

• Images on monitors consist of pixels.
• Gaming monitors can have a resolution of 1,920 horizontal pixels by 1,080 vertical pixels.
• Pixels are numbered from the top left of the screen, with horizontal axis 0-1,919 and vertical axis 0-1,079 in a 1,920 x 1,080 setup.
• Specific screen location identified with x and y coordinates.
• The central coordinate of a 1,920 x 1,080 screen is 960, 540.
• Game objects have their own coordinate system, with the origin at 0,0 in the top left-hand corner.
• A visual 2D game object is called a Sprite.
• Sprites have their origin
• If Sprite drawn at specific location, its origin will be located there

Getting Started with Coding the Game

• Open the Timber!!! project in Visual Studio.
• Locate the Timber.cpp file in the Source Files folder using Solution Explorer.
• The .cpp file extension stands for C plus plus.

Making Code Clearer with Comments

• Code starting with // is a single-line comment that the compiler ignores.
• Multi-line comments, or c-style comments can take up more than one line.

The Main Function

• int is a data type, representing an integer.
• main() is the name of the code section, marked by curly braces {}.
• The curly braces' contents are part of main, called a function.
• Every C++ program has a main function; the program's execution starts there.
• return 0; returns execution to original program

Presentation and Syntax

• return 0; is indented to show it’s internal to the main function.
• A semicolon (;) marks the end of an instruction, called a statement.
• Skipping a semicolon causes a syntax error, preventing compilation.
• Code sections indented together are called a block.

Returning Values From a Function

• return 0; moves program execution back to the code that started the function.
• When return 0; executes, the main function exits, ending the program.
• The value after return is sent to the OS.
• Code that starts a function "calls" the function, and the function "returns" the value.
• int main() tells the compiler that the returned value from main must be an int.

Running the Game

• Run the game by clicking the Local Windows Debugger button or pressing F5.
• A black screen will appear because the program starts, executes return 0;, and exits.

Opening a Window Using SFML

• Add highlighted code to open a window using SFML.
• The Timber!!! game will eventually run in this window, which is 1,920 x 1,080 pixels and full screen.
• #include <SFML/Graphics.hpp> is the first new code in new code
• #include adds the contents of another file, or header file before compiling.
• Tells Visual Studio to include the Visual Studio Graphics.hpp file, giving access to features of SFML.
• using namespace sf; comes after the #include directive
• using namespace sf; enables the omission of the sf:: prefix
• VideoMode vm(1920, 1080); creates an object called vm from class called VideoMode, which set ups a resolution of 1920 and 1080
• RenderWindow window(vm, "Timber!!!", Style::Fullscreen); creates an object called window from the SFML-provided class called RenderWindow, and sets up fullscreen
• The window is named Timber!!!

OOP, Classes, and Objects

• OOP stands for object-oriented programming.
• OOP structures code into a class to be reusable, maintainable, and secure.
• Objects are built from classes.
• The properties defined in the class, defines what the objects can do

Using Namespace SF

• When creating a class, it is done in a namespace.
• Its purpose is to distinguish classes from others.
• using namespace sf; enables omitting sf, making the code shorthand notation
• Without it, there'd be over 100 instances of sf in the simple program
• sf::VideoMode... is the full way of using the VideoMode class

SFML VideoMode and RenderWindow

• There are the following lines of code in in the main function VideoMode vm(1920, 1080);
• This creates an object called vm from the class called VideoMode and sets up two internal values of 1920 and 1080 These values represent the resolution of the player's screen.
• There is the following next line of code RenderWindow window(vm, "Timber!!!", Style::Fullscreen);
• A new object called window is created from the SFML-provided class called RenderWindow
• Style::FullScreen makes window object fullscreen

Running the Game

• You will see a bigger black screen flash and then disappear
• Is the 1,920 x 1,080 fullscreen window.
• Add a code that will form the basic structure of every game in this book, known as the game loop.

The Main Game Loop

• Ways to stay in the program until the player wants to quit are needed.
• Should clearly mark out where the different parts of our code will go as the game progresses.
• Must provide a way for the player to exit when they are ready, otherwise the game will go on forever
• Add highlighted code to the existing code and then explain all of it

While Loops:

• There is a new section of code, as follows: while (window.isOpen()) {
• This is a while loop; everything between the first curly bracket and last curly bracket executes over and over, potentially forever.
• It will continue looping until the window object is set to close
• the windows object set to closed is explained in Chapter 4 Loops, Arrays, Switches, Enumerations, and Functions – Implementing Game Mechanics
• Once the window object is set to closed,the execution of the code will break out of the while loop and move on to the next statement
• New statement is, of course, return 0;,which ends the game.

C-Style Code Comments

• See what might look a bit like ASCII art just inside the while loop

Input, update, draw, repeat

• In every game, these are the phases the code will need, every game will need these phases in the code, even if the first project includes the simplest possible version of a game loop
• 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

• Code is identifiable by the Handle the player's input text
• Contains this: if (Keyboard::isKeyPressed (Keyboard::Escape))
• This code checks whether the Esc key is currently being pressed.
• The code uses the window object to close itself if it is.
• next time the while loop begins, it will see that the window object is closed and jump to the code immediately after the closing curly brace of the while loop and the game will exit.

Clearing and Drawing the Scene

• No code in the Update the scene section as of yet, so now is the time to move on to the Draw the scene section.
• the previous frame is currently getting rubbed out, using, using the following code:
• window.clear();
• window.display(); draws all the game objects to a hidden surface ready to be displayed.
• When this display code flips from the previously displayed surface to the newly updated this is known as double buffering.
• Guarantees that the scene will be complete before it is flipped, preventing a graphical glitch known as tearing.
• object which all this drawing and clearing functionality is performed, comes from the SFML RenderWindow class.

Running the Game

• If you Run the game now, you will get a blank, full screen window that remains open until you press the Esc key.
• is a stage, we have an executing program that opens a window and loops around, waiting for the player to press the Esc key to exit. Now,

Drawing the game’s background

• Creates the first sprite, the game background
• Draw in between clearing the window and displaying/flipping it.

Preparing the Sprite Using a Texture

• SFML RenderWindow class let us create our window object
• It took care of the functionality that our game’s window needs
• Will examine two more SFML classes that draw sprites to the screen
• 1 perhaps unsurprisingly = "Sprite"
• Other class = "Texture". What is a Texture?
• Graphic stored in memory, on GPU. What do objects from the Sprite class need?
• Need objects from the Texture class to display themselves as an image
• Texture textureBackground; is the first object from the SFML Texture Class created
• textureBackground.loadFromFile("graphics/background.png"); uses the textureBackground object to load a graphic from the graphics folder into textureBackground
  • Path is relative to Visual Studio working directory
• Sprite spriteBackground; the Sprite object Sprite spriteBackground from the SFML Sprite class
• spriteBackground.setTexture (textureBackground); associates the Texture object (backgroundTexture) with Sprite object (backgroundSprite)
• spriteBackground.setPosition(0,0); positions the spriteBackground object in the window object at the 0,0 coordinates
• background.png in graphics folder is 1,920 by 1,080 > will fill entire screen

Memory

• Textures take up graphics memory, and this memory is a finite resource.Furthermore, the process of loading a graphic into the GPU’s memory is very slow
• It is useful to disassociate the actual texture (textureBackground) from any code that we will manipulate during the game loop
• Move graphics, we will do so using the sprite
• The Texture class will sit happily on the GPU, just waiting for a Sprite to tell it where to show itself

Summary

1. Textures take time to load on the GPU
2. Textures can be accessed quickly once on the GPU
3. Sprite objects are associated with a texture
4. Manipulate position + orientation of sprite objects in the scene

• draw sprite object which displays texture associated with it

Double Buffering the Background Sprite

Need to draw sprite and it is associated texture in appropriate place in the game loop.

• Draw with window.draw()

Handling Errors

• Errors will always occur in the project
• Find a way to word the problem / error so you can find an internet search query that solves the problem
• Configuration errors
  • Probably during set up process of Visual Studio, SFML and the project itself
• Compile errors
  • Most common error we will experience going forward.
  • Especially semicolons on ends of lines and subtle changes in upper and lower classes/names of objects
• Link errors
  • Caused by missing SFML d11 files and them not copied to project folder.