Edward EmanuelWhat I Learned Building the InterWebs’ First Firefly Meets Oregon Trail Text-Based Game
At Font Awesome, we schedule cool-down periods to learn new technologies, work on bugs or extra features, and pursue our interests. The goal is to pursue creative ways to better ourselves and Font Awesome.
During a recent cool-down, I wanted to spend time doing something innovative and different while also learning new technology. Ultimately this lead me to learn Vue, and gave me a chance to build a text-based game!
Space Awesome has launched and is ready to play! Use the link below to start your next space adventure, and read on to learn more about how we built it.
How a TRS-80 Fueled My Love for Programming
My interest in game development started over 30 years ago when a friend showed me a text-based game he built on a TRS-80 Color Computer called “Thaze’s Maze.” The object of the game was to make it through a maze while avoiding skeletons and ghosts.
While Thaze’s Maze was still in construction, it sparked something inside of me. So at the age of 12, I taught myself how to program using the manual that came with our computer, “Getting Started With Extended Color BASIC.” That marked the beginning of a life-long love of computers and programming.
The Text-Based Game Idea Becomes Reality
Over the years, I have started (but never finished) dozens of game projects. Most of my ideas end up being way too big for a single programmer or need a full-time graphic artist. On top of that, I’m a busy guy trying to balance work, family, learning, and hobbies. Try as I might, I’d lose momentum and end up with nothin’.
Ten percent of nothin’ is … let me do the math here … nothin’ into nothin’ … carry the nothin’ …
Jayne (Firefly Ep. 1)
Despite my past failures, this time would be different. Now I had time, thanks to Font Awesome’s cool-down period! I just had to come up with a killer idea I could complete in a short time, and that would work well in VueJS. And I also wanted to use as many Font Awesome icons as possible. Simple.
Learning VueJS While Showcasing Font Awesome Icons
At Font Awesome, we use a host of different languages, platforms, and frameworks–so, I had a lot to learn, and focused my time learning VueJS, a popular javascript platform. I’m interested in game development, and learn best by doing, so I decided to build my TBG in VueJS.
Video games typically have a lot of graphics. While I am the king of horrible photoshopping, I decided not to rely on my graphic arts skills. Fortunately, in December of 2019, Font Awesome released a whole mess of space icons. And they were perfect for the retro indie aesthetic of my project!
Plus, using Font Awesome icons as the source of graphics for my game would make it a great marketing showcase.
The Process of Building Space Awesome with VueJS
I had the basic idea for Space Awesome. So after doing some research, i.e., playing through Oregon Trail a few times, I got to work. The game would revolve around events and respond to the player’s choices. So, I pitched the game as “Firefly meets Oregon Trail.”
VueJS allows you to build reactive web apps, so you can change content without navigating to a new URL or reloading the page in your browser. That reactivity lets us update the UI as things happen within the game. Mix that with CSS animations, and the result is awesome.
After building the basic event system, I started laying on more details. I added crew attributes, ship resources, outposts, aliens (like a shape shifting vampire alien), and memorable diseases like space butt monkeys.
There isn’t a shape shifting vampire alien icon so I made due with the croissant!
Storing Data with VueX ORM
As the game started taking shape, I realized I needed a place to store events, names, and other data. A lot of that data is linked — events have choices, choices have results, etc.
There is a strong argument for using a relational database, but it felt like overkill for this project. VueX is the most commonly used component for storing and managing data in a VueJS. But, it lacks an ORM structure.
Thankfully, someone built VueX ORM to already address this problem, allowing you to create relationships between data. Plus, VueX ORM has a nice query API. Since we use VueX ORM at Font Awesome, I had yet another great excuse to learn more about that, too.
We’ve done the impossible, and that makes us mighty.
Captain Mal (Firefly Ep. 1)
After getting Space Awesome to a semi-playable state, I sent it out to my coworkers. I gathered their feedback and asked for suggestions. Most everyone on the Font Awesome team are huge fans of science fiction. We even have an entire slack channel dedicated to Star Wars, so it was no problem getting feedback. I took their comments and suggestions and made a bunch of improvements to Space Awesome.
Learning VueJS and Building a TBG: Two Birds, One Stone!
For years I wanted to build a game. Thanks to my job at Font Awesome, I was able to spend time learning VueJS and accomplish that longtime goal. The result? Space Awesome! A retro text-based game mixed with a healthy dose of science fiction. (Inspired by Oregon Trail, of course.)
About Me
I have been programming for over 20 years and have learned many different programming languages. Before my time at Font Awesome, I spent seven years in the Python/Django world. I am the primary contributor to the Python-Quickbooks library.
