2.5D games come in many flavors. A popular approach is to use a 3D environment and assets but limit the player movement to only two axes. Another method would be to use 2D assets while exploiting the third dimension only for its parallax effect.
For our game Nugget & Penny, we chose a different approach, we use 2D assets to describe the world while retaining all three axes of movement. We saw this style in a few games and immediately fell in love!
Mineko's Night Market, The Wild at Heart, Knights & Bikes
During the development of Nugget & Penny, we encountered a few challenges while implementing the game’s art style. The following are tips we have learned while working with this style and a few solutions to its pitfalls.
There are three ingredients required to achieve the desired style:
X-axis rotation of
X-axis rotation of
45°. This way, the Cards will appear perpendicular to the player.
I mentioned above that we use a
45° rotation for the Cards and the Camera. You can choose a different angle, take a look at the effect different angles have over the same scene:
So, why have we chosen
45° over the other degrees?
The resulting scene with
60° appeared flat, so it was an easy rejection. In contrast, the
30° scene felt spot-on, although there are a couple of drawbacks compared to the
45°is more approachable for a few computations that we will discuss later on.
Do not rotate the camera beyond its initial rotation or other axes. You may translate it in any axis, and using Cinemahine yields fantastic results with this 2.5D style.
When it comes to Cards rotation, we do sometimes rotate the
Z axes, but never change to
X-axis as it breaks the illusion.
Developing our demo game, Adventure Machine, we attached angled colliders to the different game components. It resulted in sub-optimal results. Therefore, in the newer game, we are positioning the collider orthogonal to the ground.
Another difference from the demo is creating colliders for groups of objects instead of each object individually. This prevents players from getting stuck between objects. Creating a tool for quickly drawing custom collider shapes around objects made this approach fast and easy – I will write about it in the future.
Note the characters orthogonal colliders, and the collider walls surrounding the objects groups.
Sometimes, describing the world with 2D Cards is just not enough. When we encounter such situations, mostly when players feel the skill mechanics are 'cheating', we don't hesitate to use 3D.
To blend the 3D meshes nicely with the 2D Cards, Danielle paints its texture with the same brushes and technique as the 2D art. The texture is then applied to an unlit material.
Another trick we use for a natural blend is to skew the mesh with a custom shader – we will expand about it in the second part of this article.
For an object to go up or down, and feel natural, we need to keep the
Z offset correlated to the
Y offset amount. For example, If we raise an object
1 unit above the ground, we should also push it
1 unit away from the camera.
This is a rule we only conform to sparingly, and on a case to case basis. Our general guideline would be to break this rule when we use physics, so we aren't often required to change the object’s gravity behavior.Download Unity Project
The next parts of this tutorial will discuss three shaders I created to solve issues that popped up during development.
I would love to hear your thoughts over at my Twitter. Be sure to follow me for an updates when I post new tutorials.