Hey everyone,
We’re excited to announce a new official Unity cross-platform sample project that showcases the capabilities of 2D lighting and visual effects in the Universal Render Pipeline (URP) in Unity 2022 LTS. It’s called Gem Hunter Match and it’s available on the Unity Asset Store from this week.
This is a sample slice of a grid-based puzzle, a modern match-3 game. It shows developers and artists how they can use multiple 2D light techniques, including custom 2D lighting using the Spriter Custom Lit shader node, available with URP and Unity 2022 LTS, that can make static objects and casual gameplay more fun, interesting, and visually appealing.
We recommend you read the supporting mini-manual to fully understand the project structure and URP 2D lighting techniques in the sample.
Here’s an overview of what you’ll find in the mini-manual, as well as the techniques covered in the sample:
Creating the 2D board pieces and custom light
The preparation of your sprites is your key consideration when working with the 2D lighting system. The main sprite should hold color information only, with light and shadow information kept off it, as you’ll see in the sample. The normal map is used by the 2D light system to know the direction of each pixel so they receive more or less light based on its position. The mask map is used by lights that can affect a specific RGB channel. This presentation provides a good explanation on the topic.
Sprite preparation: The different lights in the game use the sprite information to produce dynamic 2D lighting
Sometimes due to gameplay, convenience, or art direction needs, you’ll want to use a custom lighting model. You can achieve this with a Sprite Custom Lit Shader Graph, which enables you to modify the 2D light texture information, and/or illuminate the sprite in creative ways. In the sample, for example, a “fictional” light position is represented by the LightRotator GameObject, which is animated to create a glare effect off the gems. The modifications to the 2D light texture and the fabricated highlights with the Dot Product node are both used in the TileShader Shader Graph that’s applied to the gems in the game.
Using the Dot Product node in Shader Graph for creating effects on a gem in Gem Hunter Match
The Dot Product node calculates the proximity of the vector coming from the pixel in the normal map to the “fictional” light position. A value of 1 is the closest alignment and can be sampled as a white pixel. You can apply effects like multiplying to make the pixel of the base sprite lighter or darker. The changes in the shader affect all of the elements that use it, such as the puzzle pieces.
Effects with VFX Graph and Shader Graph
The VFX Graph- and Shader Graph-based visual effects in Gem Hunter Match include explanatory comments in each of their graphs, to help you understand how each system works together with 2D lights.
One of your best resources for learning how to create visual effects with VFX Graph is the e-book The definitive guide to creating advanced visual effects in Unity.
The special effects in Gem Hunter Match include:
- VFX Graph-based effects that display an unlit particle: This effect uses the Output Particle Quad.
- VFX Graph-based particle effects that use a custom shader: These use a shader graph to render the particles. For example, the effect called VFX_CellHoldDistortion uses a 2D shader in the output with the Support VFX Graph option enabled in the shader. When you add the 2D Shader Graph in the Output node, the output becomes one of the following:
- Output Particle Sprite Unlit Quad: When the Master node in the Shader Graph is Sprite Unlit, you can still apply effects to the particle but it won’t react to 2D Lights.
- Output Particle Sprite Lit Quad: When the Master node in the Shader Graph is Sprite Lit, it will react to 2D lights.
Polished-looking effects are usually a coordinated sequence of effects smoothly linked together with several Spawn nodes that spawn in specific moments with GPU events. When you create your own particle effects, make sure to use the right Sorting Layer in the Inspector for each VFX Graph.
Camera Sorting Layer Texture
The Radial Warp shader uses the URP 2D Camera Sorting Layer Texture setting. This handy feature gives you access to the graphics generated up to the indicated Sorting Layer in the URP 2D Renderer settings, which you can then use in Shader Graph to apply effects. In the Happy Harvest sample the Camera Sorting Layer Texture is used to create a water refraction effect, and in Dragon Crashers it’s used for smoke distortion. In this sample we use it to apply a distortion that simulates a shockwave, adding extra visual appeal when you make a match.
The Renderer 2D Data Asset, far left, and the Radial Warp shader read the onscreen image as a texture for the Base Color of the shader, and then apply deformation in the UV
Design customization
An example of how you can customize Gem Hunter Match by using the farm-themed assets from Happy Harvest, another Unity 2022 LTS 2D URP sample
You can customize the game visuals by replacing sprites of the core playable pieces in the level scenes. The UI can be customized in UI Toolkit’s UI Builder. A great resource for learning how to create user interfaces in Unity is this e-book.
You can also replace the mermaid with a character of your own. We cover the complete workflow to make skeletal animated characters in the e-book 2D game art, animation, and lighting in Unity. Here are a few ideas for how to personalize Gem Hunter Match:
-
Swap the artwork for each piece from its prefab. If you want to use the sample’s dynamic 2D light system, you’ll also need to use its methods for your artwork, mainly the decoupling of the shader information system with secondary textures.
Inside each prefab you’ll find the UI sprite reference which is the sprite used in the UI. You can create a new image for the pieces icon; since the sprites will only be used by the UI system, they won’t use the 2D lighting system. -
Swap the background for any prefab or image of your own. Disable the BG and VFX_Bubbles GameObjects so only your new art is visible. Ensure the sprites or your background use the Sorting Layer called Background so they don’t cover the board.
-
You can easily change the frame and background tiles color by selecting Tilemap and Tilemap_frame and changing the color.
Note about Unity 6: if you want to test the sample in an early version of Unity 6, the TileShader Shader Graph needs to have the NormalMap property changed from Global to Per Material in order to display properly.
We hope you’ll take a closer look at other features in this sample, like the 2D animated mermaid character, the way we use some of the UI Toolkit capabilities, and how we implement an object pooling pattern or the audio manager.
There is a whole library of technical e-books and related samples that you can download to learn about these methods, toolsets, coding practices, and many more. Be sure to get your copy of these great resources:
- Happy Harvest sample
- Dragon Crashers sample
- QuizU – A UI Toolkit sample
- 2D game art, animation, and lighting in Unity
- Level up your code with game programming patterns
- Create modular architecture with ScriptableObjects
- User interface design and implementation in Unity
- Unite 2023 talk: Lighting and AI techniques for your 2D game
As usual, let us know if you have any feedback about the Gem Hunter Match sample.