Jump to content

[PoC] The monster's vault


alvov
 Share

Recommended Posts

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.

screenshot-001.jpg.86f171a546e6d30b6754e9ae6dd9775e.jpg

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.

screenshot-002.jpg.26c906758b059be6e3ee7c35ce0b7da3.jpg

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!

screenshot-003.jpg.4f91bf00008b7e4d58e548dfd6c63285.jpg

Edited by alvov
Had to rename the game project
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...