Search Unity

Find a treasure trove of lighting and visual effects in our new match-3 sample Gem Hunter Match

April 29, 2024 in Engine & platform | 8 min. read
Gem Hunter match-3 sample
Gem Hunter match-3 sample

Is this article helpful for you?

Thank you for your feedback!

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.

This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.

Gem Hunter Match sample trailer

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. 

Download Gem Hunter Match

The latest high-quality URP sample for Unity creators

Unity URP game samples
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. 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.

A simple game loop with colorful elements

The game loop in Gem Hunter Match
The game loop in Gem Hunter Match

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. 

An example of the gameplay in Gem Hunter Match
An example of the gameplay in Gem Hunter Match

The simple game loop includes an inventory you can reuse. Here are its main elements: 

  1. The Main scene: This screen lists all the playable levels, which are referenced from a ScriptableObject called LevelList, located inside the Data folder.  
  2. The Level scene: This shows the setup for the gameplay. You need to clear the elements in the Goals section. 
    • In the Data/BonusItems folder, you’ll find the boosters and the referenced prefab that contains parameters like the combo shape to be spawned (in the case of several pieces having the same combo shape, a random one will be chosen). You can create your own boosters from the top menu via Assets > Create > 2D Match.
  3. 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: 
    • Coins: Earn coins with matches of three or more and use them as soft currency. 
    • Hearts or lives: These boosters buy you a chance to retry a failed level. If the player runs out of such boosters in a match-3 game, there’s often a cooldown period for them before they can replenish their life/health points. 
  4. 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. 

Creative control with per-object lighting on 2D sprites

Using the Dot Product node in Shader Graph for creating effects on a gem in the sample
Using the Dot Product node in Shader Graph for creating effects on a gem in the sample

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.

Normal mask and mask map

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.

Sprite preparation in the game
Sprite preparation: The different lights in the game use the sprite information to produce a dynamic 2D light system; see the mini-manual included with Gem Hunter Match for more information.

A glare effect makes the gems shine

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.

Dot Product node illustration
How the Dot Product node works

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.

Get Gem Hunter Match

Camera Sorting Layer Texture for a shockwave effect

The shockwave/ripple effect in Gem Hunter Match
The shockwave/ripple effect in Gem Hunter Match

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.

Make your casual 2D game shine

Enjoy and get inspired from our latest URP sample
Enjoy and get inspired from our latest URP sample

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:

Make sure to join the conversation about the Universal Render Pipeline on the Unity Forums or join Unity Discussions.

April 29, 2024 in Engine & platform | 8 min. read

Is this article helpful for you?

Thank you for your feedback!

Related Posts