Hey Coders!
Have you ever played a strategy game like HexVeil and wondered, “How does the computer know the Knight has 15 HP?” or “How does it know where to draw the characters?” Today, we are going to crack open the engine behind HexVeil we (at The Mad Bottter) call it Deck-Engine and let’s have a fast see at what makes it tick. Don’t worry if you’ve never written C++ before—we’re going to use LEGO metaphors, because their recent CES presentation was super impressive.
The Big Idea: ECS (Entity Component System)
In traditional coding, you might write a giant script called Knight and another called Archer. But in HexVeil, we do something a bit more interesting. We think of every character as a blank robot (an Entity) that we attach “stickers” to.
- Add a “Health” sticker? 🩹 Now it can get hurt!
- Add a “Position” sticker? 📍 Now it exists on the map!
- Add a “Faction” sticker? 🛡️ Now it knows if it’s a friend or foe!
We call these stickers Components. Let’s look at the real code for them!
Code Spotlight: The Health Component
Here is the actual C++ code for Health in HexVeil. It’s surprisingly simple—just two numbers inside a container!
namespace deck {
// This struct is just a container for data!
struct Health {
int current{0}; // How much HP you have right now
int max{0}; // The most HP you can have (when fully healed)
};
}
That’s it! No complex logic here. Just raw data.
🗺️ Where are we? (GridPosition)
Since HexVeil is a tactical game, everyone lives on a grid. We need a way to track that, so we have the GridPosition component:
struct GridPosition {
int x{0};
int y{0};
int layer{0}; // 0 = ground, 1 = floating? 🏰
};
If we want to move a Knight, we don’t need to rewrite the Knight’s code. We just find its GridPosition sticker and change x from 5 to 6. Easy!
📜 The Blueprint: Loading a Knight
So how do we tell the game what a “Knight” actually is? We don’t write it in C++; we write it in a JSON file. This is like a menu that tells the engine which stickers to apply.
Here is the real (granted simplified) knight.json file from the game’s data folder:
{
"id": "knight",
"name": "Knight",
"unit_stats": {
"hp": 15,
"movement": 2,
"ap": 2,
"attacks": [
{ "id": "charge", "damage": 5, "range": 1 }
]
}
}
When the game starts, it reads this file and says: “Aha! A Knight needs a Health component with 15 HP and a Movement component with speed 2!”
⚙️ The Systems: Making it Move
If Entities are the robots and Components are the stickers, then Systems are the puppeteers. They run every single frame (60 times a second!) to update the game.
For example, how do we draw everyone on the screen? We use a “View” to find everyone who has both a GridPosition AND a Faction (so we know what color to draw them); Factions are actually a bit of technical debt from a previous design and, though they had grander ambitions before, simply denote what team a unit is on in a given match.
Here is a simplified version of our Render System:
// Loop through every entity that has a Position and Health
auto view = registry.view<GridPosition, Health, Faction>();
for (auto entity : view) {
// 1. Get the data
const auto& pos = view.get(entity);
const auto& faction = view.get(entity);
// 2. Decide color based on Faction
Color color = (faction.name == "Council") ? Blue : Red;
// 3. Draw it at the correct X, Y!
DrawSprite(entity, pos.x, pos.y, color);
}
Notice how this code doesn’t care if it’s drawing a Knight, an Archer, or a giant Boss. As long as it has a GridPosition, it gets drawn. That is the magic of ECS! ✨
🚀 Wrap Up
Building a game engine like Deck-Engine sounds scary, but it’s really just organizing data into small, understandable pieces.
- Entities = The Things (The Knight)
- Components = The Data (HP: 15, Pos: 5,5)
- Systems = The Logic (The code that draws them)
I hope you enjoyed this little tour inside HexVeil’s source code! Now go out there and build something awesome! ✨ Do checkout Coder Radio and if you need some development or data work done, reach out to me here or at Alice.
Happy Coding!
