LearnOpenGL

Levels.html (15889B)

---

     <h1 id="content-title">Levels</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Levels</h1>
 <p>
   Breakout is unfortunately not just about a single happy green face, but contains complete levels with a lot of playfully colored bricks. We want these levels to be configurable such that they can support any number of rows and/or columns, we want the levels to have solid bricks (that cannot be destroyed), we want the levels to support multiple brick colors, and we want them to be stored externally in (text) files.
 </p>
 
 <p>
   In this chapter we'll briefly walk through the code of a game level object that is used to manage a large amount of bricks. We first have to define what an actual <def>brick</def> is though.
 </p>
 
 <p>
   We create a component called a <def>game object</def> that acts as the base representation of an object inside the game. Such a game object holds state data like its position, size, and velocity. It holds a color, a rotation component, whether it is solid and/or destroyed, and it also stores a <fun>Texture2D</fun> variable as its sprite. 
 </p>
 
 <p>
   Each object in the game is represented as a <fun>GameObject</fun> or a derivative of this class. You can find the code of the <fun>GameObject</fun> class below:
 </p>
 
 <ul>
   <li><strong>GameObject</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game_object.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game_object.cpp" target="_blank">code</a> </li>
 </ul>
 
 <p>
   A level in Breakout consists entirely of bricks so we can represent a level by exactly that: a collection of bricks. Because a brick requires the same state as a game object, we're going to represent each brick of the level as a <fun>GameObject</fun>. The declaration of the <fun>GameLevel</fun> class then looks as follows:
 </p>
 
 <pre><code>
 class GameLevel
 {
 public:
     // level state
     std::vector&lt;GameObject&gt; Bricks;
     // constructor
     GameLevel() { }
     // loads level from file
     void Load(const char *file, unsigned int levelWidth, unsigned int levelHeight);
     // render level
     void Draw(SpriteRenderer &renderer);
     // check if the level is completed (all non-solid tiles are destroyed)
     bool IsCompleted();
 private:
     // initialize level from tile data
     void init(std::vector&lt;std::vector&lt;unsigned int&gt;&gt; tileData, 
               unsigned int levelWidth, unsigned int levelHeight);
 };  
 </code></pre>
 
 <p>
   Since a level is loaded from an external (text) file, we need to propose some kind of level structure. Here is an example of what a game level may look like in a text file:
 </p>
 
 <pre><code>
 1 1 1 1 1 1 
 2 2 0 0 2 2
 3 3 4 4 3 3
 </code></pre>
 
 <p>
   A level is stored in a matrix-like structure where each number represents a type of brick, each one separated by a space. Within the level code we can then assign what each number represents. We have chosen the following representation:
 </p>
 
 <ul>
   <li>A number of 0: no brick, an empty space within the level.</li>
   <li>A number of 1: a solid brick, a brick that cannot be destroyed.</li>
   <li>A number higher than 1: a destroyable brick; each subsequent number only differs in color.</li>
 </ul>
 
 <p>
   The example level listed above would, after being processed by <fun>GameLevel</fun>, look like this:
 </p>
 
 <img src="/img/in-practice/breakout/levels-example.png" class="clean" alt="Example of a level using the Breakout GameLevel class"/>
   
 <p>
   The <fun>GameLevel</fun> class uses two functions to generate a level from file. It first loads all the numbers in a two-dimensional vector within its <fun>Load</fun> function that then processes these numbers (to create all game objects) in its <fun>init</fun> function.
 </p>
 
 
 <pre><code>
 void GameLevel::Load(const char *file, unsigned int levelWidth, unsigned int levelHeight)
 {
     // clear old data
     this-&gt;Bricks.clear();
     // load from file
     unsigned int tileCode;
     GameLevel level;
     std::string line;
     std::ifstream fstream(file);
     std::vector&lt;std::vector&lt;unsigned int&gt;&gt; tileData;
     if (fstream)
     {
         while (std::getline(fstream, line)) // read each line from level file
         {
             std::istringstream sstream(line);
             std::vector&lt;unsigned int&gt; row;
             while (sstream &gt;&gt; tileCode) // read each word separated by spaces
                 row.push_back(tileCode);
             tileData.push_back(row);
         }
         if (tileData.size() &gt; 0)
             this-&gt;init(tileData, levelWidth, levelHeight);
     }
 } 
 </code></pre>
 
 <p>
   The loaded <var>tileData</var> is then passed to the game level's <fun>init</fun> function:
 </p>
 
 <pre><code>
 void GameLevel::init(std::vector&lt;std::vector&lt;unsigned int&gt;&gt; tileData, 
                      unsigned int lvlWidth, unsigned int lvlHeight)
 {
     // calculate dimensions
     unsigned int height = tileData.size();
     unsigned int width  = tileData[0].size();
     float unit_width    = lvlWidth / static_cast&lt;float&gt;(width);
     float unit_height   = lvlHeight / height;
     // initialize level tiles based on tileData		
     for (unsigned int y = 0; y &lt; height; ++y)
     {
         for (unsigned int x = 0; x &lt; width; ++x)
         {
             // check block type from level data (2D level array)
             if (tileData[y][x] == 1) // solid
             {
                 glm::vec2 pos(unit_width * x, unit_height * y);
                 glm::vec2 size(unit_width, unit_height);
                 GameObject obj(pos, size, 
                     ResourceManager::GetTexture("block_solid"), 
                     glm::vec3(0.8f, 0.8f, 0.7f)
                 );
                 obj.IsSolid = true;
                 this-&gt;Bricks.push_back(obj);
             }
             else if (tileData[y][x] &gt; 1)	
             {
                 glm::vec3 color = glm::vec3(1.0f); // original: white
                 if (tileData[y][x] == 2)
                     color = glm::vec3(0.2f, 0.6f, 1.0f);
                 else if (tileData[y][x] == 3)
                     color = glm::vec3(0.0f, 0.7f, 0.0f);
                 else if (tileData[y][x] == 4)
                     color = glm::vec3(0.8f, 0.8f, 0.4f);
                 else if (tileData[y][x] == 5)
                     color = glm::vec3(1.0f, 0.5f, 0.0f);
 
                 glm::vec2 pos(unit_width * x, unit_height * y);
                 glm::vec2 size(unit_width, unit_height);
                 this-&gt;Bricks.push_back(
                     GameObject(pos, size, ResourceManager::GetTexture("block"), color)
                 );
             }
         }
     }  
 }
 </code></pre>
 
 <p>
   The <fun>init</fun> function iterates through each of the loaded numbers and adds a <fun>GameObject</fun> to the level's <var>Bricks</var> vector based on the processed number. The size of each brick is automatically calculated (<var>unit_width</var> and <var>unit_height</var>) based on the total number of bricks so that each brick perfectly fits within the screen bounds. 
 </p>
 
 <p>
   Here we load the game objects with two new textures, a <a href="/img/in-practice/breakout/textures/block.png" target="_blank">block</a> texture and a <a href="/img/in-practice/breakout/textures/block_solid.png" target="_blank">solid block</a> texture.
 </p>
 
 <img src="/img/in-practice/breakout/block-textures.png" alt="Image of two types of block textures"/>
 
 <p>
   A nice little trick here is that these textures are completely in gray-scale. The effect is that we can neatly manipulate their colors within the game-code by multiplying their grayscale colors with a defined color vector; exactly as we did within the <fun>SpriteRenderer</fun>. This way, customizing the appearance of their colors doesn't look too weird or unbalanced.
 </p>
 
 <p>
   The <fun>GameLevel</fun> class also houses a few other functions, like rendering all non-destroyed bricks, or validating if all non-solid bricks are destroyed. You can find the source code of the <fun>GameLevel</fun> class below:
 </p>
 
 <ul>
   <li><strong>GameLevel</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game_level.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game_level.cpp" target="_blank">code</a> </li>
 </ul>
 
 <p>
   The game level class gives us a lot of flexibility since any amount of rows and columns are supported and a user could easily create his/her own levels by modifying the level files. 
 </p>
 
 <h2>Within the game</h2>
 <p>
   We would like to support multiple levels in the Breakout game so we'll have to extend the game class a little by adding a vector that holds variables of type <fun>GameLevel</fun>. We'll also store the currently active level while we're at it:
 </p>
 
 <pre><code>
 class Game
 {
     [...]
     std::vector&lt;GameLevel&gt; Levels;
     unsigned int           Level;
     [...]  
 };
 </code></pre>
 
 <p>
   This series' version of the Breakout game features a total of 4 levels:
 </p>
 
 <ul>
   <li><a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/levels/one.lvl" target="_blank">Standard</a></li>
   <li><a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/levels/two.lvl" target="_blank">A few small gaps</a></li>
   <li><a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/levels/three.lvl" target="_blank">Space invader</a></li>
   <li><a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/levels/four.lvl" target="_blank">Bounce galore</a></li>
 </ul>
 
 <p>
   Each of the textures and levels are then initialized within the game class's <fun>Init</fun> function:
 </p>
 
 <pre><code>
 void Game::Init()
 {
     [...]
     // load textures
     ResourceManager::LoadTexture("textures/background.jpg", false, "background");
     ResourceManager::LoadTexture("textures/awesomeface.png", true, "face");
     ResourceManager::LoadTexture("textures/block.png", false, "block");
     ResourceManager::LoadTexture("textures/block_solid.png", false, "block_solid");
     // load levels
     GameLevel one; one.Load("levels/one.lvl", this-&gt;Width, this-&gt;Height / 2);
     GameLevel two; two.Load("levels/two.lvl", this-&gt;Width, this-&gt;Height / 2);
     GameLevel three; three.Load("levels/three.lvl", this-&gt;Width, this-&gt;Height / 2);
     GameLevel four; four.Load("levels/four.lvl", this-&gt;Width, this-&gt;Height / 2);
     this-&gt;Levels.push_back(one);
     this-&gt;Levels.push_back(two);
     this-&gt;Levels.push_back(three);
     this-&gt;Levels.push_back(four);
     this-&gt;Level = 0;
 }  
 </code></pre>
 
 <p>
   Now all that is left to do, is actually render the level. We accomplish this by calling the currently active level's <fun>Draw</fun> function that in turn calls each <fun>GameObject</fun>'s <fun>Draw</fun> function using the given sprite renderer. Next to the level, we'll also render the scene with a nice <a href="/img/in-practice/breakout/textures/background.jpg" target="_blank">background image</a> (courtesy of Tenha):
 </p>
 
 <pre><code>
 void Game::Render()
 {
     if(this-&gt;State == GAME_ACTIVE)
     {
         // draw background
         Renderer-&gt;DrawSprite(ResourceManager::GetTexture("background"), 
             glm::vec2(0.0f, 0.0f), glm::vec2(this-&gt;Width, this-&gt;Height), 0.0f
         );
         // draw level
         this-&gt;Levels[this-&gt;Level].Draw(*Renderer);
     }
 }
 </code></pre>
 
 <p>
   The result is then a nicely rendered level that really starts to make the game feel more alive:
 </p>
 
 <img src="/img/in-practice/breakout/levels.png" class="clean" alt="Level in OpenGL breakout"/>
 
 <h3>The player paddle</h3>
 <p>
   While we're at it, we may just as well introduce a paddle at the bottom of the scene that is controlled by the player. The paddle only allows for horizontal movement and whenever it touches any of the scene's edges, its movement should halt. For the player paddle we're going to use the <a href="/img/in-practice/breakout/textures/paddle.png" target="_blank">following</a> texture:
 </p>
 
 <img src="/img/in-practice/breakout/textures/paddle.png" class="clean" style="width:256px;height:auto;" alt="Texture image if a paddle in OpenGL breakout"/>
 
 <p>
   A paddle object will have a position, a size, and a sprite texture, so it makes sense to define the paddle as a <fun>GameObject</fun> as well:
 </p>
 
 <pre><code>
 // Initial size of the player paddle
 const glm::vec2 PLAYER_SIZE(100.0f, 20.0f);
 // Initial velocity of the player paddle
 const float PLAYER_VELOCITY(500.0f);
 
 GameObject      *Player;
   
 void Game::Init()
 {
     [...]    
     ResourceManager::LoadTexture("textures/paddle.png", true, "paddle");
     [...]
     glm::vec2 playerPos = glm::vec2(
         this-&gt;Width / 2.0f - PLAYER_SIZE.x / 2.0f, 
         this-&gt;Height - PLAYER_SIZE.y
     );
     Player = new GameObject(playerPos, PLAYER_SIZE, ResourceManager::GetTexture("paddle"));
 }
 </code></pre>
 
 <p>
   Here we defined several constant values that define the paddle's size and speed. Within the Game's <fun>Init</fun> function we calculate the starting position of the paddle within the scene. We make sure the player paddle's center is aligned with the horizontal center of the scene.
 </p>
 
 <p>
   With the player paddle initialized, we also need to add a statement to the Game's <fun>Render</fun> function:
 </p>
 
 <pre><code>
 Player-&gt;Draw(*Renderer);  
 </code></pre>
 
 <p>
   If you'd start the game now, you would not only see the level, but also a fancy player paddle aligned to the bottom edge of the scene. As of now, it doesn't really do anything so we're going to delve into the Game's <fun>ProcessInput</fun> function to horizontally move the paddle whenever the user presses the <var>A</var> or <var>D</var> key:
 </p>
 
 <pre><code>
 void Game::ProcessInput(float dt)
 {
     if (this-&gt;State == GAME_ACTIVE)
     {
         float velocity = PLAYER_VELOCITY * dt;
         // move playerboard
         if (this-&gt;Keys[GLFW_KEY_A])
         {
             if (Player-&gt;Position.x &gt;= 0.0f)
                 Player-&gt;Position.x -= velocity;
         }
         if (this-&gt;Keys[GLFW_KEY_D])
         {
             if (Player-&gt;Position.x &lt;= this-&gt;Width - Player-&gt;Size.x)
                 Player-&gt;Position.x += velocity;
         }
     }
 } 
 </code></pre>
 
 <p>
   Here we move the player paddle either in the left or right direction based on which key the user pressed (note how we multiply the velocity with the <def>deltatime</def> variable). If the paddle's <code>x</code> value would be less than <code>0</code> it would've moved outside the left edge, so we only move the paddle to the left if the paddle's <code>x</code> value is higher than the left edge's <code>x</code> position (<code>0.0</code>). We do the same for when the paddle breaches the right edge, but we have to compare the right edge's position with the right edge of the paddle (subtract the paddle's width from the right edge's <code>x</code> position).
 </p>
 
 <p>
   Now running the game gives us a player paddle that we can move all across the bottom edge:
 </p>
 
 <img src="/img/in-practice/breakout/levels-player.png" class="clean" alt="Image of OpenGL breakout now with player paddle"/>
 
 <p>
   You can find the updated code of the Game class here:
 </p>
 
 <ul>
   <li><strong>Game</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/4.game.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/4.game.cpp" target="_blank">code</a> </li>
 </ul>       
 
     </div>
     
     <div id="hover">
         HI
     </div>
    <!-- 728x90/320x50 sticky footer -->
 <div id="waldo-tag-6196"></div>
 
    <div id="disqus_thread"></div>
 
     
 
 
 </div> <!-- container div -->
 
 
 </div> <!-- super container div -->
 </body>
 </html>