Search Unity

We put our new 2D tools through their paces to create a 2D side-scroller demo. In this post we show how these integrated 2D tools can help you create high-end visuals with Unity.

Highly skilled teams have been making gorgeous 2D games with Unity for years, but we wanted to enable everyone, from individual artists to large teams, to have even more 2D tools available to create great-looking games. And many of them will be production-ready as part of Unity 2019.3, which is currently available in beta.

We created Lost Crypt using the complete suite of 2D tools. This lively scene features animation, light effects, organic terrain, shaders, and post-processing, all made natively in 2D. It shows how teams and projects of all sizes, targeting any platform, can now get more engaging and beautiful results faster.

Lost Crypt should run well on any desktop computer and we have also implemented on-screen controls with the new Input System in case you want to run it on an iOS or Android device. In our tests it ran at 30 fps on common devices like an iPhone 6S.

 

Download from Asset Store

Setting up the project

Once you’ve downloaded Lost Crypt from the Asset Store, we recommend that you start with a blank New Project and select 2D, then import the project from My Assets in the Package Manager, or by clicking My Assets on your Asset Store page. The project includes all the 2D packages you need. It will then overwrite the project settings, changing rendering settings to the 2D Renderer within the Universal Render Pipeline.

Here you can see Lost Crypt’s render pipeline asset with the Universal Render Pipeline and the 2D Renderer.

Once you import it, you will see the Main Scene. When you click Play you should be able to play normally using the keyboard arrows and spacebar to jump.

The scripts and game logic are fairly simple, as the main focus of the demo was to make use of the 2D tools to materialize the demo’s concept art.

We’ve broken down the demo into several tasks and picked which 2D tools to leverage for that visual challenge.

Original concept art. We made the project in collaboration with B2tGame.

Character animation

The character was designed in Photoshop and imported directly with the 2D PSD Importer. Open the Sara.psb file with the Sprite Editor to see the character setup and rig. If you open the file with Photoshop, you will see how we kept the different parts and layer names intact.

The PSD Importer allows us to use Photoshop files directly in Unity without having to export separated Sprites and reassemble them later.

One of the features available with the Universal Render Pipeline is the new Sprite-Lit material. Compared to the usual Sprite-Default material, this one allows Sprites to react to 2D lighting conditions.

We imported the character Normal maps in the Sprite Editor, using the Secondary Textures drop-down menu. You can add Normal and Mask maps to 2D animated characters, regular Sprites, tilemaps, and Sprite shapes.

The Normal map used for the character indicates which areas of the Sprite should reflect more or less light.

The character has 2D IK solvers in the legs to help the animator focus on positioning the ankle and foot tips correctly, then the legs will follow realistically.

We used 2D IK to facilitate the animation process of the legs and feet.

Once we rigged the character, we made the different animations with the Animation tool and Animator to control those states. You can see how the tool works in this talk from GDC 2019.

The character’s ponytail is a different child GameObject and is controlled by 2D Physics. It reacts realistically to movement because every bone of the ponytail has a Hinge Joint 2D component with some restrictions. That allows her hair to move freely without curling too much or overreacting to the character movement.

The ponytail uses a 2D physics chain configuration with some weight at the end of the chain.

Day/night light cycle

One of the most powerful possibilities of having dynamic lighting on Sprites is to alter the appearance of the environment. Using the same Sprites, you can change the mood, time of day or darkness of an area, which opens up a wealth of gameplay mechanics from stealth mechanics to lively rich worlds.

2D Lights off and on. The same Sprites can be used to create different weather conditions or mood.

We controlled the lights in the Scene with simple scripts that hold a Color gradient value (light color from daytime to nighttime) and the lights and materials change color following the Time parameter in the parent GameObject. With this kind of setup, you can visually control how different lights blend with each other.

By tinting lights you can make the same Sprites look radically different, which opens up many gameplay and aesthetic options.

Large outdoor textured terrain

One of the challenges that developers of 2D games had in the early days was to efficiently create organic terrain like hills, slopes or irregular ground, which was only achievable through carefully crafted tile sheets. Years later, this was easier to achieve using multiple Sprites representing parts of the terrain, but the workflow or performance could be better.

2D Sprite Shape was used in the ground layers and in one of the Sprite Shape Profiles on the right.

With 2D Sprite Shape you can generate terrain and colliders similarly to how you would do it in a vector-based drawing application. You can adjust the brushes (Sprite Shape Profiles) and start creating without worrying about having to adjust many Sprites or colliders as you iterate on the environment.

Lost Crypt also uses some of the Sprite Shape extras like the NodeAttach script to attach elements to the spline, so they follow the spline. In this demo, the rocks use this script and the ConformingSpline in the flowers layer to follow the shape of the grass spline. You can use this feature for gameplay or for decorative elements like we did in the foreground grass layer.

Building the crypt with a grid-based layout

Tilemaps is probably one of the most essential 2D tools, not only to save memory space with small chunks of graphics that can be “tile-able” and repeatable, but because it’s also crucial for level design.

Here you can see the tile sheet and the Normal maps sheet used in the demo.

In Lost Crypt, we used the 2D Tilemap Editor (available via Package Manager) to recreate the crypt interior where it uses some additional Tilemap extra tools (available on GitHub) to make the level-design process more efficient. For example, we used Rule Tile, a tile type that allows you to paint tiles like they were brushes. It automatically selects the right tile based on the neighbouring tiles or ends.

To improve our workflow, we used Rule Tiles in the crypt from the 2D extras (GitHub).

Fire effects

Some common elements in games are fire effects, so we added one in Lost Crypt. We started by creating some GameObject torches using the Particle System and Shader Graph for 2D and used the Sprite-Lit Master node for the output shader. We made the fire animation in a traditional Sprite sheet that the Particle System uses to play the animation.

We used an animated 2D shader and particles to create a fire effect.

The shader we made for the flame utilizes an HDR tint color to increase the intensity of the glowing around the object using the Volume post-processing. The parent GameObject contains some sparks particles and some lights that illuminate the alcove.

Water reflection

Another common use case for shaders are reflections and refractions (e.g., water, ice, mirrors or monitors that display another area of the level) are quite common in games.

By changing different parameters in the water shader, you can achieve very different effects.

We achieved the water effect in the crypt entirely with Shader Graph. We exposed several parameters (like water color, waves speed, and distortion, ripple effect, etc.), which allowed us to adjust the final appearance in the Scene. In order to project a mirrored image of the environment, we added an additional camera that would output the image in a texture to be read by the Shader Graph. Additionally, we added a pass of post-processing bloom to make the water caustics glow, which gives the water surface a nice effect.

We used groups and clear labels in the graph to make the shader logic easier to follow.

Wind animation and blend styles

Sprite Shape, 2D Lights, and Shader Graph help bring lush foliage and grass to life in Lost Crypt.

One way we animated the environment was to make the tree branches sway in the wind. To achieve this effect, we decided to have just one shader for each tree’s foliage Prefab – that would create variety and avoid repetition.

In the Sprite window we added the Normal and Mask maps to be used by Shader Graph.

On the Vegetation Wind-Lit graph, you can see how we created two effects. One is the animation or sway effect, which we created by displacing the Vertex position following a few parameters that modify a noise pattern. The second effect uses the G or green channel to adjust the tone of the rim light around the foliage.

On the right, notice how we changed the rim color using the Mask map G channel in the shader.

Light Blend Styles are a collection of properties in the 2D Renderer that describe how lights should affect Sprites. For example, you can create a blend style that will only affect a particular channel. When you add a light in the scene that uses that blend style, it will only affect the areas of the Sprite that the Mask map channel information dictates.

In the example below, the parametric light uses our Direct Lighting blend style, which only affects the areas indicated in the R channel of that Sprite’s Mask map.

Here you can see Light Blend Styles in the 2D Renderer on the left, and a 2D Light using a blend style on the right.

Cinematic and particles

Lost Crypt has a short cinematic when our adventurer grabs the magic wand in the crypt. To make the moment a bit more special, we changed the mood of the environment and spawn particles at the right time with Timeline, since we want to observe the change to nighttime. To follow the particles flying into the woods, we switched Cinemachine cameras by also having an animation track blending camera.

We used Timeline to create a cinematic moment by coordinating camera, audio, and visual work.

The glowing ring that appears when you grab the wand uses of Sprite-type lights. The ring graphic simply expands and fades, creating an aura that lights up the environment.

We achieved the particle glow effect mostly with the Bloom effect in Volume post-processing. Also, the material/shader for the particles and trail uses an HDR color to define how much intensity the post-processing effect should apply to this object.

The particles use the Random Seed feature to always animate in the same way.

Animated ghouls

Look closely at the woods – you can see some spectral creatures in there. To do that, we created a shader that could be used for other ghosts. They are transparent but a fresnel effect adds some shine in the edges of the Sprite making them wobble like floating creatures.

One interesting effect in the shader is the tracking of the wand GameObject transform position. For example, when the wand is close to the ghouls they become brighter. In order to achieve that, we attached a small script to the wand that updates its position in the material shader.

By exposing values in the shaders, you can adjust visuals based on gameplay mechanics.

The ghouls also have a small animation that swaps from one graphic to another. In order to do that, we created a Mask map with different graphics in each channel: R with one visual, G with the alternate visual, and B for the fresnel effect.

Here you can see the ghoul when the wand position is far from it, and the Mask map is on the right.

Volume post-processing

For a final layer of polish, we added some post-processing effects included in the Universal Render Pipeline. For example, we created an empty GameObject and attached the Volume component to it. In Lost Crypt we use bloom, white balance, and vignette, but there are many other effects that can be used in 2D projects like motion blur, color correction of film grain effects.

Here are the Volume post-processing settings in Lost Crypt.

Wrap-up

We hope the Lost Crypt demo will help you understand how you can use our integrated suite of 2D tools for similar use cases. If you have any questions about the Lost Crypt, you can reach us on the forum.

If you have specific questions about our 2D tools, check out the dedicated threads in the 2D section of the forum and under Beta & Experimental features.

The project also includes a tutorial window that will help you navigate through the different features used in Lost Crypt.

Join us for a Lost Crypt webinar on January 9 at 10:00 am EST (4:00 pm CET)

Want to go behind the scenes with Lost Crypt in real-time? Sign up for our lively webinar where Global Content Evangelist Andy Touch will explain how we used 2D lights, shaders, and post-processing in Lost Crypt. The 2D team from R&D will also join us to answer your questions about the suite of 2D tools or the project itself.

 

Register

 

There’s a limited number of spaces, so make sure you register soon and add a reminder in your calendar.

22 replies on “Download our new 2D sample project: Lost Crypt”

hello Mr. Eduardo,may be i get something like bug in the Camera->Volume Mask, the layer dropdown does not work when i change it.so when i add volume in my 2d project with lwrp,i cannot close the volume effect on UI or something i don’t want to appear volume, thanks again,and waiting for your replying.

very well done. but i have still confused about how do you release the edge light effect on the tree? like halo effect, not change rim color in shader. thanks for replying!!

I imported the project but I got a bunch of errors in the compiler that I am not sure how to fix, they are mostly in the form of “‘SpriteRenderer’ does not contain a definition [x]”

Also, what you guys did is amazing! I am looking forward to learning a bunch from it

This is a really amazing demo of your new 2d tools! I’ve always had trouble starting my own game projects because there’s so many things I’m uncertain about. Like what tools are currently available, what’s the easiest way to do something, etc. Having such a well made demo is super helpful for people starting out and it honestly encouraged me to experiment with these tools instead of sitting on my lazy ass all day.

Hey, I’m working on a game and I can’t yet figure out how to do the shaders that move the trees. Is it ok to use your shaders in my project?

Hey, nice project. I’ts a lot of work to get everything set up in a project sometimes, and trying to figure out things at the same time, so I for one appreciate it. Can I use the assets here in my own unity projects ? Thanks.

I started working on something similar but gave up due to many restrictions in the past, such as 2d lights, IK etc. Used third party solutions but wasn’t satisfied . I target mobile platforms so the results were slow and disappointing. I will definitely check this and maybe resurrect my old project.

The lit foliage was created using multiple tools, the normal map was created outside with some free normal map generation software, but in the end, a lot of the final asset is done in Photoshop and formatted for proper channel separation.
On that subject, our last experiments were done using a 2D texture as a base for a sculpt in Blender, it’s not too hard to get excellent automatic exports of normals as well as masking information.

Very impressive…I’m pouring over it now trying to figure out what I can steal for my own projects. Quick question on your lit foliage (which is quite impressive). How did you generate the mask texture that you used for lighting? Is it based off of the normal map itself, or was it a separate process?

Leave a Reply

Your email address will not be published. Required fields are marked *