Board positioning, play testing, and a status update
I’ve been making steady progress over the last couple weeks.
The first play-testable build
I play-tested with a few friends last week. The game has placeholder art and everything is still subject to change, but I’m really glad I did it. To my surprise, people generally got the game, some people even had fun, and everyone gave me great feedback. I spent most of last week responding to feedback: tweaking level design, improving onboarding, clarifying affordances, and fixing bugs.
Shout out to Tom Lubanovic, Matthew Whittemore, Dana Sulit, and others for feedback. If you’re interested in getting your hands on the game and providing me with additional feedback, email me: samanpwbb at gmail dot com.
A deep dive into board positioning
I completed a big board positioning refactor over the weekend. Wilderplace now supports boards that extend past the viewport, and all boards are more accurately centered. Here’s a gif showing off the current “camera”:
Centering the game board has been unexpectedly difficult. Wilderplace uses absolute positioning for all game pieces, every board is a different size, plus the game board is inside an isometric transform (in CSS, translate: rotateX(45deg) rotateZ(45deg);), so I can’t directly use standard CSS centering techniques, which all rely on a container element with a bounding box.
My two initial approaches to centering the board involved measuring the extents of all the tiles on the board, and then generating a bounding box from the measurements, and centering that generated bounding box. I first tried to generate a bounding box inside the isometric transform. This approach resulted in bounding boxes that were skewed at the edges:
I then tried to generate an additional bounding box outside the isometric transform, with dimensions that matched the optical bounding box. The bounding box was perfect, but then I couldn’t figure out how to center the board inside the bounding box:
I could have tried to solve the underlying math problem for translating from isometric space to browser coordinate space, but I’m kind of afraid of math.
The final design sidesteps dealing with the browser’s coordinate system. I now only center align a single, predictably sized anchor element, which I call the “center tile”, and place the rest of the board tiles in relation to the center tile. To calculate the center tile, I divide the total tile length and width of a board in half. So, the center tile for a board that is 4 tiles wide and 4 tiles long will be [2, 2], while the center tile for a board that is 7 tiles wide and 3 tiles long will be [3.5, 1.5].
The center tile is centered with flexbox, and all other tiles are placed on top of the center tile, but with a translation applied. So, for a board with a center tile value of [2,2], a tile with a position [2, 2], would have a translate value of translateX(0%) translateY(0%) while a tile with position [0, 4] would have a translate value of translateX(-200%) translateY(200%). Here’s a diagram showing the translate values for all the tiles on the board:
Getting the minimap and camera to work also took a few tries. The solution I landed on is surprisingly simple: to render the minimap, I render a second version of the board, using the same board component, but with a scale transform to shrink the board. I attach a touch event listener to the minimap element, and when the player drags on the minimap, multiply the drag distance by the inverse of the scale transform.
Status update
I want to close out this post with a higher level update. The game now has 15 levels, and a new game mechanic gets introduced every 5 levels.
Here’s an early level that shows off some of the new onboarding dialog:
Here’s a middle level that shows off the “absorb” ability, which allows the player to remove trees from the board:
The week before last was dedicated to art. I managed to finalize the design of almost every image in the game.
These drawings were going to be final, but midway through making them I decided that I didn’t like the texture of the paper. The drawings were too fuzzy. I need to do one more pass on all the artwork. Not a bad thing – they’ll turn out more refined in the end. Here’s the first image that might truly count as final, drawn on heavy bristol instead of cotton fiber vellum:
👋 Thanks for reading. If you’d like to give an early build of the game a spin, don’t hesitate to email me: samanpwbb at gmail dot com.