[PoC] The monster's vault

[alvov]

Hi everyone!

Just wanted to share a small proof-of-concept game I've been working on for a while. It's called The monster's vault.

The main goal is to find a way out of a dark creepy dungeon, pull a lever that opens the exit door, while not being caught by a wandering monster that dwells in the darkness, and bla-bla-bla... the whole point here is not about gameplay anyway.

This game is inspired by Keith Clark's demo of an HL2 location made entirely by CSS 3d transforms. I tried to repeat his approach by making a browser 3d game with first-person view based on CSS transforms without any use of canvas graphics. My other goal was to try out a number of modern web technologies and APIs available in the browser, so here's what I came out with.

1. ReactJS as a rendering framework and Redux as a game state manager. Kind of a questionable choice for a game, one may think, but hey, as I said, it's a proof-of-concept WIP demo pet home project =)
2. Pointer lock events to control the cursor so that it cannot flow out of the screen.
3. Gamepad api to support my Xbox One gamepad. I haven't been more happy when it actually worked (not sure about other controllers though).
4. Web audio api to control the sounds and the music. It provides a way to place a sound in a 3d space and even make it spread in a certain direction, and that's really awesome. Using your headphones while playing is highly recommended.
5. Service worker makes the game work offline as it caches all the resources after the first load. It can get annoying though, when you start facing the problems with invalidating the cache.
6. I also tried out the svg lighting filters to simulate some shaders on the textures (set on highest graphics quality value in the Settings section). It looks neat but drops the fps dramatically.

Some conclusions:

• declarative 3d graphics with CSS 3d transforms and animations are cool and relatively easy to use, but not performant enough (which is totally fine)
• modern browsers have some really great APIs helpful for creating various web games
• making horror games is a huge, huge fun

PLEASE NOTE: The monster's vault is only a desktop game and is viewed best in latest Google Chrome. It is inconceivably untested and may not work as expected on most machines and browsers. Some of the technologies used here are still not standardized and may break in the future. Also, the code is not optimised in any way, it weights some MBs. The low rendering FPS is compensated by the high cooler's RPS =) Anyway, I warned you.

The game's github repo with some gifs, controls and credits — https://github.com/alvov/the-monsters-vault-game.

You can play the game here: https://alvov.github.io/the-monsters-vault-game.

Thanks!

Edited March 6, 2017 by alvov
Had to rename the game project