Building a 2.5D Level in Unity

[{"content":{"text":" Creating a small navigable environment constructed entirely of 2-D painted flats and minimal 3D work "},"id":"e8e38a7a-b385-4c9c-b4dd-ec3faba29d6b","isHidden":false,"type":"textBlock"},{"content":{"text":" 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\u2019s not always fast to get a Maya license to use, especially if you\u2019re a 2D artist who doesn\u2019t 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\u2019s 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\u2019s 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\u2019m 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\u2019d 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: "},"id":"d84ccfd1-a5b2-44b1-9009-432a7b80396a","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/UTbHJFMqlMYSPvRh"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"e777ab07-7edf-4a45-8978-78abdd04573d","isHidden":false,"type":"imageBlock"},{"content":{"text":" 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. "},"id":"0e190f28-cf5a-4c51-9917-25fac6cd151e","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/aplekekXncEJkSs8"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"40d66859-e280-4141-a672-06ba76e29f63","isHidden":false,"type":"imageBlock"},{"content":{"text":" 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\u2019s \u201cangry bots\u201d 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\u2019s 2D environment setups for how they handled where players could and couldn\u2019t walk, figured out some tweaks I wanted to incorporate in my own player pathing, and re-adjusted the white-box accordingly. And by \u201cstudied\u201d I mean \u201cplayed video games\u201d. This, of course, is the best kind of studying. Any actual \u201cmodeling\u201d 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\u2019ll 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: "},"id":"9ca4d3cb-4c4d-4113-b748-0fe213896d69","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/zLCvoQRSlP12DSzD"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"d2d350af-52ee-460a-b512-e68d9464553d","isHidden":false,"type":"imageBlock"},{"content":{"text":" 3. Things Learned on Keeping the \u201c3D\u201d Illusion: - Find your camera angle - Never ever change the camera angle again \u2026 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: "},"id":"8750e51f-639f-4cea-9f9c-f35f193095f6","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/pfR4jmdB2qS1rh8I"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"8b4bef4b-8041-4f12-b9e1-f318a888c634","isHidden":false,"type":"imageBlock"},{"content":{"text":" - 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. "},"id":"35552e39-b2dd-482d-b0a0-52bcface9df7","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/M7iBxyRS9Sm7OoXj"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"1109cf94-4890-49ba-9197-3d5934a82409","isHidden":false,"type":"imageBlock"},{"content":{"text":" 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: Bastion doesn\u2019t actually let you travel vertically - it has you travel diagonally to \u201cfeel\u201d like you\u2019re going up or down steps, but the player actually stays on a constant horizontal plane. Bravely Default seems to have more 3D modeling than I initially thought, and uses actual geometry for vertical movement. "},"id":"9a7af88b-f656-4adc-8b88-a289f94f2e40","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/39mPGxIrEoNsVAH8"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"f02dce0f-b98f-4a52-bf69-f8135d737bde","isHidden":false,"type":"imageBlock"},{"content":{"text":" 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 "},"id":"ee927f09-1141-4fd8-9916-2cbd84c109a9","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/6uXqGKwwGKMJwCGV"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"45afc45b-b883-44f8-af6a-f6528082f389","isHidden":false,"type":"imageBlock"},{"content":{"text":" All of this came together to make 1 cohesive, and navigable, level: "},"id":"fa937311-fa11-4a37-b216-26ee66c4bf9f","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/QVYxVqlqjEXLKvhe"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"e7e3dad3-26a3-4e10-a910-a4b01657493f","isHidden":false,"type":"imageBlock"},{"content":{"text":" And here\u2019s a sample of what it feels like to run around. NOTE: It\u2019s 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: "},"id":"e26dae75-2c17-48da-b08a-616fd16e4b11","isHidden":false,"type":"textBlock"},{"content":{"location":"kirby","image":["file:\/\/rdDkbJgbnvVaZumg"],"src":"","alt":"","caption":"","link":"","ratio":"","crop":"false"},"id":"13490eeb-6a09-41e8-b390-1f7af1b92d28","isHidden":false,"type":"imageBlock"},{"content":{"text":" 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\u2019ve 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 . Learn more about the employees of Schell Games: https:\/\/schellgames.com\/about "},"id":"6fdd63f0-95df-423e-aa86-1e02d2b91419","isHidden":false,"type":"textBlock"}]