Started in December 2022, a bit of life is an 8-bit, 2D role-playing game designed and programmed by Alexandra Iglesia. The player controls a "Bit": the state of being an average person begins life as during a post-apocalyptic future. The player must travel along the global, fiber optic submarine cable systems and landing stations along the ocean floor in order to meet other Bits. The game was made in three weeks as a final capstone project for Flatiron School's Software Engineering program, and currently consists of an introduction sequence, personality quiz, and keyboard movement.
technologies:
- React Redux for the frontend to centralize application state and logic, enabling state persistence.
- Ruby on Rails for the backend database that includes full user auth with JSON Web Tokens.
- Adobe Photoshop to design 8-Bit graphics, including the main character sprite.
- Adobe Audition for the introductory soundtrack.
- Tiled for the 2D game map.
- TeleGeography’s API to seed data of over 500 real international submarine cables.
- Libraries such as NES.css and NodeJS modules to style in nostalgic, retro game fashion.
- Render to deploy game to web.
challenges I faced and how I resolved them:
- TeleGeography recently made their GitHub page where they once shared the API and code to their Submarine Cable Map private. In order to overcome this, I found a project within the GitHub community that still fetches from the API here.
- For MacBook Pro M1 users, the Tiled application doesn’t respond after a couple of edits to a map. At times, I had to wait an hour before the application started to work again; other times, it didn't respond for a whole night. This kept me from creating more 2D tiled maps efficiently and I ultimately needed to pivot towards other features in order to reach my deadlines. See bug issue here.
features I am looking to implement in the future:
- scaling database for application optimization.
- adding a range of different kinds of Bits. I am currently designing other colors and plan to add the choice option at the beginning (think early Pokemon games).
- more maps
- a longer plotline, which is also in the works
- live chat feature with web sockets
- graphics using Three.js
visit abitoflife.onrender.com
- my instructor at Flatiron School in NYC, Chris K. Erlendson, for guidance
- my tech coach Charlie Kozey, for help and inspiration
- Raquel Román-Rodriguez for the awesome blog post on keyboard custom hooks in ReactJS and CSS tricks to make the sprite move: https://dev.to/raquii/using-two-dimensional-arrays-to-build-a-walkable-game-map-in-react-22e7