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 👇.
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:
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:
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:
1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.10 0.10 0.00 0.00 0.00 1.00 0.00
0.95 0.00 0.00 0.00 0.00 0.00 0.95 0.00 0.00 0.00 0.00 0.00 0.90 0.00 0.00 0.00 0.00 0.00 1.00 0.00
0.77 0.00 0.00 0.00 0.20 0.00 0.87 0.00 0.00 0.00 0.00 0.00 0.87 0.00 0.00 0.00 0.00 0.00 1.00 0.00
-1.0 0.00 0.00 0.00 1.10 0.00 -1.0 0.00 0.00 1.10 0.00 0.00 -1.0 0.00 1.00 0.00 0.00 0.00 1.00 0.00
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:
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:
window.devicePixelRatioconstant was always an integer. Some monitors have pixel ratios like 1.25. This assumption had been hard crashing Wilderplace for some players for months!
background-imageis 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.
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.