Let's start by adding a call to Render in the GameLoop RoboRacer.cpp:

void GameLoop()
{
  Render();
}

At this point, we are simply calling the main Render function (implemented in the next section). Every object that can be drawn to the screen will also have a Render method. In this way, the call to render the game will cascade down through every renderable object in the game.

Now, it is time to implement the main Render function. Add the following code to RoboRacer.cpp:

void Render()
{
  glClear(GL_COLOR_BUFFER_BIT);
  glLoadIdentity();
  
  background->Render();
  robot_left->Render();
  robot_right->Render();
  robot_left_strip->Render();
  robot_right_strip->Render();
  
  SwapBuffers(hDC);
}

Here's how it works:

The last step in our render chain is to add a render method to the Sprite class. This will allow each sprite to render itself to the screen. Open Sprite.h and add the following code:

void Sprite::Render()
{
  if (m_isVisible)
  {
    if (m_useTransparency)
    {
      glEnable(GL_BLEND);
      glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    }
    
    glBindTexture(GL_TEXTURE_2D, GetCurrentFrame());
    
    glBegin(GL_QUADS);
    
    GLfloat x = m_position.x;
    GLfloat y = m_position.y;
    
    GLfloat w = m_size.width;
    GLfloat h = m_size.height;
    
    GLfloat texWidth = (GLfloat)m_textureIndex / (GLfloat)m_numberOfFrames;
    GLfloat texHeight = 1.0f;
    GLfloat u = 0.0f;
    GLfloat v = 0.0f;
    if (m_textureIndex < m_numberOfFrames)
    {
      u = (GLfloat)m_currentFrame * texWidth;
    }
    glTexCoord2f(u, v); glVertex2f(x, y);
    glTexCoord2f(u + texWidth, v); glVertex2f(x + w, y);
    glTexCoord2f(u + texWidth, v + texHeight); glVertex2f(x + w, y + h);
    glTexCoord2f(u, v + texHeight); glVertex2f(x, y + h);
    
    glEnd();
    
    if (m_useTransparency)
    {
      glDisable(GL_BLEND);
    }
  }
}

This is probably one of the more complex sections of the code because rendering has to take many things into consideration. Is the sprite visible? Which frame of the sprite are we rendering? Where on screen should the sprite be rendered? Do we care about transparency? Let's walk through the code step by step:

UV mapping was covered in detail in Chapter 2, Your Point of View. However, we'll do a recap here and see how it is implemented in code.

By convention, we assign the left coordinate of the texture to the variable u, and the top coordinate of the texture to the variable v. This technique is therefore known as uv mapping.

OpenGL considers the origin of a texture to be at uv coordinates of (0, 0), and the farthest extent of the texture to be at uv coordinates of (1, 1). So, if we want to render the entire texture, we will map the entire range from (0, 0) to (1, 1) the four corners of the quad. However, let's say that we only want to render the first half of the image width (but the entire height). In this case, we will map the range of uv coordinates from (0, 1) to (0.5, 1) to the four corners of the quad. Hopefully, you can visualize that this will only render one-half of the texture.

So, in order to render our sprite sheets, we first determine how wide each frame of the sprite is by dividing m_textureIndex by m_numberOfFrames. In the case of a sprite that has four frames, this will give us a value of 0.25.

Next, we determine which frame we are in. The following table shows the uv ranges for each frame of a sprite with four frames:

As our sprite sheets are set up horizontally, we only need to worry about taking the correct range of u from the whole texture, while the range for v stays the same.

So, here is how our algorithm works:

We need to take a closer look at the call to GetCurrentFrame to make sure you understand what this function does. Here is the implementation:

const GLuint GetCurrentFrame()
{
  
  if(m_isSpriteSheet)
  {
    return m_textures[0];
  }
  else
  {
    return m_textures[m_currentFrame];
  }
}

Here is what is happening: