Creating a small navigable environment constructed entirely of 2-D painted flats and minimal 3D work

So this idea of creating "3D" illusion art, while still being in 2D, originally came to me after working a while ago on a small 3 person team project, and seeing the challenges that came with a team of that size. Ultimately this limited number of teammates meant that everyone had to pool their collective skills, and create a game that maximizes them.

For this project it was made up of the basics:

1 Programmer, 1 2D Artist, and 1 Designer.

As a concept artist, with the 3D artists booked on other projects, I had some immediate game options in mind: sidescroller, an infinite climber, find the objects, or a match 3 game. These could all be fun and a great direction, yet still be small team capable.

After this particular project was completed, I got to thinking about other options - after all, it helps to have as many options to pull from as possible for future small team needs.

So what if I had wanted to explore a 3D option? Since it’s not always fast to get a Maya license to use, especially if you’re a 2D artist who doesn’t use it much, but you do know the basics of working in a 3D environment, Unity is a much faster option. Any artist can download the latest version, and a small team can use Unity’s tools to get a playable base level set up fairly quickly. Even if you have only a very basic level of skill with 3D, once you get used to how to move objects, it’s fairly easy to use in terms of placing and arranging pieces of level art.

The Challenge: Create a mostly 2D Environment in Unity that looks and feels 3D in 5 days.

And with that in mind, I’m sharing here my exploration of what one 2D artist could do by themselves art-wise in Unity, and what I learned along the way.

I’d been wanting to experiment with creating a mostly 2D environment in the style of games like Bastion and Bravely Default for a while now - as my wife and I had been playing these games- the visual style of each one had struck me as being both beautiful and yet deceptively simple in their construction, and I took much of my visual inspiration for this from them.

1. Preproduction:

I started off sketching my level idea:

This super rough sketch helped me understand the basics of what I needed, but I was still having trouble figuring out an effective player path, so I stopped sketching and jumped straight into white-boxing so I could test more easily.

I found that the actual physical building of the path and moving pieces around made it easier to see right away what worked and what was too clunky.

To speed things along, I started with Unity’s “angry bots” demo game scene, ripped out everything but the player character and his lighting setup, and created my white-box around him. In this case, the goal was the level itself, not creating a working character, so by using a working model you can focus on the environment. This helps give you the basics needed to run around with a character without having to spend time concepting/building/animating a character in this short timeline.

After getting the basics worked out, I also studied Bastion’s 2D environment setups for how they handled where players could and couldn’t walk, figured out some tweaks I wanted to incorporate in my own player pathing, and re-adjusted the white-box accordingly. And by “studied” I mean “played video games”. This, of course, is the best kind of studying.

Any actual “modeling” here was done by making a lot of 3D planes in Unity to create the minimum geometry needed to explore the world and allow me to use mostly 2D drawn assets.

2. Changing the Camera:

I realized as I started putting in my temp textures that the 3D camera was breaking the illusion of depth that I was drawing by hand (Temp textures are when you create a bunch of super ugly textures/patterns that you’ll change later for your final piece - the advantage in doing this is that you get your textures linked right away to the pieces in your level, so painting and replacing them later is faster.) When I looked at Bastion again I realized they were using an isometric camera. So of course, I immediately switched from 3D perspective camera to an isometric camera so that I could fake all 3D depth in the drawn flat textures and not have the camera break the illusion as soon as it moved.

See example comparing the 2 cameras in the gif below:

3. Things Learned on Keeping the “3D” Illusion:

- Find your camera angle

- Never ever change the camera angle again … EVER. Note how the gif below shows that the slightest camera change starts to break any illusion of the flat drawings of the tower in the middle meshing with the horizontal paths around it:

- Find the 2D angles that make your drawn/painted flats mesh with the 3D around them, and make sure all drawings thereafter fit within these angles. This below is the angle guide I created for all forward facing planes. I had to create 2 more similar guides for sideways facing planes and camera facing planes.

4. True VERTICAL travel in a 2D world:

I also realized early in the week that I was having trouble getting the vertical movement part figured out. In going back to research, I found out:

1. Bastion doesn’t actually let you travel vertically - it has you travel diagonally to “feel” like you’re going up or down steps, but the player actually stays on a constant horizontal plane.
2. Bravely Default seems to have more 3D modeling than I initially thought, and uses actual geometry for vertical movement.

That said, I wanted to keep my level mostly 2D, so I:

- mixed vertical flats with both horizontal flats AND ramps wrapping around them

- painted the textures and shadows to seam up the 2D to fit the 3D feel.

- used empty Unity boxes to fake collision around the 2D buildings and obstacles

All of this came together to make 1 cohesive, and navigable, level:

And here’s a sample of what it feels like to run around.

NOTE: It’s important to make sure the lighting and art style with sketch lines, etc, are consistent across both 2D and 3D assets to keep it visually tied together:

The end product is a small navigable environment constructed of 2-D painted flats and minimal 3D work - in this style, the majority of the art is using texture flats and very minimal modeling for specific points of interest in the environment.

Pushing Beyond the Concept:

I learned a lot along the way, and am convinced that this style of art and game can be an added option and one more advantage for a small team, especially when the team has little to no access to a 3D artist during their production schedule. Ultimately as a concept artist, I’ve also learned not to be afraid to explore and push w-a-a-y beyond the first things you think of, because you never know what new stuff, like this project, is out there to discover!

For more concept work visit my website, or follow me on Instagram and Artstation.