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 ).
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
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 ...
My other productions are available on www.p01.org, along with some articles, experiments, my résumé and more.
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 :
- binary exclusive or
- binary or
- binary and
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
- 3D TOMB and a whooping 1116 bytes smaller than WOLF5K which was in black and white with no floor mapping and a single kind of enemies with no animation.