Find a treasure trove of lighting and visual effects in our new match-3 sample Gem Hunter Match
Gem Hunter Match, a new official Unity sample, shows you how a 2D puzzle/match-3 game can stand out from the competition with eye-catching lighting and visual effects created in the Universal Render Pipeline (URP) in Unity 2022 LTS.
Download the sample, together with its mini-manual, and get ready to dive for riches in crystal blue waters populated with brightly colored jewels and sea creatures. You’ll learn how to prepare and light 2D sprites to add depth, apply a Sprite Custom Lit shader for shimmer, and create glare and ripple effects.
View the Gem Hunter Match script in Unity Samples.
Gem Hunter Match follows the URP 3D Sample and Happy Harvest as the latest in a series of samples, created by multiple teams at Unity, that illustrate the many capabilities of URP in Unity 2022 LTS for 3D and 2D multiplatform projects. At the end of this post, we link to more great URP learning resources.
This playable slice of a cross-platform match-3 puzzle game is available on the Unity Asset Store and Unity Samples. You can customize Gem Hunter Match with your assets or gameplay, or reuse any of its sprites, shaders, effects, audio, textures, and scripts in a project of your own.
Bubbles, coral, and a watchful mermaid form the backdrop to the game board in Gem Hunter Match. Pearls, pink sapphires, ruby-red starfish, blue fish, golden clams, and sleepy sea turtles populate the board across three playable levels. Clear the gems and earn boosters and coins by matching three or more items. Boosters help you achieve the goals, but if you fail, you lose a heart. Wooden crates and rope are blockers; match three next to a wooden crate or underneath a piece of rope to remove them.
The simple game loop includes an inventory you can reuse. Here are its main elements:
The Main scene: This screen lists all the playable levels, which are referenced from a ScriptableObject called LevelList, located inside the Data folder.
The Level scene: This shows the setup for the gameplay. You need to clear the elements in the Goals section.
End of level / The Shop: Access the shop when you fail or complete a level; buy yourself boosters, hearts, or other currency. All of the shop items are in the folder named Data/ShopItems (you can also add your own via Assets > Create > 2D Match. Items in the shop include:
Stars: You collect these after completing each level; in actual match-3 games, stars are often a part of the metagame, decoration, or are used to advance the storyline.
2D puzzle/match-3 games are popular because they’re cute and colorful, easy and fun to play, and accessible to anyone from almost anywhere.
They can also include beautiful artwork, but with their static camera, repetitive gameplay, and, in many cases, prebaked lighting and shadows, they’re not known for bleeding-edge light and visual effects. And yet there are plenty of ways you can add pops of sparkles and glimmer for extra fun.
A Sprite Custom Lit shader is one of the techniques used for creating the visual effects in Gem Hunter Match. This shader substitutes for scene lighting, allowing us to modify the 2D light texture information and control the lighting on each piece. The result is creative illumination of the sprites, like the shimmery effect that moves over the pieces.
The light position data is moved into the shader, eliminating the need for actual light objects in the scene, which also helps to keep it neat. The encapsulated per-object lighting in the shader works well for better isolation and editing at scale and improves performance where batching is possible.
With the light and shadow information held in the shader, only the color information is included in the sprites. The normal map is used by the 2D light system to calculate the direction of each pixel, ensuring it receives more or less light based on its position. The mask map is used by lights that can affect a specific RGB channel.
The Lights prefab in Gem Hunter Match level scenes contains the 2D lights for the grid. These lights affect the default Sprite Lit shader and are applied to the grid items included in the Sorting Layer that receives light.
The following image illustrates the steps in creating the sprites and how the Sprite Custom Lit shader fits into the process.
In Gem Hunter Match, 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.
The Dot Product node can be useful in 2D projects when you want to do custom lighting. Dot Product measures how close two vectors align. In the sample, the LightDirection position is compared to the apparent direction of each pixel in the Normal map. The sampled black and white image can be used to add light to the sprite and update the values at runtime for all the pieces using the same shader.
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 that 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. It’s the kind of effect that creates an impact that your players will remember.
We hope you’ll download Gem Hunter Match, play and customize it, then try out its graphics techniques in your own projects. All of these and more are covered in the Unite 2023 session, Lighting and AI techniques for your 2D game.
Don’t miss out on these other samples, e-books, and tutorials for URP:
- E-book: 2D game art, animation, and lighting for artists
- E-book: Introduction to the Universal Render Pipeline for advanced Unity creators
- Unite 2023: Accelerate your multiplatform development with the latest for URP
- Livestream: What’s new in Unity’s Universal Render Pipeline?
- Video tutorial: Happy Harvest: Custom crops and player notes
- E-book: The definitive guide to creating advanced visual effects in Unity
Make sure to join the conversation about the Universal Render Pipeline on the Unity Forums or join Unity Discussions.