Evergreen's Art: Blending 2D and 3D

Right from the start we knew that Evergreen would have to be pretty. The game revolves around making a pretty tree, and the environment had to reflect that.

The art for our game is predominantly 3D, which is great because all three of the artists on the team were trained in 3ds Max and are very comfortable with a 3D workflow. For starting our first commercial product it was a no-brainer to stick to what we know.

We started off using entirely 3D assets for our backgrounds. The above screenshot is one from very early in development, and frankly it looks terrible. The background conveys very little sense of scale, there was no way to convey how large the player's tree is in comparison, and there was a lot of room for improvement in the aesthetic. We weighed up how much time it would take to create a full scene in 3D and decided we would need to look into other options.

This is my first attempt at blending a 2D background with a 3D environment.The only reason we can get away with doing this is that Evergreen’s camera movement is locked to two axis and has a fixed rotation. I used three planes going back on the Z axis, and painted up some mountains using a limited colour palette to emulate our toon shader. It wasn’t great, but it was fast and very easy to iterate on, and at this point that was what mattered. I then played around with making up some rocks and plants, painting them with the same restrictive colour palette and sticking them into the 3D area on planes that intersected the mesh. One of these planes on their own looks bad, you can clearly see the hard horizontal line where it intersects, but layers and layers of them can hide each other's intersection lines. It was starting to show some depth, and adding the planes to the 3D area was looking alright but I still wasn't happy with it.

Right before Pax Aus 2015 I found myself with about a week that was allocated to making the game prettier in general, and thought it was well overdue to overhaul the backgrounds again. This time, I wanted to focus on making it look as 3D as possible. I wanted to hide the blend of 2D and 3D, ideally to the point where people who played it at Pax wouldn't be able to tell where one ended and the other started. I focused on parallaxing the planes to fake depth, angling them so to appear 3D, and connecting the foreground elements to the background mountains. What was initially 3 planes in the background became 67 planes, each layering one on top of the other to hide their edges. The below image will ruin the magic for you.

The newest level I've completed is the Ice Age, in which I've tried out a few more techniques. In the level shown previously I put rocks and plants intersecting the level mesh, but here I played with intersecting entire cliff faces with level mesh in the foreground. Behind them is a 3D version of the cliff face, but using 2D cliffs gives us room to add more detail.

The other technique I've experimented with is taking foreground elements into the background and having them float in space in front of the planes. Because the player can see the same trees in the foreground as well as the background, and can clearly see that the trees are 3D, it gives the illusion that whatever the tree is sitting on must also be 3D.

The newest addition to the backgrounds, which isn't fully implemented yet, is a new fog system. The fog greatly improves the sense of distance, allows us to easily adjust the feel of the level by changing the fog colour, and has solved our issue of how to do distant snow in level 5.

This is how our game’s art is looking at the moment, and for the next few months I’ll be focusing on getting our other environments up to this same level of polish as well as experimenting with a few more tricks to blend the two.

Mixing 2D and 3D can be a fast and efficient way of fleshing out your environments when you’re working with a fixed angle camera and using these few visual tricks it can really improve the visual quality of your game.