Level Design on Element Arena

Level Design on Element Arena

We leveraged the design pattern of the 'four-square' layout, where there are three main connected paths. This is a design principle from Counter Strike map design, a game I played many thousand hours of. (Pictured below, and more by Valve here on that if you're curious.)

A graph of 9 nodes, fully connected in four squares, with the horizontal inner edges dashed as optional.

From there I play with area, shape, and environment mechanics to create unique experiences for these paths. To achieve that, we developed several level mechanics for Element Arena:

  • Water tiles - require a dash ability to move through. We use layers of water as a way to add higher mobility costs while still keeping the arenas small and potential conflict high.
  • Bush tiles - give you invisibility if you aren't attacking. Often spaced a dash-length away. This allows for hiding and flanking opportunities vs just running in the open.
  • Lava tiles - burn you for damage over time. We use lava sections to create opportunities to create long range threats and as an area to push players into.
  • Power ups and spawn points - are dispersed to spread the conflict over the surface areas of the maps and generally set the tempo of the map. Do you get a chance to breathe? Or are you spawning into the fight?
  • Burning circles - applied damage over time and closed in on the players over time. We leveraged more than one on some of the larger maps to control which portions of the level become inaccessible first, and push the end-match action towards a particular focal point.

From here, we were able to explore the combinations and develop unique spaces to fight in. We generating maps from 3D tiles as a way to reduce iteration costs. The standard sizing and patterns allow for easy reading of attack ranges and spacing, which helps in a fighting game. Simple ol' tiles. They're a video game staple for reasons past historical constraints.

Generating Maps

During a hackathon after our prototype, I wrote a importer tool to turn text into levels using a 3d tile-based system. This system made it so that we didn't have to manually place any object to make a playable level. Maps were easy to create, immediately play test with bots and iterate on in the Unity Editor.

We aren't the first to use an text character system like this but it did serve us well. The Rogue the DOS-era game might be one of the first cases of using ASCII characters as level graphics, with some games and clients swapping the characters for graphic elements. Definitely an influential one at least.

A screenshot of Rogue

These were the characters that our system used:

.  = ground tile
M = brush (you can hide in it if you arent attacking)
! = lava (burns health if you stand on it)
~ = water (blocks your movement unless you're using a movement ability)
o = small wall (blocks movement and projectiles)
0 = tall wall (same thing, just a visual difference)
1 = team orange spawn (also places ground tile)
2 = team blue spawn (also places ground tile)
7 = free for all spawn (also places ground tile)

Example Input:

  ooooooo
  o7.1.~o
  o0...Mo
  o7.2.!o
  o|||||o
  ooooooo
How to make maps! 1. Open up Wordpad or a text editor 2. Change the font to Consolas, or Courier New (or any mono-spaced font, which just means that each character is the same width) 3. Press Insert on your keyboard, this makes it so when you type you replace characters instead of adding new ones next to it 4. Type characters and make a map!

Example Output:

The Arenas

There was so much more design area to explore here, but alas, here are some of the maps in Element Arena that I had the pleasure of making.  They were all focused on 6 player skirmishes in 3v3 or free for all game modes focused on eliminations.