3D TOMB II : The tomb of the 4096 mummies

About

3D TOMB II is a First Person Shooter in a fully textured environment done in less than 4k of JavaScript by Mathieu 'P01' HENRI originally made for the5k 2004.

The goal of the5k was to create a web page in a maximum of 5120 bytes all files included. Being a demo scener at heart, I had to aim for the more challenging demo scene category : 4k ( 4096 bytes ).

Motivation

The feedback I received for 3D TOMB during the previous edition of the contest combined with the great entries presented there were far enough to motivate the creation of a sequel. This time I wanted to push JavaScript even further and increase everything ( the size of the rendering area, the number of items, enemies, textures, levels ... ) and reduce the size.

StoryLine and controls

Now, you are Andrew R. Thompson, relic hunter, looking for the Great Mummy. An ancient text lead you to the Tomb of the 4096 mummies. To explore it you can press the ARROWS to move and turn, X and C to strafe, and SPACE to shot with you handgun in case of danger. And the dangers are many. Each floor of the tomb is guarded by some creatures. Luckily for you, you should find useful items left by previous explorations. Only thing you know is that the architects of the Tomb of the 4096 mummies followed strict patterns to ensure its stability. The access to the next floor is located at the opposite end of the entrance.

Head Up Display

The HUD ( head up display ) is placed on the left of the game area and gives various informations to the player.

From top to bottom : health points ( 10 at the beginning of each level ), ammos ( 50 at the beginning of each level ), level, score.

Items and creatures

namescreenshothealthammoscore
Medikit+2/+1
Tombstone/+3+1
Treasure/+5+10
Guardian mummy3/+5
Dark guardian5/+10

Who did that ?

Mathieu 'P01' HENRI. My passion for computer science and computer graphics began in the mid 80s and lead me to the demo scene then to the web development.

As a web developer, I've been involved in the development of many websites, intranet, web applications and technical demos on desktop, mobile phones, game console and other devices for various clients such as the French precidency, Nintendo, Coca-Cola, some unions and TELCO, etc ...

In my spare time, I enjoy extreme size optimization. I grabbed the top spot and short of the whole podium of both editions of the 256b.htm contest were the goal was to make a web page in just 256 bytes. Maintained the 256bytes demo archive for a couple of years, and produced JavaScript demos and other extreme size productions such as WOLF1K at the JS1K contest, and keep in Assembly on PC and Atari.

I attended the Institut Universitaire et Technique of Le Puy en Velay, France where I got a Bachelor of Science in Computer Science and Computer Graphics with the highest GPA. Then I worked 5 years as a web developer in Paris. Since 2005, I work for Opera Software in Oslo, Norway as a JavaScript developer.

My other productions are available on www.p01.org, along with some articles, experiments, my résumé and more.

Technical informations

Let me know if you want to know more about an aspect of 3D TOMB II covered, or not, in this section:

The sizes mentionned below are before compression.

Texture generation ( 349 bytes )

To bring more diversity to the presentation of the game, the floor and ceiling textures are generated. For each level, 6 textures of 8x8 are generated by combining 3 basic textures and a mathematical pattern. There's 8 mathematical patterns and 3 palettes which give the following 144 textures.

The mathematical pattern are based on an operation between the X and Y coordinate of the textures. The operations performed are, in order of appearance :

  1. binary exclusive or
  2. addition
  3. binary or
  4. substraction
  5. multiplication
  6. binary and
  7. modulo
  8. division

Maze generation ( 214 bytes )

The levels are enclosed in an 8x8 square, with the entry point in the top left wall and the exit point in the bottom right.

Instead of using a complex multiple seeds based generator, a more size efficient method is used. Walls are created at random in the inner 6x6 square. Due to their random position, there's not always a clear path out. The idea is to use a single seed and "dig" a way out. Starting in front of the exit it randomly goes up or left til it hits the entry point.

And voilé, we've got a random and good enough maze with a clear path to the exit.

Sprites rendering and animation

To render and animate the sprites, the old, but unequalled, 'canvas' method is used. It has nothing to do the CANVAS tag, but refers to the concept of the praxinoscope. A strip of pictures is moved inside a 'canvas' only showing one frame. The advantage of this technique over CSS sprites is that it allows to scale the sprites.

All you have to do is nest an IMG tag sized in percentages within a DIV ( the 'canvas' ) hidding the overflow. Then all you have to do to show the frame #2 is to set the left property of the IMG to -200%.

Notice that the DIV tag is not necessary per se but without it the IMG must be clipped using the CSS clip property and its position must be adjusted accordingly. Also IE doesn't support the CSS clip property but uses its own proprietary syntax to achieve the same effect. Therefore it is more complex, bigger, and slower without a 'canvas' element.

Maze rendering ( 516 bytes )

3D TOMB II only uses floor casting. The ceiling and floor being equidistant to the player's eye, there is no need for ceiling casting. Also using floor casting eliminates the need for a classical ray casting engine. Rays are cast from left to right, to cover the player's field of view, from bottom and upward until a wall is hit.

Like in ray casting, the rendering is decomposed in slices. Each slice is enclosed in its own element on which the z-index is set thus creating a Z buffer to clip the sprites of the items and creatures.

Frequently Asked Questions

Answers