Highlighting

Highlighting is a system useful for drawing attention to specific objects or areas of the scene. On top of that, you might want to limit the interactions only to specific areas of the scene to force the user to click on those areas.

Quick Start

You can find pre-made highlighter prefabs at Assets/TutorialMAX/Prefabs/Highlighters. You can tweak them to your liking or use them as a starting point for creating your own highlighters. If you're looking for an advanced general purpose highlighter, you can take the Canvas Multi Highlighter prefab.

To use the highlighter, drag the Canvas Multi Highlighter prefab onto a Canvas object inside the scene. Then follow the instructions at the Testing section.

Creating Highlighters From Scratch

Keep on reading if you want to understand how a typical highlighter is made. You can theoretically have highlighting in UI Toolkit or even the 3D world. They could be simply unintrusive frames around the objects, or something else. For this tutorial we're going to explain how the "Canvas Multi Highlighter" prefab shipped with the asset pack is created. It's a Canvas-based highlighter with a dim dark background that blocks everything in view except for the highlighter areas, which looks like holes carved through the dark background.

1. Creating the Highlighter Object

Create the highlighting base by right-clicking on a Canvas in the hierarchy window, and selecting TutorialMAX => Highlighting => Highlighter. This will create an object with the TutorialHighlighter component defined on it, which is the basis for any highlighter.

2. Adjust the RectTransforms

Throughout the tutorial, pay attention to the RectTransforms. For the base highlighter object, we're going to make it full screen by stretching it both horizontally and vertically, with Left, Top, Right, and Bottom set to 0.

3. Create a Root GameObject

For this highlighter we're going to create a visual root object inside the highlighter object, for multiple reasons. Let's call it the "Visual Root" object.

• We can deactivate it without deactivating the main game object (highlighter).
• We can create behavior groups independently from the visual parts of our highlighter.

Let's also add a Canvas Group component to the visual root object.

4. Create the Backdrop Element

A backdrop element is not always desired, but for this tutorial, we're gonna create a GameObject and add an Image component to it. Set the color of the image to a transparent color such as 70% black and make sure the RectTransform is set to fill its parent, so set the anchors to stretch with all margins set to 0.

5. Create Highlight Rect Element(s)

Highlight Rects are the actual areas that are going to be highlighted. They can be any shape. For now, we're going to create a simple rectangle.

• Create a GameObject inside the Visual Root object and name it "Highlight Rect".
• Add an Image component to the Highlight Rect object. You can change the shape by setting the image sprite to anything you like, like a circle.
• Add a "Tutorial Canvas Highlight Rect" component to the object. Make sure "Stand Alone" is checked. This component can alternatively be added from the Add Behavior menu of the highlighter; but then you'll need to drag it to the "Highlight Rect" object.

You can create multiple Highlight Rects to highlight multiple areas of the screen and associate each with a unique Switch ID.

6. Configure Masking and Raycasting

1. It's time to configure the carving part. Select the visual root object and add Image and Mask components to it. Make sure Raycast Target is unchecked on the Image component and Show Mask Graphic is unchecked on the Mask component. Let's also add an "Unmask Raycast Registry" to it. You can also locate this component in the Add Component menu under TutorialMAX => Masking. This component is later used so that input raycasts go through the highlighted areas.
2. Add an "Unmask Raycast Filter" to the background object. This component is used to unblock raycasts on this object, since in our scenario this is the only object that is blocking all the raycasts while covering the whole screen.
3. Add an Unmask component on the "Highlight Rect" object.

7. Configure Appearance/Disappearance

Now we're going to make the dark background smoothly fade in and out depending on if at least one area is highlighted. To achieve this, select the highlighter object and click on "New Behavior Group". On the behavior group component, select "Any Areas" and add a UI => Canvas Group Alpha component. Finally, assign the canvas group added to the background image to the Group property of the Canvas Group Alpha behavior and check "Object Activation Control" to make sure that the whole object is deactivated when the object is fully faded out.

8. Area Factory (opt.)

By now you already have a working highlighter. However, it works only for a single area at a time.

If you need, you can have multiple areas highlighted at the same time by using the same Highlight Rect. To do this, select the highlighter and click on "Add Behavior" and select "Area Factory". Assign the Root object to the Root property of the Area Factory component. Then expand the Default Instantiator property, and assign the Highlight Rect object as the Prefab property.

Finally, select the Highlight Rect object, deactivate the GameObject, and uncheck "Stand Alone".