Computer Keyboard

Command and Conquer – Programming an RTS game in HTML5 and Javascript

ANNOUNCEMENT: My Book, Pro HTML5 Games is out!!!

Pro HTML5 Games - Aditya Ravi ShankarA lot of people have been asking me for details on how I built the HTML5 version of Command and Conquer.

Based on my experience developing this game, I have just written a book showing readers how to build a complete RTS game in HTML5.

My book, Pro HTML5 Games takes readers through the process of building two complete games – a Box2D Engine based Angry Birds clone and a realtime strategy (RTS) game with multiplayer support.

This book is now available for purchase at Amazon (Pro HTML5 Games on Amazon), Barnes & Nobles (Pro HTML5 Games on Barnes & Noble) as well as the Apress Site (Pro HTML5 Games on Apress).

If you are interested in building professional looking HTML5 games, you should check the book out. If you know anyone who would be interested in this book, please do share this book URL (http://www.adityaravishankar.com/pro-html5-games/) with them.

Read more details about Pro HTML5 Games here.

————–

After writing my first HTML5 game I decided to take on a more challenging project.

Command and Conquer Javascript ScreenshotMy latest project is a recreation of the original Command and Conquer entirely in HTML5 and Javascript.

Command and Conquer is the grand-daddy of all Real Time Strategy games and is probably the game that made the genre popular. My friends and I spent countless hours playing the original as well as subsequent sequels (Tiberian Sun, Red Alert).

Check out the demo video.

You can play the actual game here. Command and Conquer – HTML5 version

This project was a lot more challenging than my previous game, Breakout. In hindsight, I might have wanted to take smaller steps and make a tower defense game instead of jumping directly into an RTS.

Creating even this simple version of the game covered a lot of things.

  1. Using images to recreate the sidebar and game interface.
  2. Using mouse input for unit selection, panning, attacking and user input
  3. Using images as sprites for unit and building animation, and using sprite sheets for better performance
  4. A lot more sounds for units and buildings
  5. Using a finite state machine for handling unit commands, movement, attacking etc.
  6. Using path finding (A*) to navigate around obstructions like buildings, mountains and trees
  7. Using hidden canvas’s for things like fog of war and image manipulation

Obviously because of the size of the project, trying to do the whole thing in under a month all by myself wasn’t the smartest idea. I ended up spending lots of 18 hour work days during this time.

I used to switch between playing the original Tiberian Dawn in a Wine window on my Mac and my JS version on the browser to make sure my version looked EXACTLY like the original. I spent a LOT of time going through C&C forums to understand how to reverse engineer the Tiberium Dawn files to extract the building/unit sprites and audio and reading up on unit specs to figure out how to make the units behave exactly like the original.

Every little thing took time – things like selecting single units, multiple units, being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; Figuring out a decent fog of war implementation; Allowing for building construction, dependencies (Power Plant needed for Refinery, which is needed for Factory), building placement (buildings cannot be constructed on top of other buildings); Depth sorting when drawing so units could move behind buildings and trees.

The next big headache was smooth unit movement. I wanted to do better than the original game, and spent a lot of time going through Starcraft 2 videos to see if I could get a smoother movement closer to the way SC2 handles it. Pathfinding using A* can do some of the work, but gives a clunky movement and causes units to take behave badly/take longer routes when going through bottle necks. I decided to mix A* with a repelling force/steering behavior to improve it. It still has some bugs I need to work out.

I had to fine tune the way units behaved (during patrolling, guarding, attacking). Even the fact that a MCV couldn’t attack and turned into buildings.

Harvesting was a whole different pain in the ass since my collision detection and steering code meant my harvester was initially afraid to return to the refinery :).

While a lot of people have been giving me props for just getting this project out, one of the things that I am proud of is that I completed the first version in around 3 and a half weeks, all by myself.

For people who have been criticizing this project, I’ll say this – “I did this, entirely on my own, unpaid, in three and a half weeks – including one week where I had a fever. Give me a break. It isn’t that bad :)”.

The current iteration of the project contains several levels from both GDI and NOD campaigns. I am also currently testing multiplayer using Node.js, which should be coming soon.

Check out the video demo of the new version of this game that I am working on.

This game has got a lot of attention from online media and FB/Twitter/Google+. The extra traffic brought my server down on its knees and got my account temporarily suspended. This forced me to optimize the game using sprite sheets so it could handle requests more efficiently. You can read more about the whole story here – HTML5 Game Development: Using sprite sheets for better performance (and protecting your server)

Real Time Strategy Game - Pathfinding, Collision Detection & Steering Demo - ScreenshotAfter lots of feedback, I’ve specifically researched and worked on improving the pathfinding of the game. Check out the Pathfinding, Collision Detection & Steering Demo. This is a demonstration of the improved unit pathfinding and movement/steering strategies used in RTS games. Units use A* to plot a path and avoid collision using a ‘soft collision’ radius. They also ask static units to move aside.

Here is a video demonstrating all the features of the new pathfinding code.

Check out the demo here. Switch on “DEBUG MODE” to see how it works. This is still a work in progress. Any comments or feedback (including bugs), is appreciated.

Check out some of the HTML5 games I have written. If you are just starting out with game programming, check out my earlier tutorial on developing a simple Breakout game in HTML5.