You're not used to us posting longer format posts about the technical aspects of Ale Abbey's development, but there are a few game dev hiccups that we managed to solve and we thought sharing with others could benefit them as well!
One of those "hiccups" was scene perspective. In Ale Abbey, a 2D game with pixel art viewed from the side, the call to work on perspective came when Emiliano was looking at the sides of some of the Monastery's buildings. How can we make scenes, when the camera is panning or zooming in and out, look and act smooth and natural? If we could see immersion-breaking issues with a side of a building, with scenes becoming more complex by the day, the players would definitely feel "the magic" dwindle as well.
A major break came when the team started working on the tiling of the floors of the Monastery: the floor of a room would have to look good on its own, good when multiple rooms are stacked next to each other, and everything should tie up well together without breaking the most important part of a game, the magic of immersion.
-- How it started
We started by designing the first floors for the rooms with a bit of faked perspective in mind. This allowed enough of the floor (approximately 60 pixels) to be visible - as if seen from a raised position - and with the tiles' side edges drawn as radial perspective lines.
This actually worked for a single room, but the moment two rooms were seen side-by-side, the spell of immersion broke. This effect was amplified when the camera moved (or zoomed out) and multiple rooms were stacked next to each other.
Our first full-fledged effort to correct this was by making the floor tiling orthographic, as you can see below, but - alas - it would not solve the issue.
-- Research for a potential solution
Ale Abbey's project lead, Emiliano, and our Creative Director, Francesco, discussed some possible solutions and researched how other games dealt with this problem. What they found was that, in reality, most of them avoided it entirely, either going full 3D or showing the side view with no terrain surface. The duo tried a few iterations, even shortly considered some funky 3D/2D hybrids (don't ask...), to no avail.
Our pixel artist, Raimo, later pitched in by bringing some great examples of how two legends in the field, cyangmou and Fool, handled similar issues in the past. These artists were among the few we could find that had dealt with extended side-by-side, 2D side view terrains that also had some perspective.
After our internal research and brainstorming, we isolated 2 main techniques they used. First, was a circular perspective distribution of the tiling. With some tweaking, this technique seemed to do very well in faking the depth without breaking the immersion when expanded side-by-side. Second, was a fading to dark of the tiling near the side edges of the floor. This way the two neighboring rooms wouldn't end up having the tiles too close to each other and a direct visual comparison wouldn't be possible.
-- Final touches!
After some more experiments, Francesco drew out a test floor for the brewery room that looked very passable. But one issue remained... the circular shape with the faded sides created a sort of concave visual illusion effect in the center of the room as if the floor sank towards the center.
By adding a little bit of shadow to the exterior of individual tiles, and by creating a sort of conical effect (as if the floor rose towards the center of the room) we managed to compensate for this issue, creating a balance driven by visual illusions. We later finalized it by providing a bit of "thickness" on the side view cut of the floor for a slightly more realistic material feeling.
The new floors now work perfectly both when seen in individual rooms and in stacked rooms (side-by-side). We also managed to add some extra "depth" to the room, creating even more space for furniture and monks to act and move.
We expect that adding a tiny bit of parallax effect to the dark silhouettes framing each room will bring the whole thing together, but this is an easy fix and we are very happy with the result achieved so far! Even if this is something we had to tackle a few months back, we are still very much open to ideas that might improve it even further ;)
We hope this post helps someone out of a pinch, or at least saves them some time :D Still, remember to join us next week for more of Ale Abbey's news! For now, enjoy your weekend responsibly ;)
-- Hammer & Ravens
Looking for more Ale Abbey? Or maybe want to chat with the team? Find us on:
