Before I continue the facade, I want to create some game data to test it. As you may imagine, I use software design for that!
The expected result of this post is a simple level editor where we can draw ground tiles. It is enough to check that this first implementation is working fine:
In this post, I show how to display text into frame boxes. I also propose a solution to get more dynamism in the layer. For instance, it allows adding/removing faces in the mesh when the program is running.
The objective is quite simple: display a text in a frame box, for instance, when characters are speaking:
The main idea is to create a new layer class named UILayer that renders different decorations, starting with frame boxes. It is hard to predict the exact number of required faces/quads in the mesh for this kind of layer. As a result, I propose to update the current facade to allow layers with a face count that can change during the program execution.
In the previous program, we had to create one text layer for each text style (bold, shadowed…). In this post, I propose to render text with mixed styles from a single layer.
Using HTML-like source code, we want to render a text block with many styles. For instance, the following source:
<s size=80>Mixed text styles with <s color=#F08020>OpenGL</s></s> This <b><s color=#0080F0>text</s></b> contains <u>several</u> <i><b>styles</b></i> You can <shadow color=#8020F0><u>combine</u></shadow> them <outline color=#907010><b><i>any</i></b></outline> way you want! HTML-like source, for instance: <s size=48><shadow color=#8020F0><u>text</u></shadow></s> <u>https://www.patternsgameprog.com</u>"
Leads to this rendering:
At the end of the program, the program automatically generated the following tileset:
Before going to text with mixed styles, we need a better solution to render characters. In this post, I propose an approach based on the Composite pattern that allows an effortless combination of text styles.
Thanks to this new model, we can easily create new combinations of text styles:
In this post, I present text rendering with different styles (bold, italic, underline, …). Some of them are straightforward to implement thanks to Pygame; the others are more tricky!
This post is part of the OpenGL 2D Facade series
We wish to add the following text styles to the facade:
For each style, we compute a dedicated tileset. For instance, for the outline case, we create tiles with outlined characters. Then, during the OpenGL rendering, the process is as before.
Continue readingThe creation of a tileset for large character sets uses a lot of memory. This post shows an approach based on the Flyweight pattern to allow their usage with minimal memory footprint.
This post is part of the OpenGL 2D Facade series
The objective is similar to the previous one, except that we want to draw characters from large sets, possibly more than 10,000 characters:
With the previous approach, with 10,000 characters and tiles of 29 per 64 pixels, a tileset uses at least 74MB. Even if we save some memory using tricks (like using a single channel rather than four), it is still large. Furthermore, it is for one size and style: we have to create more tilesets for other sizes and styles (bold, italic, shadowed, etc.).
Thanks to this post’s approach, we can create tilesets that only contain the characters we need for the current frame. It is unlikely that a frame has all the characters of a large set, and in usual cases, it is a tiny subset.
In the example above, the program creates the following tileset:
In this post, I start to address a more advanced topic: text rendering with OpenGL. I first consider a simple case with monospaced fonts and small character sets.
This post is part of the OpenGL 2D Facade series
To test this new feature, I propose to draw text over the other layers. I update the text regularly, so we can check that we support dynamic text rendering:
In this post, I add a new type of layer dedicated to characters. These layers can draw tiles anywhere and updates their OpenGL data every time we render a frame.
This post is part of the OpenGL 2D Facade series
To check that the new layer type works fine, I propose to move a character in the level using the arrow keys:
There are no collision checks; the character can go anywhere, as long as it is inside the world. Also, note that the view follows the character.
Continue readingWith the previous program, the size of the window depends on the size of the level, which is problematic when the level is large. In this post, I update the shader programs to get a fast translation of the display. I also add keyboard handling to the facade to let the user changes the view.
Continue readingIn this post, we extend the facade to handle several layers. We also see how to draw with transparency.
Continue reading