LearnOpenGL

Render-text.html (17286B)

---

     <h1 id="content-title">Render text</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Render-text</h1>
 <p>
   In this chapter we'll be adding the final enhancements to the game by adding a life system, a win condition, and feedback in the form of rendered text. This chapter heavily builds upon the earlier introduced <a href="https://learnopengl.com/In-Practice/Text-Rendering" target="_blank">Text Rendering</a> chapter so it is highly advised to first work your way through that chapter if you haven't already.
 </p>
 
 <p>
   In Breakout all text rendering code is encapsulated within a class called <fun>TextRenderer</fun> that features the initialization of the FreeType library, render configuration, and the actual render code. You can find the code of the <fun>TextRenderer</fun> class here:
 </p>
 
 <ul>
   <li><strong>TextRenderer</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/text_renderer.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/text_renderer.cpp" target="_blank">code</a>.</li>
   <li><strong>Text shaders</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/shaders/text.vs" target="_blank">vertex</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/shaders/text.frag" target="_blank">fragment</a>.</li>
 </ul>
 
 <p>
   The content of the text renderer's functions is almost exactly the same as the code from the text rendering chapter. However, the code for rendering glyphs onto the screen is slightly different:
 </p>
 
 <pre><code>
 void TextRenderer::RenderText(std::string text, float x, float y, float scale, glm::vec3 color)
 {
     [...]
     for (c = text.begin(); c != text.end(); c++)
     {
         float xpos = x + ch.Bearing.x * scale;
         float ypos = y + (this-&gt;Characters['H'].Bearing.y - ch.Bearing.y) * scale;
 
         float w = ch.Size.x * scale;
         float h = ch.Size.y * scale;
         // update VBO for each character
         float vertices[6][4] = {
             { xpos,     ypos + h,   0.0f, 1.0f },
             { xpos + w, ypos,       1.0f, 0.0f },
             { xpos,     ypos,       0.0f, 0.0f },
 
             { xpos,     ypos + h,   0.0f, 1.0f },
             { xpos + w, ypos + h,   1.0f, 1.0f },
             { xpos + w, ypos,       1.0f, 0.0f }
         };
         [...]
     }
 }    
 </code></pre>
 
 <p>
   The reason for it being slightly different is that we use a different orthographic projection matrix from the one we've used in the text rendering chapter. In the text rendering chapter all <code>y</code> values ranged from bottom to top, while in the Breakout game all <code>y</code> values range from top to bottom with a <code>y</code> coordinate of <code>0.0</code> corresponding to the top edge of the screen. This means we have to slightly modify how we calculate the vertical offset.
 </p>
 
 <p>
   Since we now render downwards from <fun>RenderText</fun>'s <var>y</var> parameter, we calculate the vertical offset as the distance a glyph is pushed downwards from the top of the glyph space. Looking back at the glyph metrics image from FreeType, this is indicated by the red arrow:
 </p>
 
 <img src="/img/in-practice/breakout/glyph_offset.png" alt="Vertical offset of a FreeType glyph from the top of its glyph space for vertically inversed orthographic projection matrix in OpenGL"/>
   
 <p>
   To calculate this vertical offset we need to get the top of the glyph space (the length of the black vertical arrow from the origin). Unfortunately, FreeType has no such metric for us. What we do know is that that some glyphs always touch this top edge; characters like 'H', 'T' or 'X'. So what if we calculate the length of this red vector by subtracting <code>bearingY</code> from any of these <em>top-reaching</em> glyphs by <code>bearingY</code> of the glyph in question. This way, we push the glyph down based on how far its top point differs from the top edge.
 </p>
   
 <pre><code>
 float ypos = y + (this-&gt;Characters['H'].Bearing.y - ch.Bearing.y) * scale;  
 </code></pre>
   
 <p>
   In addition to updating the <code>ypos</code> calculation, we also switched the order of the vertices a bit to make sure all the vertices are still front facing when multiplied with the current orthographic projection matrix (as discussed in the <a href="https://learnopengl.com/Advanced-OpenGL/Face-culling" target="_blank">face culling</a> chapter).
 </p>
   
 <p>
   Adding the <fun>TextRenderer</fun> to the game is easy:
 </p>
   
 <pre><code>
 TextRenderer  *Text;
   
 void Game::Init()
 {
     [...]
     Text = new TextRenderer(this-&gt;Width, this-&gt;Height);
     Text->Load("fonts/ocraext.TTF", 24);
 }
 </code></pre>
 
 <p>
   The text renderer is initialized with a font called OCR A Extended that you can download from <a href="http://fontzone.net/font-details/ocr-a-extended" target="_blank">here</a>. If the font is not to your liking, feel free to use a different font.
 </p>
   
 <p>
   Now that we have a text renderer, let's finish the gameplay mechanics.
 </p>
   
 <h2>Player lives</h2>
 <p>
   Instead of immediately resetting the game as soon as the ball reaches the bottom edge, we'd like to give the player a few extra chances. We do this in the form of player lives, where the player begins with an initial number of lives (say <code>3</code>) and each time the ball touches the bottom edge, the player's life total is decreased by 1. Only when the player's life total becomes <code>0</code> we reset the game. This makes it easier for the player to finish a level while also building tension.
 </p>
   
 <p>
   We keep count of the lives of a player by adding it to the game class (initialized within the constructor to a value of <code>3</code>):
 </p>
   
 <pre><code>
 class Game
 {
     [...]
     public:  
         unsigned int Lives;
 }
 </code></pre>
 
 <p>
   We then modify the game's <fun>Update</fun> function to, instead of resetting the game, decrease the player's life total, and only reset the game once the life total reaches <code>0</code>:
 </p>
   
 <pre><code>
 void Game::Update(float dt)
 {
     [...]
     if (Ball-&gt;Position.y &gt;= this-&gt;Height) // did ball reach bottom edge?
     {
         --this-&gt;Lives;
         // did the player lose all his lives? : Game over
         if (this-&gt;Lives == 0)
         {
             this-&gt;ResetLevel();
             this-&gt;State = GAME_MENU;
         }
         this-&gt;ResetPlayer();
     }
 }
 </code></pre>
   
 <p>
   As soon as the player is game over (<var>lives</var> equals <code>0</code>), we reset the level and change the game state to <var>GAME_MENU</var> which we'll get to later. 
 </p>
   
 <p>
   Don't forget to reset the player's life total as soon as we reset the game/level:
 </p>
   
 <pre><code>
 void Game::ResetLevel()
 {
     [...]
     this-&gt;Lives = 3;
 }  
 </code></pre>
   
 <p>
   The player now has a working life total, but has no way of seeing how many lives he currently has while playing the game. That's where the text renderer comes in:
 </p>
  
 <pre><code>
 void Game::Render()
 {
     if (this-&gt;State == GAME_ACTIVE)
     {
         [...]
         std::stringstream ss; ss &lt;&lt; this-&gt;Lives;
         Text-&gt;RenderText("Lives:" + ss.str(), 5.0f, 5.0f, 1.0f);
     }
 }  
 </code></pre>
   
 <p>
   Here we convert the number of lives to a string, and display it at the top-left of the screen. It'll now look a bit like this:
 </p>
   
   <img src="/img/in-practice/breakout/render_text_lives.png" class="clean" alt="Rendered text with FreeType in OpenGL displaying the life total of the player"/>
     
 <p>
   As soon as the ball touches the bottom edge, the player's life total is decreased which is instantly visible at the top-left of the screen.
 </p>
   
 <h2>Level selection</h2>
 <p>
   Whenever the user is in the game state <var>GAME_MENU</var>, we'd like to give the player the control to select the level he'd like to play in. With either the 'w' or 's' key the player should be able to scroll through any of the levels we loaded. Whenever the player feels like the chosen level is indeed the level he'd like to play in, he can press the enter key to switch from the game's <var>GAME_MENU</var> state to the <var>GAME_ACTIVE</var> state.
 </p>
     
 <p>
   Allowing the player to choose a level is not too difficult. All we have to do is increase or decrease the game class's <var>Level</var> variable based on whether he pressed 'w' or 's' respectively:
 </p>
     
 <pre><code>
 if (this-&gt;State == GAME_MENU)
 {
     if (this-&gt;Keys[GLFW_KEY_ENTER])
         this-&gt;State = GAME_ACTIVE;
     if (this-&gt;Keys[GLFW_KEY_W])
         this-&gt;Level = (this-&gt;Level + 1) % 4;
     if (this-&gt;Keys[GLFW_KEY_S])
     {
         if (this-&gt;Level &gt; 0)
             --this-&gt;Level;
         else
             this-&gt;Level = 3;   
     }
 }  
 </code></pre>
     
 <p>
   We use the modulus operator (<code>%</code>) to make sure the <var>Level</var> variable remains within the acceptable level range (between <code>0</code> and <code>3</code>). 
 </p>
     
 <p>
   We also want to define what we want to render when we're in the menu state. We'd like to give the player some instructions in the form of text and also display the selected level in the background.
 </p>
     
 <pre><code>
 void Game::Render()
 {
     if (this-&gt;State == GAME_ACTIVE || this-&gt;State == GAME_MENU)
     {
         [...] // Game state's rendering code
     }
     if (this-&gt;State == GAME_MENU)
     {
         Text-&gt;RenderText("Press ENTER to start", 250.0f, Height / 2, 1.0f);
         Text-&gt;RenderText("Press W or S to select level", 245.0f, Height / 2 + 20.0f, 0.75f);
     }
 }  
 </code></pre>
     
 <p>
   Here we render the game whenever we're in either the <var>GAME_ACTIVE</var> state or the <var>GAME_MENU</var> state, and whenever we're in the <var>GAME_MENU</var> state we also render two lines of text to inform the player to select a level and/or accept his choice. Note that for this to work when launching the game you do have to set the game's state as <var>GAME_MENU</var> by default.  
 </p>    
     
 <img src="/img/in-practice/breakout/render_text_select.png" class="clean" alt="Selecting levels with FreeType rendered text in OpenGL"/>
       
 <p>
   It looks great, but once you try to run the code you'll probably notice that as soon as you press either the 'w' or the 's' key, the game rapidly scrolls through the levels making it difficult to select the level you want to play in. This happens because the game records the key press over  frames until we release the key. This causes the <fun>ProcessInput</fun> function to process the pressed key more than once. 
 </p>
   
 <p>
   We can solve this issue with a little trick commonly found within GUI systems. The trick is to, not only record the keys currently pressed, but also store the keys that have been processed once, until released again. We then check (before processing) whether the key has not yet been processed, and if so, process this key after which we store this key as being processed. Once we want to process the same key again without the key having been released, we do not process the key. This probably sounds somewhat confusing, but as soon as you see it in practice it (probably) starts to make sense.
 </p>
 
 <p>
   First we have to create another array of bool values to indicate which keys have been processed. We define this within the game class:
 </p>
 
 <pre><code>
 class Game
 {
     [...]
     public:  
         bool KeysProcessed[1024];
 } 
 </code></pre>
   
 <p>
   We then set the relevant key(s) to <code>true</code> as soon as they're processed and make sure to only process the key if it wasn't processed before (until released):
 </p>
 
 <pre><code>
 void Game::ProcessInput(float dt)
 {
     if (this-&gt;State == GAME_MENU)
     {
         if (this-&gt;Keys[GLFW_KEY_ENTER] && !this-&gt;KeysProcessed[GLFW_KEY_ENTER])
         {
             this-&gt;State = GAME_ACTIVE;
             this-&gt;KeysProcessed[GLFW_KEY_ENTER] = true;
         }
         if (this-&gt;Keys[GLFW_KEY_W] && !this-&gt;KeysProcessed[GLFW_KEY_W])
         {
             this-&gt;Level = (this-&gt;Level + 1) % 4;
             this-&gt;KeysProcessed[GLFW_KEY_W] = true;
         }
         if (this-&gt;Keys[GLFW_KEY_S] && !this-&gt;KeysProcessed[GLFW_KEY_S])
         {
             if (this-&gt;Level &gt; 0)
                 --this-&gt;Level;
             else
                 this-&gt;Level = 3;
             this-&gt;KeysProcessed[GLFW_KEY_S] = true;
         }
     }
     [...]
 }  
 </code></pre>
 
 <p>
   Now as soon as the key's value in the <var>KeysProcessed</var> array has not yet been set, we process the key and set its value to <code>true</code>. Next time we reach the <code>if</code> condition of the same key, it will have been processed so we'll pretend we never pressed the button until it's released again.
 </p>
   
 <p>
   Within GLFW's key callback function we then need to reset the key's processed value as soon as it's released so we can process it again the next time it's pressed:
 </p>
   
 <pre><code>
 void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
 {
     [...]
     if (key &gt;= 0 && key &lt; 1024)
     {
         if (action == GLFW_PRESS)
             Breakout.Keys[key] = true;
         else if (action == GLFW_RELEASE)
         {
             Breakout.Keys[key] = false;
             Breakout.KeysProcessed[key] = false;
         }
     }
 }  
 </code></pre>
   
 <p>
   Launching the game gives us a neat level select screen that now precisely selects a single level per key press, no matter how long we press he key. 
 </p>
   
 <h2>Winning</h2>
 <p>
   Currently the player is able to select levels, play the game, and fail in doing so to lose. It is kind of unfortunate if the player finds out after destroying all the bricks he cannot in any way win the game. So let's fix that.
 </p>
   
 <p>
   The player wins when all of the non-solid blocks have been destroyed. We already created a function to check for this condition in the <fun>GameLevel</fun> class:
 </p>
   
 <pre><code>
 bool GameLevel::IsCompleted()
 {
     for (GameObject &tile : this-&gt;Bricks)
         if (!tile.IsSolid && !tile.Destroyed)
             return false;
     return true;
 }  
 </code></pre>
   
 <p>
   We check all bricks in the game level and if a single non-solid brick isn't yet destroyed we return <code>false</code>. All we have to do is check for this condition in the game's <fun>Update</fun> function and as soon as it returns <code>true</code> we change the game state to <var>GAME_WIN</var>:
 </p>
   
 <pre><code>
 void Game::Update(float dt)
 {
     [...]
     if (this-&gt;State == GAME_ACTIVE && this-&gt;Levels[this-&gt;Level].IsCompleted())
     {
         this-&gt;ResetLevel();
         this-&gt;ResetPlayer();
         Effects-&gt;Chaos = true;
         this-&gt;State = GAME_WIN;
     }
 }
 </code></pre>
   
 <p>
   Whenever the level is completed while the game is active, we reset the game and display a small victory message in the <var>GAME_WIN</var> state. For fun we'll also enable the chaos effect while in the <var>GAME_WIN</var> screen. In the <fun>Render</fun> function we'll congratulate the player and ask him to either restart or quit the game:
 </p>
   
 <pre><code>
 void Game::Render()
 {
     [...]
     if (this-&gt;State == GAME_WIN)
     {
         Text-&gt;RenderText(
             "You WON!!!", 320.0, Height / 2 - 20.0, 1.0, glm::vec3(0.0, 1.0, 0.0)
         );
         Text-&gt;RenderText(
             "Press ENTER to retry or ESC to quit", 130.0, Height / 2, 1.0, glm::vec3(1.0, 1.0, 0.0)
         );
     }
 }  
 </code></pre>
 
 <p>
   Then we of course have to actually catch the mentioned keys:
 </p>
   
 <pre><code>
 void Game::ProcessInput(float dt)
 {
     [...]
     if (this-&gt;State == GAME_WIN)
     {
         if (this-&gt;Keys[GLFW_KEY_ENTER])
         {
             this-&gt;KeysProcessed[GLFW_KEY_ENTER] = true;
             Effects-&gt;Chaos = false;
             this-&gt;State = GAME_MENU;
         }
     }
 }  
 </code></pre>
   
 <p>
   If you're then good enough to actually win the game, you'd get the following image:
 </p>
   
   <img src="/img/in-practice/breakout/render_text_win.png" class="clean" alt="Image of winning in OpenGL Breakout with FreeType rendered text"/>
     
 <p>
   And that is it! The final piece of the puzzle of the Breakout game we've been actively working on. Try it out, customize it to your liking, and show it to all your family and friends! 
 </p>
     
 <p>
   You can find the final version of the game's code below:
 </p>
     
 <ul>
    <li><strong>Game</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/game.cpp" target="_blank">code</a>.</li>
 </ul>
     
     <h2>Further reading</h2>
 <ul>
     <li><a href="https://www.websiteplanet.com/blog/best-free-fonts/" target="_blank">70+ Best Free Fonts for Designers</a>: summarized list of a large group of fonts to use in your project for personal or commercial use.</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>