An RPG in Vue.js (part 1 — Character Objects)
Recently, I’ve started to learn Vue.js in my free time. Overall, it’s been a really enjoyable and pretty easy framework to pick up. It’s easy on the eyes, pretty intuitively laid out, and has a lot of the same positives I really like in React. But this blog series isn’t for waxing poetic about this delightful framework, it’s about the trials and tribulations of building out a fairly crappy RPG game with it!
So, there are a lot of aspects to a typical RPG game. At some point, we are going to need to try and deal with a grid map or something to move around. We are going to need items for the characters to pick up and collect. Plus we are probably going to need to figure out some sort of purpose or quest that needs to be completed… Honestly, it can start to get overwhelming pretty quickly when you begin thinking about the scope of making a real game that anyone would actually want to play, but let’s not get ahead of ourselves. Instead, keep it relatively simple and by making these first few blogs about building out the battle screen you see when you encounter enemies. Currently, I’ve actually already built out a fair amount of this, so you can trust me when I tell you that even just this battle portion is going to get pretty complicated, and even a bit convoluted logic-wise, so buckle up!
For my game, I decided to make it based on my time living in Beijing. I guess I was just missing China and I felt like the Hutong neighborhoods I used to live in, with their centuries-old houses, and maze-like alleyways were the perfect setting for a sort of dungeon-crawler style game. Plus, the hutongs are ripe with unique characters to encounter!
Speaking of characters, let’s start there! After all, we are gonna need some homies to do the battling. Obviously, our characters are going to have to be JavaScript objects if we want them to have any sort of characteristics. So let’s think about what those objects are going to look like. For starters, your character is going to need to have moves, HP, an image, a name, and probably some other stats as well. So this is what I came up with for now.
Above you can see that this bad boy is too long to completely fin all in one screen capture. But luckily, what you can see in the above image is all we’re really gonna need to get an idea of what we’re dealing with. So let’s go through it, skipping some of the more obvious key-value pairs.
Class: Think Pokemon types here (fire, water, etc). I want there to be types of characters to encounter that are stronger against certain other types. We’ll get more into the logic of how this is going to play out later. But here we can see that this character’s class is LaoWai (foreigner),
HP/Starting HP: HP is your health that will go up and down when you heal or take hits, and I have a separate starting HP key because that made it easier to revert your player’s health back after a battle and make sure they don't go over max when they heal. There would be other ways of dealing with those issues, but that’s how I handled them.
Strength: This is an attribute that will eventually improve/lower a character’s attack ability for their basic moves. We will get into the implementation of that logic down the road.
Defense: This stat will have an effect on how much damage attacks do against this player. Logic coming later.
Speed: This will play a role in how often a player dodges an attack. Logic coming later.
SpecialAttack: This stat will have an effect on how much damage a character’s special moves do. Logic coming later.
Now as for the moves… For our sake, each character will have four moves. A standard attack, a more powerful attack (that they can’t use as often), a heal, and an alternative-style attack that only alters the player’s non-HP stats (strength, speed, etc). Each move is going to need to be its own object that’s nested within the larger Character object.
Let’s go through these move keys:
Style: This is just an option between ‘Basic’ and ‘Special’. Basic moves are affected by strength, while Special moves are affected by SpecialAttack.
Type: This is either ‘Attack’ — a move that inflicts damage on a character’s HP or other stats — or ‘Heal’, a move that increases a character’s HP.
High / Low: These stats make up the range of damage done for attacks that inflict damage, or a range for a player’s heal.
The rest (speedIncrease, strengthDecrease, etc) are pretty self-explanatory. They are the values for the effect on a character’s non-HP stats that a player’s fourth move does. They either make a player stronger, or lower an opponent’s speed, or whatever. Think about what ‘Leer’ does in Pokemon.
Wooh, so that was a lot! And we just went through part of one character… All in all, I ended up making 8 or so playable characters, and tons (like way too many) non-playable enemies. So needless to say, just creating the cast of characters you’d encounter in my Hutong Hero game was a monumental time suck.
If you’re following along, just take your collections of objects and save them in some assets folder called ‘enemies’ or ‘heroes’ for now. You could of course also make these in an API if you wanted, but I don’t really think there’s a need for that at the moment.
Next time we’ll start to look at how we can begin putting these guys into the game, and actually start coding some Vue! But for now, I feel like it was good to look at these objects to see how quickly the setup for even a pretty simple game can get complicated really fast!
