Tutorial 1 - Creating a Player Avatar

Open the "_tutorial1" project, and the "source" folder in the Solution Explorer.
Right click on the "_tutorial1" project and select "Set as Startup Project"

Abstract

This tutorial will show you how to create a red box and move it around the screen with the arrow keys

Step 1 - Defining the Variables

The first thing we need to do is conceptually define what the player is. I find it's best to define things by their function and appearance.
Our player's function is to move around. This implies a few things:

the player has a position which changes when it moves
something causes the player to move
the player moves at a certain speed
there may be some limit to where the player can move

For simplicity, our player's appearance (the avatar) is just going to be a square red square.

The player's size, color, and speed can be assumed constant. (unchanging at all times)
I'm going to start by adding these three constants to the project at the top of game.h, under the #include

CU32 PLAYER_SIZE = 32;
CU32 PLAYER_SPEED = 400;
CCOL PLAYER_COLOR = nsColor::RED;

The player's position, as well as the boundaries of the level, can't be constants.
The player's position changes frequently, and the boundaries of the level depend on the screen resolution, which we don't know yet.
I'm also going to add these variables to the cGame struct. The new cGame struct should look like this:

struct cGame : cProgram
{
   GAME_CLASS_BASE;

   V2D playerPosition;
   F64 topBoundary, bottomBoundary, leftBoundary, rightBoundary;

};

Step 2 - Setting up the Game

In game.cpp, there are 4 functions. We will first deal with "void cGame::open()"
This function tells the game what it should do when the EXE first loads.
We want to tell the player where to start, as well as specify the boundaries of where the player can go.
To do this, we are going to give the variables in cGame starting values.
the new open() function looks like this:

void cGame::open()
{
   playerPosition = GRAPHICS.screen_center();

   leftBoundary = 0;
   topBoundary = 0;
   rightBoundary = GRAPHICS.screenWidth;
   bottomBoundary = GRAPHICS.screenHeight;
}

The GRAPHICS module can be accessed by typing in "GRAPHICS."
When the game starts for the first time, the user is prompted, asking what resolution they want to run the game in.
GRAPHICS.screenWidth and GRAPHICS.screenHeight are how we figure out what they specified.
GRAPHICS.screen_center() returns a 2d vector with coordinates half the size of the resolution.

Step 3 - Drawing the Player

Next we need to tell the game to draw the player on the screen.
The third function in game.cpp "void cGame::draw()" tells the game what it should be drawing every frame of the game.
We again use the GRAPHICS module, this time specifying the "draw_box" function, which will draw a box at a specified point on the screen with a specified size, texture, and color tint.
The new draw() function looks like this:

void cGame::draw()
{
GRAPHICS.draw_box( I2D_cv( playerPosition ), PLAYER_SIZE, 0, PLAYER_COLOR );

GRAPHICS.draw_text( I2D( GRAPHICS.screenWidth/2, 8 ), 16, 12, "Tutorial 1 - Creating a Player Avatar" );
}

Step 4 - Moving the Player

The next thing we're going to do is move the player around. There are a number of ways of doing this. I'm going to do it a very quick and dirty way.
I'm going to add four of lines to the "void cGame::update( CF64 TimeStep )" function, each line telling the player to move a certain direction when the corresponding key is pressed.
The new update function looks like this:

void cGame::update( CF64 TimeStep )
{
   if( INPUT.digital_press( nsInput::K_ESC ) ) quit=true;

   if( INPUT.digital_down( nsInput::K_UP ) ) playerPosition.y -= PLAYER_SPEED * TimeStep;
   if( INPUT.digital_down( nsInput::K_DOWN ) ) playerPosition.y += PLAYER_SPEED * TimeStep;
   if( INPUT.digital_down( nsInput::K_LEFT ) ) playerPosition.x -= PLAYER_SPEED * TimeStep;
   if( INPUT.digital_down( nsInput::K_RIGHT ) ) playerPosition.x += PLAYER_SPEED * TimeStep;
}

I'm leaving in the line that allows you to quit with the "Esc" key. from the template.
The first half of each line is an if() statement, which asks the INPUT module if a certain key is pressed, and if so does the second half of the line.
The second half of each line moves the player in some way.
"playerPosition.y" is how far from the top the box is, and "playerPosition.x" is how far from the left.
in each case we either add or subtract the value "PLAYER_SPEED * TimeStep" from one of the position coordinates.
"TimeStep" tells us how long in seconds it has been since the last time update was called. By multiplying this by PLAYER_SPEED, we tell the player to move PLAYER_SPEED pixels per second. (400 pixels/second)

Step 5 - Restricting Movement

The last thing we need to do is restrict the player's movement, to keep them from going off the edge of the screen.
I'm going to do this by capping the playerPosition's x and y coordinates between a minimum and maximum value with the BIND macro. The new update function looks like this:

From here take some time to fool around with things! You can do quite a bit with this as a base.