My First Step Developing a Procedurally Generated Game Map (or A River Strait Down)

For the last month, my game codenamed: JACO has been in production. It’s a little indie game I’m producing with the occasional help of a friend or two here and there. One of the core elements of JACO is a procedurally generated map, and today I took my first step into the world of dynamic world generation.

Read a little more about pre-production here.

What is Procedural Generation?

Procedurally generated content is a concept in game development that is swiftly on the rise, championed most notably by a little game called No Man’s Sky, but has been around for as long as Diablo and possibly even before that. Btw, if you haven’t heard of No Man’s Sky, stop wasting your time reading this and hop over to YouTube. You will not be disappointed.

Basically, a game with procedurally generated content will programmatically create levels, maps, quests, stories, or what have you. In level design, this means that the levels will appear to be randomly generated (rather than hand crafted), which dynamically creates hours upon hours of unique content.

But while no one is building these levels bit by bit, they are anything but random. A random level wouldn’t make sense to a gamer. Trees would appear in oceans, houses in rivers, mountains would overlap and all other sorts of tomfoolery would be afoot.

Instead, a programmer writes the logic that allows a level to be generated with millions of possibilities, but allowing the world they are creating to follow the logic they write. This allows for immense amounts of variety, while still allowing for the game world to make sense and follow certain rules.

That’s all well and good, but why are you making a procedurally generated game?

That’s a great question, person who just happens to ask the right questions at the right times. JACO is a game where the player will explore an open world. Survival will be key, as well as resource management, diplomacy, combat, and more.

I’ve decided to eschew creating a bunch of different maps by hand in favor of procedurally generated maps to add variety, as well as to challenge myself as a coder. If you read my last post (see link at top of this post), you’ll remember that one of my motivations behind building this game is simply to challenge myself and grow as a coder, as well as give myself the opportunity to touch some cutting edge technologies.

Of course, creating a fun game is a major goal too.

A River Straight Down

If you’ve never coded before, it might surprise you to learn just how far down a coder must go to get something to work. For example, one of the things I want JACO’s maps to feature is the possibility of a flowing river that forms on the map in the way that you and I know rivers form.

So what is step one? Get something to show up. Anything really. The code that got that working looks a little something like this:

This is just a simple function that pieces together HTML elements based on the map I’m generating. While Jaco isn’t going to be a browser based game, it will be built using web technologies thanks to a few cool techs such as Electron and Node.js.

Only then can you get to step two, and that’s not creating a beautiful river. For me, step two involved creating a grid of nothing, aka a three dimensional array of null values. The outcome of step two looks a lot like this:

The first step in generating a map. A grid of null values. Jaco will feature tile based maps, but before I begin photoshopping the graphics, I got to get the guts working. This means, for a long while my maps are going to look like nothing more than unstyled grids of text.

Step three? Now we begin making the river. Rivers tend to flow and meander, going back and forth and splitting into forks. So I need to write the code to simulate that.

But before I can even do that, I first needed to get an even simpler step completed. Create a river that appears on a random node, and make it flow straight down.

Well folks, I’m pleased to say that my river is flowing, and it looks a little something like this:

It might not look like much now, but hey, it’s something. The river appears in a random column of this grid and flows straight down. The code is written in such a way that, even if the map increases in size by 1000 times, the river will still appear in any column and flow straight down.

In case you’re curious, the code to make that happen looks like this:

There’s my elegant code. :P You may notice I’m using old JavaScript syntax (LAME!), but that’s just temporary as I began this project on a boat (for real) and had no internet connection to require babel. Soon, all this will be written in beautiful ES6! ()=>{} ftw!

And that’s how you procedurally generate a river flowing straight down. I hope that was an interesting peek into the extremely early stages of Jaco’s game development. I hope you’re looking forward into our next backstage peek, where there will be less null’s and more rivery goodness.

Final note: Hey Medium! No inline code snippets?!? What’s that about?

Thanks for reading. Want more? Visit the JACO development diary table of contents for more goodness:

JACO Development Diary: Table of Contents & FAQ