Thread by @stas

Gamedev.js Jam 2021 is happening over the next two weeks, and @michalbe and I are making a turn-based strategy game inspired by Risk.

#gamedev #gamedevjs #gamejam #javascript

The jam's only restriction is that the game must be playable in a web browser. It's a refreshing change from the size-constrained jams that I typically take part in. I'm not used to not having to worry about the code and assets size.

itch.io/jam/gamedevjs-…

For the last year's Gamedev.js Jam we created an idle clicker game: Time Is Money. I wrote a short thread about it back then:

This year's theme is 'Mirror.' Our idea so far: a turn-based strategy game similar to Risk, where the goal is to conquer the world, region by region and continent by continent. Except that the world map is mirrored.

It's a subtle connection to the theme, but I like it how uncomfortable and alien the Earth looks like when you change the frame of reference.

The effect is perhaps even more powerful when the map is upside-down. What planet is this and where did all this water come from?

"Research suggests that north-south positions on maps have psychological consequences. In general, north is associated with richer people, more expensive real estate, and higher altitude, while south is associated with poorer people, cheaper prices, and lower altitude."

(Source: en.wikipedia.org/wiki/South-up_…)

I've been meaning to try to build a turn-based strategy game for some time now. And the idea came back to me after spending most of the winter playing HoMM 3 and Total War: Warhammer 2.

Both @michalbe and I remember playing Risk back when we were kids. The rules are simple enough for a 2-week-long jam. Creating the opponent AI might end up being an exciting challenge.

We'll be using the path finding example from Goodluck to bootstrap the game. I don't think we'll need actual path finding, but the example already has some tech for picking objects with the mouse and ordering them around.

gdlck.com/#PathFinding

According to Risk's rules, Europe has 7 regions. I modeled them in Blender and made them pickable via a ray cast from the camera. The raycasting code computes the exact point of the intersection on the mesh. It is then set as the destination for the cube's navigation agent.

I've added camera controls (panning, rotating and zooming) and replaced the cube with a 19th century soldier. It's starting to look like Risk!

The soldiers now know which territories they can move into from the one they're currently occupying. In the video below, the units in Iceland can only move to the UK and Scandinavia.

The graph of connections between territories is based on this schematic of Risk's board from Wikipedia:

We've got real-time shadows!

#gamedevjs #mirrorisk

This is huge for me personally. In my mind shadow mapping had always been a feature too advanced for me to build it myself. I'd always told myself that perhaps one day I'd be able to do it. Consequently, all @pieskucom's web games so far shipped without shadows.

Well, Mirrorisk will be the first one to ship with shadows! What helped were all the intermediate steps: I built a few render-to-texture demos in June 2020 (WebGL1 and WebGL2), as well as a deferred rendering pipeline in desktop OpenGL (December 2020) and in WebGL2 (April 2021).

So even though you could say it only took a half day of work today to implement shadow mapping in Mirrorisk, in reality it's been almost a year in the making, through various coding experiments and learning resources.

In particular, I've found the following two articles very helpful: learnopengl.com/Advanced-Light…

And the second one: webglfundamentals.org/webgl/lessons/…

The idea behind shadow mapping is to first render the scene from the light source's point of view to find out which objects are visible, i.e. are illuminated by the light.

In the second pass, we render all objects from the main camera, as we normally would, and we use the data from the first pass to decide which fragments to dim—the ones that weren't visible from the light's POV because they were in the shadow.

So... because we want to first render the scene from the light's POV, it's as if the light was a special kind of camera, one that renders to a framebuffer rather than onto the canvas. With the ECS architecture, expressing this idea is rather elegant:

To prove that these really are real-time shadows I've implemented the day light cycle this morning:

Post-weekend (day 6) update: @michalbe implemented turn-based gameplay which allows any number of human and AI players to play against each other. We're experimenting with using the day-night cycle (see above) for the end-of-turn effect.

#gamedevjs

Day 7 update: I modeled other continents and added work-in-progress textures. I wasn't going for the brass sundial look, but in fact it doesn't look too bad. I'll try adding more color to the world map to make it look more like a proper board game.

#gamedevjs

Day 9: I implemented roughness and normal mapping to give the meeples a more wooden look. They look a bit like they were made of chocolate, though. I'm also experimenting with hand-drawn textures and you can see that I'm not very good at drawing.

#gamedevjs

Day 12: We've settled on the art direction for #Mirrorisk. We're giving it a home-made feel of a board game cut out of cardboard and painted by hand. The meeples already look a bit like they're 3D-printed which fits this style quite well.

#gamedevjs

I went the analog way to create the board textures. I exported the UV layouts from Blender to SVG and I used a pencil to manually copy the outlines of the territories onto a sheet of paper.

I then filled the outlines with watercolors, allowing the different shades to freely mix on the paper. I hope I won't sound too ignorant when I say that before today I thought watercolor was… easier. It's crazy how you can paint with water and only add the color later!

I also drew the icons to be placed on the maps to breathe some life into the board. I never draw, so I'd looked at a lot of hand-drawn maps to find inspiration and learn (i.e. copy) drawing techniques.

On second thought, it's not very different from programming, is it? Step 1: Find things on the internet. Step 2. Copy them.

Lastly, I scanned everything and put it all together in Inkscape, which gives me the ability to tweak sizes and positions later on. Here's the final colored texture and a version with only the outline (not used in the game for now, but it looks cool).

Here's what the entire board currently looks like. I still need to add icons to 4 continents out of 6, but I'm happy with the result so far.

After a busy weekend, it's time for the Day 14 update: #Mirrorisk is live!