小型RPG制作
Making a Small RPG

原始链接: https://jslegenddev.substack.com/p/making-a-small-rpg

## 从8位灵感到弹幕RPG 为了在1-2个月内完成一个RPG游戏,作者从经典游戏中寻找灵感来确定范围。*Dragon Quest*脱颖而出,展示了简单和巧妙的地图设计——利用世界地图和细节区域之间的比例变化——如何在技术限制下创造出广阔感。这激发了他们为项目设计世界地图的想法。 受到*Undertale*动作导向的弹幕战斗的启发,作者拒绝了传统的回合制系统,认为其耗时过长。他们设想了一个*完全*专注于躲避弹幕和与攻击区域碰撞的战斗系统。*Elden Ring*的升级系统,使用经验作为可花费的货币,死亡时有损失风险,也被采用来创造一个基于属性的RPG体验。*Breath of the Wild*影响了随时挑战最终Boss的自由度,使其他遭遇成为可选的准备。 该游戏使用JavaScript和KAPLAY库开发,并受到Pico-8美学的限制,具有单屏幕世界地图、像素艺术图形以及探索、可选战斗和属性升级的核心循环。该项目目前正在开发中,重点是完善战斗系统并添加背景故事元素。作者正在考虑*Hydralia*或*Hydralia: Donovan’s Demise*作为游戏标题。

相关文章

原文

I’ve always wanted to try my hand making an RPG but always assumed it would take too much time.

However, I didn’t want to give up before trying so I started to think of ways I could still make something compelling in 1-2 months.

To help me come up with something, I decided to look into older RPGs as I had a hunch they could teach me a lot about scoping because back in the 80s, games were small because of technical limitations. A game that particularly caught my attention was the first Dragon Quest.

This game was very important because it popularized the RPG genre in Japan by simplifying the formula therefore, making it more accessible. It can be considered the father of the JRPG sub-genre.

What caught my attention was the simplicity of the game. There were no party members, the battle system was turn based and simple and you were free to just explore around.

I was particularly surprised by how the game could give a sense of exploration while the map was technically very small. This was achieved by making the player move on an overworld map with a different scale proportion compared to when navigating towns and points of interest. In the overworld section, the player appeared bigger while the geography was smaller, allowing players to cover large amounts of territory relatively quickly.

The advantage of this was that you could switch between biomes quickly without it feeling jarring. You still had the impression of traversing a large world despite being small in reality. This idea of using an overworld map was common in older games but somehow died off as devs had less and less technical limitations and more budget to work with.

Seeing its potential, I decided that I would include one in my project even if I didn’t have a clear vision at this point.

Playing Dragon Quest 1 also reminded me of how annoying random battle encounters were. You would take a few steps and get assaulted by an enemy of some kind. At the same time, this mechanic was needed, because grinding was necessary to be able to face stronger enemies in further zones of the map.

My solution : What if instead of getting assaulted, you were the one doing the assault? As you would move on the map, encounter opportunities signified by a star would appear. Only if you went there and overlapped with one would a battle start. This gave the player agency to determine if they needed to battle or not. This idea seemed so appealing that I knew I needed to include it in my project.

While my vision on what I wanted to make started to become clearer, I also started to get a sense of what I didn’t want to make. The idea of including a traditional turn based battle system was unappealing. That wasn’t because I hated this type of gameplay, but ever since I made a 6 hour tutorial on how to build one, I realized how complicated pulling one off is. Sure, you can get something basic quickly, but to actually make it engaging and well balanced is another story. A story that would exceed 1-2 months to deal with. I needed to opt for something more real-time and action based if I wanted to complete this project in a reasonable time frame.

Back in 2015, an RPG that would prove to be very influential released and “broke the internet”. It was impossible to avoid seeing the mention of Undertale online. It was absolutely everywhere.

The game received praised for a lot of different aspects but what held my attention, was its combat system.

It was the first game I was aware of, that included a section of combat dedicated to avoiding projectiles (otherwise known as bullet hell) in a turn based battle system. This made the combat more action oriented which translated into something very engaging and fun.

This type of gameplay left a strong impression in my mind and I thought that making something similar would be a better fit for my project as it was simpler to implement.

While learning about Dragon Quest 1, I couldn’t help but be reminded me of The Legend of Zelda Breath of The Wild released in 2017.

Similarly to Dragon Quest, a lot of freedom was granted to the player in how and when they tackled the game’s objectives.

For example, in Breath of The Wild, you could go straight to the final boss after the tutorial section.

I wanted to take this aspect of the game and incorporate it into my project. I felt it would be better to have one final boss and every other enemy encounter would be optional preparation you could engage with to get stronger. This felt like something that was achievable in a smaller scope compared to crafting a linear story the player would progress through.

Another game that inspired me was Elden Ring, an open world action RPG similar to Breath of The Wild in its world structure but with the DNA of Dark Souls, a trilogy of games made previously by the same developers.

What stuck with me regarding Elden Ring, for the purpose of my project, was its unique way it handled experience points. It was the first RPG I played that used them as a currency you could spend to level up different attributes making up your character or to buy items.

Taking inspiration from it, I decided that my project would feature individually upgradable stats and that experience points would act as a currency. The idea was that the player would gain an amount of the game’s currency after battle and use that to upgrade different attributes. Like in Elden Ring, if you died in combat you would lose all currency you were currently holding.

I needed a system like this for my project to count as an RPG. Since by definition an RPG is stats driven. A system like this would also allow the player to manage difficulty more easily and it would act as the progression system of my game.

When I started getting into game development, I quickly came across Pico-8.

Pico-8, for those unaware, is a fantasy console with a set of limitations. It’s not a console you buy physically but rather a software program that runs on your computer (or in a web browser) that mimics an older console that never existed.

To put it simply, it was like running an emulator for a console that could’ve existed but never actually did. Hence the fantasy aspect of it.

Pico-8 includes everything you need to make games. It has a built-in code editor, sprite editor, map editor, sound editor, etc…

It uses the approachable Lua programming language which is similar to Python.

Since Pico-8 is limited, it’s easier to actually finish making a game rather than being caught in scope creep.

One game made in Pico-8 particularly caught my interest.

In this game you play as a little character on a grid. Your goal is to fight just one boss. To attack this boss, you need to step on a glowing tile while avoiding taking damage by incoming obstacles and projectiles thrown at you. (Epilepsy Warning regarding the game footage below due to the usage of flashing bright colors.)

This game convinced me to ditch the turned based aspect I envisioned for my project entirely. Rather than having bullet hell sections within a turn based system like in Undertale the whole battle would instead be bullet hell. I could make the player attack without needing to have turns by making attack zones spawn within the battlefield. The player would then need to collide with them for an attack to register.

I was now convinced that I had something to stand on. It was now time to see if it would work in practice but I needed to clearly formulate my vision first.

The game I had in mind would take place under two main scenes. The first, was the overworld in which the player moved around and could engage in battle encounters, lore encounters, heal or upgrade their stats.

The second, being the battle scene, would be were battles would take place. The player would be represented by a cursor and they were expected to move around dodging incoming attacks while seeking to collide with attack zones to deal damage to the enemy.

The purpose of the game was to defeat a single final boss named king Donovan who was a tyrant ruling over the land of Hydralia where the game took place. At any point, the player could enter the castle to face the final boss immediately. However, most likely, the boss would be too strong.

To prepare, the player would roam around the world engaging in various battle encounters. Depending on where the encounter was triggered, a different enemy would show up that fitted the theme of the location they were in. The enemy’s difficulty and experience reward if beaten would drastically vary depending on the location.

Finally, the player could level up and heal in a village.

I was now ready to start programming the game and figuring out the details as I went along. For this purpose, I decided to write the game using the JavaScript programming language and the KAPLAY game library.

I chose these tools because they were what I was most familiar with.

For JavaScript, I knew the language before getting into game dev as I previously worked as a software developer for a company who’s product was a complex web application. While most of the code was in TypeScript, knowing JavaScript was pretty much necessary to work in TypeScript since the language is a superset of JavaScript.

As an aside, despite its flaws as a language, JavaScript is an extremely empowering language to know as a solo dev. You can make games, websites, web apps, browser extensions, desktop apps, mobile apps, server side apps, etc… with this one language. It’s like the English of programming languages. Not perfect, but highly useful in today’s world.

I’ll just caveat that using JavaScript makes sense for 2D games and light 3D games. For anything more advanced, you’d be better off using Unreal, Unity or Godot.

As for the KAPLAY game library, it allows me to make games quickly because it provides a lot of functionality out of the box. It’s also very easy to learn.

While it’s relatively easy to package a JavaScript game as an app that can be put on Steam, what about consoles? Well it’s not straightforward at all but at the same time, I don’t really care about consoles unless my game is a smash hit on Steam. If my game does become very successful than it would make sense businesswise to pay a porting company to remake the game for consoles, getting devkits, dealing with optimizations and all the complexity that comes with publishing a game on these platforms.

Anyway, to start off the game’s development, I decided to implement the battle scene first with all of its related mechanics as I needed to make sure the battle system I had in mind was fun to play in practice.

To also save time later down the line, I figured that I would make the game have a square aspect ratio. This would allow me to save time during asset creation, especially for the map as I wanted the whole map to be visible at once as I wouldn’t use a scrolling camera for this game.

After a while, I had a first “bare bones” version of the battle system. You could move around to avoid projectiles and attack the enemy by colliding with red attack zones.

Initially, I wanted the player to have many stats they could upgrade. They could upgrade their health (HP), speed, attack power and FP which stood for focus points.

However, I had to axe the FP stat as I originally wanted to use it as a way to introduce a cost to using items in battle. However, I gave up on the idea of making items entirely as they would require too much time to create and properly balance.

I also had the idea of adding a stamina mechanic similar to the one you see in Elden Ring. Moving around would consume stamina that could only replenish when you stopped moving. I initially though that this would result in fun gameplay as you could upgrade your stamina over time but it ended up being very tedious and useless. Therefore, I also ended up removing it.

Now that the battle system was mostly done, I decided to work on the world scene where the player could move around.

I first implemented battle encounters that would spawn randomly on the screen as red squares, I then created the upgrade system allowing the player to upgrade between 3 stats : Their health (HP), attack power and speed.

In this version of the game, the player could restore their health near where they could upgrade their stats.

While working on the world scene was the focus, I also made a tweak to the battle scene. Instead of displaying the current amount of health left as a fraction, I decided a health bar would be necessary because when engaged in a fast paced battle, the player does not have time to interpret fractions to determine the state of their health. A health bar would convey the info faster in this context.

However, I quickly noticed an issue with how health was restored in my game. Since the world was constrained to a single screen, it made going back to the center to get healed after every fight the optimal way to play. This resulted in feeling obligated to go back to the center rather than freely roaming around.

To fix this issue, I made it so the player needed to pay to heal using the same currency for leveling up. Now you needed to carefully balance between healing or saving your experience currency for an upgrade by continuing to explore/engage in battle. All of this while keeping in mind that you could lose all of your currency if defeated in battle. It’s important to note that you could also heal partially which provided flexibility in how the player managed the currency resource.

Now that I was satisfied with the “bare bones” state of the game, I needed to make nice looking graphics.

To achieve this, I decided to go with a pixel art style. I could spend a lot of time explaining how to make good pixel art but, I already did so previously. I recommend checking my post on the topic.

I started by putting a lot effort drawing the overworld map as the player would spend a lot of time in it. It was a this stage that I decided to make villages the places where you would heal or level up.

To make this clearer, I added icons on top of each village to make it obvious what each was for.

Now that I was satisfied with how the map turned out, I started designing and implementing the player character.

For each distinct zone of the map, I added a collider so that battle encounters could determine which enemy and what background to display during battle. It was at this point that I made encounters appear as flashing stars on the map.

Since my work on the overworld was done, I now needed to produce a variety of battle backgrounds to really immerse the player in the world. I sat down and locked in. These were by far one of the most time intensive art assets to make for this project but I’m happy with the results.

After finishing making all backgrounds, I implemented the logic to show them in battle according to the zone where the encounter occurred.

The next assets to make were enemies. This was another time intensive task but I’m happy with how they turned out. The character at the bottom left is king Donovan the main antagonist of the game.

While developing the game, I noticed that it took too much time to go from one end of the battle zone to the other. This made the gameplay tedious so I decided to make the battle zone smaller.

At this point, I also changed the player cursor to be diamond shaped and red rather than a circle and white. I also decided to use the same flashing star sprite used for encounters on the map but this time, for attack zones. I also decided to change the font used in the game to something better.

At this point, the projectiles thrown towards the player didn’t move in a cohesive pattern the player could learn over time.

It was also absolutely necessary to create a system in which the attack patterns of the enemy would be progressively shown to the player.

This is why I stopped everything to work on the enemy’s attack pattern. I also, by the same token, started to add effects to make the battle more engaging and sprites for the projectiles.

While the game was coming along nicely, I started to experience performance issues. I go into more detail in a previous post if you’re interested.

To add another layer of depth to my game, I decided that the reward you got from a specific enemy encounter would not only depend on which enemy you were fighting but also how much damage you took.

For example, if a basic enemy in the Hydralia field would give you a reward of a 100 after battle, you would actually get less unless you did not take damage during that battle.

This was to encourage careful dodging of projectiles and to reward players who learned the enemy pattern thoroughly. This would also add replayability as there was now a purpose to fight the same enemy over and over again.

The formula I used to determine the final reward granted can be described as follows :

finalReward = baseReward * currentHp/hpBeforeBattle

At this point, it wasn’t well communicated to the player how much of the base reward they were granted after battle. That’s why I added the “Excellence” indication.

When beating an enemy, if done without taking damage, instead of having the usual “Foe Vanquished” message appearing on the screen, you would get a “Foe Vanquised With Excellence” message in bright Yellow.

In addition to being able to enter into battle encounters, I wanted the player to have lore/tips encounters. Using the same system, I would randomly spawn a flashing star of a blueish-white color. If the player overlapped with it, a dialogue box would appear telling them some lore/tips related to the location they were in. Sometimes, these encounters would result in a chest containing exp currency reward. This was to give a reason for the player to pursue these encounters.

This is still a work in progress, as I haven’t decided what kind of lore to express through these.

One thing I forgot to show earlier was how I revamped the menu to use the new font.

That’s all I have to share for now. What do you think?

I also think it’s a good time to ask for advice regarding the game’s title. Since the game takes place in a land named Hydralia. I thought about using the same name for the game. However, since your mission is to defeat a tyrant king named Donovan, maybe a title like Hydralia : Donovan’s Demise would be a better fit.

If you have any ideas regarding naming, feel free to leave a comment!

Anyway, if you want to keep up with the game’s development or are more generally interested in game development, I recommend subscribing to not miss out on future posts.

In the meantime, you can read the following :

You Can Now Make PS2 Games in JavaScript

I recently discovered that you could make PS2 games in JavaScript. I’m not even kidding, it’s actually possible. I was working on a project and had my phone near my desk when I received a notification. Upon further inspection, it came from itch.io which was a platform where I usually published most of my web games.

Export Web Games for Desktop in One Click

In a previous post, I tackled the various options one could use to make their web games playable offline as installable desktop apps. This would enable using web technologies to make games that could be sold on a platform like Steam.

联系我们 contact @ memedata.com