How I Used Vue JS to Make an RPG Game:

A Guide to Starting Your Own Game — What to Think About First

Hello there, Medium!

I’m Sean Yager, an artist and novice web dev using the internet to make all sorts of experimental websites and games. My most recent endeavor, “Moebius Dungeons” is a roguelike, dungeon crawler RPG based on a gameified book I published in 2018.

“Moebius Dungeons” will be abbreviated “MoDun” from here on for brevity.

Moebius Dungeons — A Roguelike Web Browser Game Made Using Vue JS

This article is the first of many that I intend to write cataloguing my experience building “MoDun” from the ground up. I’ll outline the troubles, pitfalls, and learning curves I’ve navigated along the way in hopes to teach others where to start should they wish to try their hands at making a game.

For the first of these articles I’ll cover how I outlined a plan of attack from almost nothing.

Want to learn to code faster and have fun along the way? Apply the code you learn to something you’re passionate about and learning will become less like work and more like play.

Head’s up, all mentions of React and Vue in this article are referring to Vue 2, and React 16.

For the last 8 months of 2020 I learned Vue and React, both are popular frameworks nowadays, but I felt drawn more to Vue.

Vue is sleek and tailored to the functional, DOM heavy programming I tend to gravitate towards. I was sold on using Vue for my framework but was far from ready to start coding. I needed to get all my ducks in a row first.

So How Did I Start?

Before you touch a single line of code, write down your plans, your hopes, your ideas for coding, the layouts, the sounds. Everything! This is where you’ll fully understand what you’re attempting to tackle and how you can prepare for when things likely go terribly wrong. Don’t be defeated, instead ask yourself, what problems do I see myself facing? What will I need to create, code, design, learn, or research to complete this idea?

I ended up settling on a few key aspects of the app. I narrowed those aspects into basic categories: Data, Layout, Animation, Sound, Music, and Art.

Data & Layout

Vue is data driven and reactive, with a myriad of ways to handle displaying that data. Unfortunately, out of the box Vue data can only be passed from parent to child through props and from child to parent through the emit event.

I knew I would need to be able to pass data between many different components, and communicate arrays, objects, and variables across multiple files. I researched using an Event Bus but ultimately found that VueX (a state management pattern for Vue) would fit my needs best, allowing a single source of data to be accessed and managed easily. I could store the player stats, monster stats, items, and leaderboard tracking all in one central place. How cool!

For the layout, I knew I’d be tackling some moderately complicated CSS, and HTML. I’ll discuss this in more detail in my next article on MoDun.

Animation

I knew I would need animation, and Vue’s documentation outlines the built in <transition> elements and conditional :class binding. Paired with a CSS library called Animate.css which I could plug in an call things good enough, I started forming a plan for sound effects and background music.

Sound and Music

I found a wonderful, (mostly) open license website called freesound.org, where people create sounds and (usually) allow others to use their work in projects so long as there is proper attribution. Using those sounds saved me some time but I wanted custom audio made too, there would be little interactions that I wanted to make perfect. I needed sounds for talking to shopkeepers, or fighting monsters, coin sounds for buying items, etc. I could record some on my own, using a free audio software called Audacity and a Meteor mic, but I hired some voice actors on Fiverr.com for the sounds I felt I couldn’t record on my own.

I needed a library for starting, stopping, and modifying sounds too. A quick Google search lead me to Howler.js, the documentation was solid, and it seemed flexible enough for what I’d need, so I checked that off the list.

Art

Last, I needed artwork. Thankfully, I’ve been drawing for years and already had most of what I wanted to include for the monsters and characters, but I phoned in the item icons using a few various sets I’d bought from the infamous Humble Bundle.

At this point I had a loose plan written down, scribbled on pieces of paper. Mad-man drawings and outlines littering my home office, and cluttering my desk. Here’s about what it looked like:

I like to think a chaotic plan is better than no plan at all.

The above plan went through something like 4 or 5 revisions before I felt happy with the result. What you see here is one of the very first loose ideas. I went on to include a list of stats, like health, armor, and attack values for player and monsters. I made simple items, each with their own stats, some of which I made up as I went.

Conclusion

If you take one concept away from this article, keep in mind the importance of a plan. MoDun took months of working, tweaking, and redesigning to become the game it is today, and I planned for more than a week before I touched any code deeper than HTML and CSS.

Having a plan, even a rudimentary one saved me hours of stumbling about aimlessly in my code. Maybe having a plan is common sense, but I know I need to be reminded to slow down once in a while and find my bearings.

“Measure twice, cut once.” — My Engineer Dad

Thanks for reading, I’ll be writing more articles about the making of MoDun after the new year. In the mean time, feel free to play the game at MoebiusDungeons.com. Here’s a short gif of the game in action.

Hope to see you in the Leaderboards!