OpenGL 2D Facade (24): Z-Buffer

In this post, I show a first application of the OpenGL Z-Buffer, which allows a scene rendering without the need to sort tiles.

Objective

To check that the implementation works fine, we want to hide the character behind the top of the trees:

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (23): Water animation

In this post, I show how to animate water tiles using shaders. The approach I propose also works for all animations that repeat continuously in the same layer!

Objective

All water tiles we create on the map are animated:

Continue reading
Posted in Tutorial | Leave a comment

OpenGL 2D Facade (22): Load and save game state

We still need game content to test the facade, and it’s even better if we can load and save that content from a file!

Objective

The expected result is our current level editor able to load and save all the current game state:

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (21): Shaders and Layers

In this post, I show how to update shaders based on the current layer.

Objective

I choose the translation as the property to update for each layer or group of layers. The ground layer has a translation we can control with the arrows. Simultaneously, the translation of the front layers (frame box and text) remains unchanged. The rendering is fast (compared to a pure Python implementation) since the GPU performs most computations:

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (20): Automatic tile borders

I add more game content in this post to test the facade. This time, I want to automatically render borders when a region is updated.

Objective

We still edit a region as before, but now the renderer displays borders between cells of a different kind:

Note that it is the renderer that updates the display: the game state does not contain any data about these borders. In other words, the region’s values in the game state are only the cell kind (grass, swamp, dirt, etc.) and the corresponding values in the renderer are one of the many possible tiles.

This approach is interesting because we don’t introduce unnecessary complexity in the game state. When we consider game logic, the only information we need is the kind of region cell. For instance, if we are on the grass, elves can get a bonus, and orcs a malus. We don’t need to know if the region cell is a top-left or bottom-right border.

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (19): Test content

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!

Objective

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:

Continue reading
Posted in Tutorial | Tagged , , , , , , | Leave a comment

OpenGL 2D Facade (18): Frame box

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.

Objective

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.

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (17): Mixed text styles

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.

Objective

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>&lt;shadow color=#8020F0&gt;&lt;u&gt;text&lt;/u&gt;&lt;/shadow&gt;</s>
<u>https://www.patternsgameprog.com</u>"

Leads to this rendering:

At the end of the program, the program automatically generated the following tileset:

Continue reading
Posted in Tutorial | Tagged , | Leave a comment

OpenGL 2D Facade (16): Text renderers

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.

Objective

Thanks to this new model, we can easily create new combinations of text styles:

Continue reading
Posted in Tutorial | Tagged , , , | Leave a comment

OpenGL 2D Facade (15): 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

Objective

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 reading
Posted in Tutorial | Tagged , , | Leave a comment