Commandos: BEL – HTML5 – Recreating the classic 2.5D real time tactics game in the browser

After my last game recreation project, Command and Conquer in HTML5 (a complete real time strategy game with multiplayer implemented in HTML5), I was looking for a new and bigger challenge.

My most recent project, a recreation of Commandos: Behind Enemy Lines in HTML5, makes Command & Conquer feel like a kiddie project.

While Command & Conquer took me around three weeks for a first version, and then a couple of months of iterating to create the polished version that it is today, Commandos has been 8 months of slogging just to get the first working game level out.

Every few weeks into the project, I would reach a point where I would think “There is no way I am going to be able to do this bit. I have no idea how to…”, and a few days later, magically, I would find just the thing that I needed to get it done.

Over this period, I’ve gone through what feels like hundreds of articles and computer science Phd papers on path-finding, handling polygons, depth sorting and various aspects of game artificial intelligence.

This has honestly been one of the toughest projects I have ever taken on by myself. Looking back, I have no idea how I ever came this far. In fact, I am amazed that I actually managed to complete this project.

Here is a quick video of the project.

But what really made this project so hard?

I consider Commandos: Behind Enemy Lines a 2.5D, real time tactics game.

What the 2.5D means is that while the game used 2D assets and images, all the game elements contain 3D position information (x, y and z coordinates) as well as shape information (length, breadth, height). This simple difference however brought on most of the challenges that I had to face.

The first and biggest challenge while recreating the game was just rendering everything onto the screen. C&C was entirely 2D, so depth sorting was as simple as drawing everything from back to front and left to right, and everything just looked more or less OK.

Depth Sorting in Commandos HTML5

Depth Sorting is so simple with these blue lines

However with Commandos, things got a lot more complicated. Game elements are not positioned along the X & Y axis, and can overlap each other in very different ways, making depth sorting slightly more challenging.

I tried several different implementations. With each implementation, I would find some items rendered correctly, while others would render incorrectly.

After tons of research and experimentation, I finally managed to come up with a reasonably simple and elegant solution – First do a simple comparison to decide whether or not each item is in front or behind every other item, then run a topological sort to order the items for rendering. The image shows how I use a simple line across each item to decide whether another item is ahead or behind. As you can see, the results are pretty decent.

Commandos HTML5 Path Finding

Pathfinding  using a mesh of polygons

The next big challenge was path-finding. Unlike C&C and it’s simple grid based A* path finding, Commandos uses a polygon based mesh and needs some pretty flexible pathing. I originally started with a simpler implementation using points-of-visibility pathing, however I finally had to switch to a full-blown navigational mesh with path smoothing to allow for everything that commandos needs, such as climbing up ramps and traveling across bridges.

Again, everything had to implemented from scratch and I didn’t use any libraries for it.

Commandos HTML5 Guard AI

Guard AI – Guards follow footsteps in the snow

The next big headache was the guard AI.

The guard vision and visibility cone computations needed to be fast and optimized since they were calculated in real time so they could be used to decide when a guard could see something.

That, combined with a very tricky AI involving some crazy state flip-flopping, meant it took me a couple of months before the guards could even see and attack a commando properly.

At this point guards can patrol or watch areas, investigate suspicious noises (explosions, gunshots, yelling), follow foot steps, and finally chase commandos and attack or detain them.

Apart from these were all of the little things that I never thought would take much time, which in hindsight turned out to not be so little and took quite a lot longer.

Climbing Walls - Who thought this would be so hard

Climbing Walls – Who thought this would be so hard

  1.  Building a complete in-game multi-window system.
  2.  Teaching the commando how to climb walls (starting with detecting whether a surface was climbable).
  3.  Building a very intricate game loader system that handled mission files, sprite sheets, audio sprite sheets and the in-game menu files
  4.  A custom in-game menu system.
  5. Handling Weapons, Driving vehicles, Rowing boats, Scuba diving, Explosions, Using Decoys, Hiding inside buildings and every other action the commandos can take.

After 8 months of work, I’m happy to say the game is now finally ready and playable.

If you haven’t tried it out yet, you can play Commandos: Behind Enemy Lines – HTML5 here.

Looking back, I don’t know if I regret taking on this project. Thanks to this project, I’ve learned an incredible amount – about  computer science and AI, about better game programming techniques and practices, about automating and streamlining my entire game development process. But the biggest thing I learned was what it takes to build a really big game in HTML5, and how to push myself to achieve something that I never thought possible.

Now that the first mission is finally complete, I’ll probably take a break for a while. Once I come back, the plan is to add more missions, and a multi-player cooperative mode using HTML5 Websockets. Again, all playable in your browser without needing any installation.

If you have any feedback or questions about this project, please feel free to leave a comment below or on the game page.

If you would like to get notified about future game projects, get exclusive access to beta test new project updates, or learn advanced game programming and collaborate with me on future projects, please sign up using the form below. Make sure you fill out the check boxes correctly so I know what you are interested in.

* indicates required

Which of these do you want to do?

9 thoughts on “Commandos: BEL – HTML5 – Recreating the classic 2.5D real time tactics game in the browser

    1. Aditya Ravi Shankar

      Press escape during intro to skip…

      And yeah, I realize the scroll implementation isn’t ideal… I had to do it this way because of a limitation of working in HTML5…. I’ll try and tweak it slightly …

      Try using the shortcut keys instead of the buttons on top for now… C to crouch, S to stand…….

  1. ultimatedelman

    Found a bug… if you have your gun drawn and a guard sees you and runs after you, and you are clicking on them while they’re out of range, they’ll stop and not shoot you. Also, trying to play this on a touch pad is HARD, haha.

    1. Aditya Ravi Shankar

      I haven’t used a mouse in years…. I pretty much played the game a thousand times while testing, always using my mac’s touch pad… You just need practice 😛

      Thanks for bug report… I’ll take a look once I get back to working on the game… 🙂

  2. nicmare

    alright. driving the truck works but you can’t drive over the enemies. and as soon as they start to fire, you will die immediatly 🙁

Comments are closed.