Haze RTS


Haze is a Real Time Strategy browser game that I am currently developing. It has become the testing platform for a more extensive RTS that I am developing. But, before diving into any large project it's important to know how to develop all the essential elements. It probably won't be released to the public, but it serves as a good example of most of the non-graphics related subjects that I have learned over the past couple years.


I began with developing a central camera system. It's set up as a zero-rotation 3D camera. It runs a variable ratio calculation where the longest side is set to one. This is perfect for browsers since you're never guaranteed a standard view size. The camera modifies the canvas' transforms meaning that world values don't have to be recalculated.


Haze uses four different path finding systems depending on the situation. Crow-flies, A-Star, a gradient map solution, and Flocking. When pathing the unit immediately checks to determine if there is a direct path to the position using the Cohen-Sutherland line clipping algorithm. This crow flies technique substantially decreases calculation costs, since players will be moving units small clear distances when micro-managing.

If the unit can't go directly to the move point, it then decides whether to run an individual A*(A-star) pathfinding function or, depending on the number of units to be moved, creates a gradient map that is better suited for large numbers of units.

If there are enough units to warrant a gradient solution, a gradient map is created using an algorithm similar to the one described in this article. For optimization the algorithm gradients are only calculated to the units point, then, if a unit is farther out, the gradient is created to that distance and so on.

If the unit uses a basic A* system it will check all of it's neighbor units to see if they have already run the pathfinding calculation. While pathing the unit will use Boid Flocking techniques to make sure that it is a correct distance from other units, and actively avoiding non-traversable objects that it may be pushed into. Using these techniques I can achieve in browser active unit counts of well over 500. Future developments using WebGL/WebCL should allow that number to be much higher.

Artificial Intelligence

Beyond simply pathfinding I needed to develop an enemy to fight against. I ended up creating a three-part system that managed individual armies, military decisions, and global economy. The system is setup to pass information in that order so that each decision can be made as logically as possible.

I developed the individual army system to be stateless. On each update units near each other will form up to create an army. This army then checks its surroundings to see if there are other allied or enemy armies around it. If there are enemy armies nearby and there is a good chance of defeating them it will engage that army. If the enemy is too strong the army will automatically seek the nearest and largest ally army, which if strong enough will automatically come to help, or retreat back to base.

The Military AI system is a simple state machine consisting of three states, rallying, attacking, and defending. The Military AI's main goal is to defend the base, so if there is an attacking army it will dispatch troops to destroy the enemy. Otherwise it analyzes the enemy player to determine which units to build to counter the enemy, and whether the military is strong enough to destroy the enemy base. If it is strong enough, the Military AI will proceed to rally its troops near the enemy base and strike with full force.

Finally the Economic AI keeps track of all the other stats, such as power, storage, and income. Additionally it creates the buildings, researches and queues up the units that are needed to counter the enemy army. The system works from a simple need value principle. Everything to be built, researched or queued, is given a value dependent on how necessary it is. The Military AI informs the Economic AI as to which units and how many of each need to be built, and then determines whether extra buildings are needed to meet demand, such as if queues are full or run research to queue the needed units.

User Interface & Fog Of War

I developed the UI in HTML simply for the reason that it's unnecessary to "reinvent the wheel". HTML was developed for the express purpose of delivering text and form based content, and ultimately that's exactly what a UI is. I simply developed a few custom controls, such as flexible queue lists, button lists and description boxes that I could then position anywhere within the screen space.

The base image of minimap was created by a one time analysis of the tile map and the colors of the sprite tiles. This analyzed picture was then stored and drawn first. The units, and buildings were drawn by checking if there were any visible units in an approximate area, depending on the map size, and filling in the corresponding pixels. And finally the fog of war was overlaid on top, making a informative minimap.

Haze for haze I developed a fully customizable keyboard mapping system that allowed me to define key names for all the actions in the game and then assign key values to those names. The system is set up to allow the user to reassign any of the keys, and all keys are saved in cookie format so that the user can save their format. The user can access a basic keyboard configuration menu from the in-game menu to change or reset their key configurations. This made implementing an option to change keys to a grid layout, like that in Starcraft II, trivial.

The fog of war is actually a small inverted mask, with each pixel corresponding to a tile position in the world. On draw state each of the player's buildings and units create a semi opaque radial gradient of their respective vision. That value is then inverted creating the mask. With the fog of war mask I can easily check if an enemy building or unit is visible by the player by checking its grid position's alpha level.


  • Flexible Central Camera
  • Multiple pathfinding solutions
  • Unit Flocking and cohesion behaviors
  • Stateless and State based Artificial Intelligence
  • Fully configurable and savable keyboard layout
  • High speed fog of war/(pseudo lighting)