How I created an action role-playing game

Let's play neos! (Part 1)

Did you notice that my website allows you to play an Action RPG? No? Then take a look at the footer.

When I started programming this blog, I thought about doing something special. So I started thinking about how to make this website more interesting for people. I asked myself: How cool would it be to have an Easter egg where the visitor can play and explore the website's content in an Action RPG?

Very cool! Now, this blog article is about the game development process. I'm still developing the game so I'll update this first part from time to time.

I recorded a video for the "Neos CMS Online Meetup V - Neos VI & Flow VII" showing the community the game in its early state. Some changes have been made since then. If you've already seen the video and found it interesting, you should read the article anyway :)

In this article series I will explain how I create the game and how I implemented this game in the Neos CMS. This is the first part 😃.

This is the game

Bevor I started I had to read some articles about how RPGs were made in the 90s. What I've learned is that most of these games are actually based on tilemaps. So, we can create the game world from small, regularly shaped images, which are known as tiles. This means that large image files containing whole-layer maps are not required, as they are created multiple times from image fragments.

The most efficient way to store the tile images is with an atlas. These are all of the required tiles, combined into a single image file. When a tile is rendered in-game, it's only a small part of that larger image.
You can compare this technique to a spritesheet known from CSS sprites by using one single background-image and just changing the background-position for a corresponding element.

The following picture shows a tile atlas with 10 x 2 tiles. Some of these tiles* are used as backgrounds, others as objects or overlays in several layers. Different layers automatically create perspectives. In the follwong interaction demo this tile atlas is used as example.

*Please note that some of these tiles are licenced. I bought them from itch.io. If you want, you can buy them there for your own use. Another great resource for tiles is GameDev Market.

Layer Demo (Interactive):

How is this interaction created? Check my CodePen.

In my game I'm using scrolling tilemaps. I had performance issues on my first try as it was difficult to draw scrolling tile maps on a large viewport without lags. For rendering the game im using a canvas element. I was loading the whole map at once, so the problem was that too much data had to be loaded on every Frame when the canvas was rendering the view. There are, however, techniques that can be used to keep scrolling smoothly. The approach was to draw only visible tiles. This means that the tiles are rendered individually in a canvas element via the Canvas API if required, so that unnecessary tiles do not have to be redrawn with each frame. So if you have a 10x10 visible grid, you should load 12x12 tiles to avoid a bleeding effect.

It was important to me that the world looks right and intended because it sets the mood and journey that the player experiences. I installed a software named tiled for creating the worldmap. This makes it very easy to put tiles in a grid because you can see what you do. At the end there is an export function which is basicly an array with Ids for each layer. I really recommend a software like Tiled for that. 

What is the logic behind all this?

At first I have to say that my game is based on game developer technics I learned from mozilla dev articles, which helped me a lot. Some code snippets from there are still used in my code. Among other things, the structure of layers. I'll cover some of these topics in more detail in another part of this series of articles. What I can say in advance is that no javascript game engines are used. The game is based on native JavaScript and a bit of jQuery.

Interested in Game Development? Useful tutorials and technique articles can be found in the MDN game development center. If you want to know exactly how this game works, it is worth reading these articles. I will not go into these basics in my blog article.

Problems I faced

Due to the responsive implementation, the canvas element always takes up 100% of the browser width and height. This means that, despite the technology described above, there are currently performance problems if the game has to load too many tiles (e.g. with a high screen resolution). In addition, animated tiles require additional performance as the sesctios are constantly changing. I still have to work 🔨 on this problem. 

Let's improve this by expanding hard-coded functionality.

Neos is one of the best Content Application Platform I've worked with so far. And here you have a perfect example of how powerful this system is. I thought about making a few hard-coded passages from my game source code maintainable via Neos.

You don't know what neos is? Neos is a content management system. Some also call it an Content Application Platform. The underlying framework makes it possible to create individual extensions via (e.g.) own packages.

Well, there are many ways in which the system can be expanded. I'll show you mine. You can extend this CMS so easily that it is no problem to manage a game on it 😃

Neos Backend
Management

I'll show you two screenshots of my extension in the neos backend. The next part is mainly about that backend module. As you can see there are already some general settings and a JSON builder for game interactions. 

GBA IPS-V2 Mod
GBA IPS-V2 Mod