Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Game Components

The Athena Crisis renderer was written for fun in JavaScript and CSS from scratch without experience in building game engines. It then ended up being a real game. Oops. Anyway, it's been fun to push web technologies to the max and optimize every detail, so let's explore some of the core components!

Most of the UI and game rendering can be found in the hera top level folder. Athena Crisis renders almost the entire game using just plain React, DOM and CSS. Only the map tiles, fog and decorations are using a canvas Element. Even then, all three are rendered using different canvas elements that are laid on top of each other. The entry point to render a map is the Map component.

Tiles, Fog and Decorations

Building a renderer with basic web technologies makes it easier to study how to build a game. It's not the most efficient approach, but it's a great way to learn. All the "static content" is rendered using <canvas> through these components:

  • Tiles for rendering tiles.
  • Decorators for decorations.
  • Fog for fog that overlays the map and blends into everything.

If you are a fan of web development, check out how the fog layer is implemented.

Units & Buildings

Units and Buildings are interactable entities. Both are making use of somewhat complex CSS like mask-image, filter and transform and are therefore slightly harder to replicate when building a game engine and renderer from scratch. In a way, CSS was used as if it was a shader language. Their implementation can be found here:

Here are some examples of units as they are rendered on a map in the game. You can click them to show the GameDialog as it is rendered in the game when right-clicking or long-pressing a field:

Portraits

Portraits are rendered using the Portrait component:

const portraits = (
  <Stack between gap wrap>
    <Portrait animate player={1} unit={Sniper} variant={0} />
    <Portrait animate player={2} unit={Flamethrower} variant={2} />
    <Portrait animate player={6} unit={BazookaBear} variant={0} />
    <Portrait animate player={5} unit={Jetpack} variant={2} />
  </Stack>
);