Summer devlog and a release date announcement

Wilderplace launches on Steam on September 9th. Wishlist it now! Massive thanks to all the testers who helped get the game to this point. We’ve ended our beta test phase and will be focused on pre-release polish until release.

Lots has changed since the last Wilderplace update. I started a new job. My baby is now 5 months old. Somehow I managed to find time for Wilderplace polish. Tom, Micah and I have been fixing bugs, fine-tuning levels, wrapping up work on the music, and going on a couple unnecessary detours in preparation for that September 9th release.

Here are some of the highlights from the last few months 👇.

New screen effects with SVG filters

I went down a bit of an SVG filter effects rabbit hole a couple months ago. It started when Orta shared this Squiggly Text codepen with me. After seeing it, I spent 5 minutes adding a full-screen SVG displacement map in Wilderplace. It really brought the game to life! I showed it to Tom and he loved it. Together, we went through over a dozen different displacement map designs before Tom hand-drew a set of displacement maps just for our animation effect. Five minutes turned into many hours. The raw displacement maps are kind of interesting:

Read this deep dive on displacement maps to learn how they work →

And here’s what happens when we apply a displacement transform. I’m combining the above maps with another filter that tiles them across the full size of the screen. An animation plays that cycles through the active maps, creating a squiggle effect:

Don't worry, if you hate it you can turn it off.

While learning about SVG displacement maps, I stumbled upon SVG color matrix filters (play around here)! This inspired me to rewrite all of Wilderplace’s CSS color filters with color matrix transforms. They offer more control and since I already had a full-screen SVG filter running from the displacement map work, there were performance benefits to merging both displacement and color filters into a single layer. Another five minute experiment turned into hours of work. Here are a few examples of different maps and their results:

An end to soft locks

Wilderplace has both a persistent open world and precise traversal-based levels. As a result, it’s easy to get permanently stuck on one of those levels if you’re backtracking and the level had been re-arranged. That’s exactly what happened to lots of our beta testers. Solving these soft-lock issues required two strategies:

1. We redesigned levels to ensure players can’t revisit big chunks of the game until they’re actually ready. This was a matter of placing stones, trees, and fungi carefully to make backtracking impossible on the first pass through, but possible once players have unlocked stronger traversal powers.
2. We added a restart prompt in cases where players might truly be stuck. We want players to face the consequences of re-arranging the garden, so we didn’t want to let players clean up a level after beating it. We allow restarting a level from scratch only if the player had previously cleared the level, and they’re entering the level again from it’s entrance.

This was a last resort, but it should save players from soft-locks.

Some lessons learned from bug and performance fixes

I fixed about 30 bugs since the May release. Most of them were minor, like a sprite facing the wrong direction, or a weird edge case involving toadmen. But some were serious and hard to track down. Here are some highlights from my bug squashing:

• 🐛 I assumed Chrome’s window.devicePixelRatio constant was always an integer. Some monitors have pixel ratios like 1.25. This assumption had been hard crashing Wilderplace for some players for months!
• ⚡️ Frame-by-frame animation via background-image is more reliable and performant than via img src. If you are wondering: yes, I did try directly using spritesheets and animating with background-position, but Wilderplace’s spritesheets are too high res.
• 🐛 Firebase analytics myseriously did not report events when launching through Steam. All that time instrumenting the game to track player behavior was wasted. Rather than trying to fix this issue, I decided to delete the dependency and just revel in the mystery.
• ⚡️ Too many requestAnimationFrame loops are real bad for performance. I was overusing RAF and had some runaway loops. Lesson learned: do more in a single loop, rather than letting processes start and stop their own loops. This is why games use game loops! Maybe I’ll try one next time :)
• 🐛 The nicer input handling feels for players, the more the code behind it looks like spaghetti. Move buffering, move cancelling, pending animation states, and alternate input modes lead to lots of complexity. I finally nailed satisfying movement on keyboards, mice, gamepads, and touch screens but I every time I touched this code I accidentally broke something! One more change and I’m afraid the whole thing will collapse.
• 🐛 At this stage of development, I am grateful to be using Redux and functional-style programming for state updates. It makes for easy and clear regression tests, which really matters with our release around the corner.

What are our post-release plans?

The future of Wilderplace depends on how much the game catches on. There are two big post-launch projects that I will take on if we sell over 1,000 copies. First of all, I’ll release a level editor. Secondly, I’ll port the game to Android and iOS. Since the game is web-based I could use something like Cordova to create native app versions of the game.

👋