Working on an RPG: Generating the Map

I’m now over a month into the basic RPG I mentioned in the last post, so a bunch of systems are in place. In my last post I talked a lot about the narrative system Ink, but this time I want to get back to what is a frequent topic on my devlog: procedural generation of maps. Here is what I came up with for the map of city regions:

(The weird batches of horizontal lines are actually lines of text. That’s just to test applying textures to quads strewn about the map, and will eventually be replaced with images of buildings and trees.)

Outline Both Squares and Hexes

So I’ve been experimenting a lot lately with rendering lines on the ground, for the map in strategy and tactics games. Last post I already had this effect working for a square grid, but it wouldn’t work for hex grids because it was dependent on drawing pixels to match the grid. I ended that post by brainstorming ways to support hex grids, and have had great success working on the problem since then.

I uploaded a WebGL demo to try, and here’s a video showing the territory outlines shader working on both square and hex grids:

Shader that renders Border Outlines

Merry Almost-Christmas! I normally do a blog post every month on the 25th, but I wanted to do this one a few days before then because of the holidays.

Last month I had described my plan to render border lines on the ground (think territory in a strategy game, or movement ranges for tactics games). Here’s an image showing the result of my experimentation:

Hey, looks pretty good if I do say so myself! That’s a smoothly glowing outline drawn on the ground, surrounding a discrete region of a square grid, with the outline nicely rounded at the corners.

Border Lines on a Strategy Map

Happy Thanksgiving!

A couple months ago I was noodling on techniques for displaying the map in a strategy or tactics game. Well, lately I’ve been thinking a lot about one specific aspect of how those maps work: representing borders on the map.

I’m talking about the colored lines on the ground in this screenshot:

Demonstration of Map Mesh

Last month I described in words how I was building a clickable map using vertex colors. Well, a reader requested I make some visuals to demonstrate what I was talking about, so I whipped up a demo in Unity and grabbed a video of my screen:

Visual tricks for a strategy game’s map

At work this past month I’ve been implementing some interesting visual tricks on a mesh-based map. While we aren’t making a game, I could totally imagine these techniques being useful for a strategy game, or maybe a tactical RPG. Let’s say you have a hex map. Well, you could easily do hexagons with a 3D mesh, and then boom you can can use all sorts of visual tricks developed for 3D games.

Working on 2nd edition of my book

So this past month I haven’t worked a ton on my strategy game. I wasn’t just being lazy; I’ve started working on the 2nd edition of Unity in Action! That’ll probably take most of the summer to complete, so in the meantime I probably won’t do much on my game. Which is annoying but that’s life; I didn’t know in just a few months my publisher would be asking for a 2nd edition when I started on my game.

That said, I really like working on this game so I can’t stay away from it completely. First off, I’ve done a bit of work figuring out how the UI system will operate. Nothing worth showing off, just creating popups in HTML and writing JavaScript to control them.

Second, I’ve been looking for and playing simple strategy games for research. I know, haha “research”, but seriously I’ve been making a concerted effort to find other games similar to what I have in mind and/or which will give me new ideas. For example, I learned of Crown and Council, which I really wish I could play directly but it’s PC-only so I’ve watched playthroughs on YouTube. Similarly, I’ve been googling terms like “free web strategy game” and “simple html5 strategy game” to find more examples. There are two in particular I want to talk about:

Dividing the Map into Regions

So in my last post I had a pretty good randomly generated island. My next task was to split it up into selectable regions to make the map for my strategy game. As mentioned last month, I ended up not using voronoi cells after all to generate the island; well, I realized that could still be a good approach to generating the map regions, just layered onto the more organic looking island.

Here are a couple examples of the end result:

I may want to make the borders more irregular later, but overall not bad for a prototype! Incidentally, the colors are just random for now in order to test the look: the red and blue regions would be the colors of different empires, while the dotted lines are unexplored regions.

Generating the Island

Since I’m making a light-weight strategy game with a screen size map, I implemented some basic procedural generation techniques to create the random map. I now have fairly nice islands being created randomly; here are three examples:

I probably need to polish it more for the final game (for starters, the beaches imply a scale around an island nation, but I may want more like a continent) but for now I’ll probably leave it like this and move on to other parts of the game. I’m aiming to have a prototype in players’ hands soon so that I can start gathering feedback, and I don’t really need anything more than the island outline for that initial prototype. Plus the publisher of my book just contacted me about possibly doing a 2nd edition, so I may be busy with that soon.

At any rate, here’s how it’s done:

New blog, New game

I’m pleased to say I’ve started working on a new game! It’s a simplified empire-building strategy game with an rpg-style narrative and quest system. By “simplified empire-building” I mean something like Risk, but my game will procedurally generate both the map and quests. I just started developing the prototype, and here’s a screenshot of the world map so far: