15/06
15:04

An FPS in HTML5/JavaScript

As the author of Impact, a JavaScript game engine – which is only meant for 2D games, mind you – I couldn’t let the opportunity pass to create an FPS with it. The idea to use a tile based engine for a 3D game isn’t actually as stupid as it may sound. In fact, the levels for one of the very first FPS, Wolfenstein3D, was created using the tile editor from Commander Keen.

With WebGL we now finally have hardware accelerated 3D support in Browsers, without any plugins. So why the hell not?

The game on the left, Impact's Level Editor to the right

I wrote some quick code for Impact that transforms a set of 2D tilemaps (one each for floor, walls and ceiling) into 3D object, using the excellent Three.JS library. The game itself still works exactly the same as in a 2D top-down view – which is nice, because I have all the necessary stuff for physics, collision detection and object handling in place already.

From Wings3D to Game

Yesterday I added the first weapon, a plasma gun, to the game. First modeled in Wings3D (the only 3D package I can wrap my head around), then traced in Photoshop and finally inserted on a HUD layer into the game.

The screenshot at the bottom also shows the new lighting system – essentially just a layer with color swatches that tints all 3D objects.

All sprites, as well as the weapon, are affected by this lighting layer. This is a very cheap effect, but adds so much more mood to the whole game.

I’m happy with the results so far, but I won’t be able to finish the game on time. I’ll release it as open source once it’s done – hopefully sometime next week. Follow me on Twitter for updates: @phoboslab

 

6

One thought on “An FPS in HTML5/JavaScript”

Leave feedback

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>