Even though the games came out more than a decade ago, I still remember the Metroid Prime series as some of the most immersive games I've ever experienced, from the eerie way Samus's face reflects in the visor in dark areas to how you discover the world by physically scanning them.
Source Gaming published a detailed look at how the game's interface elements serve as a narrative tool that elevates the story. It's a great read on Prime's design!
In this project I'm playing around with some front-end work by implementing parts of the game's helmet HUD UI as react.js components.
It's work in progress! I know I've cut some corners here (yes, figuratively and literally), and some of the items don't quite align perfectly.
Also, see my blog post that contains more details on this work.
See the working demo site.
yarn
yarn watch
Then open dist/index.html to see the demo site.
yarn format to prettier-ify the code.
See the demo page.
Note: not published on npm just yet.
- The fact that Dread was announced just before I published this project is complete coincidence.
- I created the SVG files in Figma, which might be somewhat unconventional but it was much easier to pick up than something like Inkscape (and cheaper than Illustrator, of course!)
- Add 'combat visor' screen
- Add 'scan visor' screen