Highlighting Objects

Highlight is a visual effect you can use to call attention to a specific object within your experience. Every highlight effect has two main components: an outline and an interior. The outline is a silhouette that surrounds the object, and the interior is a solid overlay that displays over the object's interior. You can customize both of these components independently to modify the highlight's visual appearance.

Original Object
Object with a yellow outline and black interior
Object with a black outline and yellow interior

Useful applications of the highlight effect include:

  • Providing visual feedback that an object is important and/or interactable.
  • Making distant objects visible through objects that are closer to the user.
  • Indicating the current position and status of other characters.

Adding Highlights

As a performance limit, Studio only displays 31 simultaneous Highlight instances on the client-side at a time. If you add more than this limit, the additional Highlight instances are silently ignored.

Parenting to Objects

To add a highlight to an object, you can parent a new Highlight directly to the object you want to display the highlight:

  1. In the Explorer window, hover over either a Model or a BasePart, then click the ⊕ button. A contextual menu displays.

  2. From the menu, insert a Highlight. The highlight displays on the object with its default property values that create a white outline and a red tint overlay.

Setting the Adornee Property

Alternatively, you can place the Highlight instance outside of a child/parent relationship either within the workspace, StarterPlayer, StarterGui, StarterPack, or ReplicatedStorage, then set its Highlight.Adornee property to the Model or BasePart you want to display the highlight.

Customizing Highlights

You can change the properties of a Highlight instance to create interesting visual effects that properly highlight your objects in theme with your experience.

OutlineColor

The Highlight.OutlineColor property sets the Color3 value of the highlight's outline.

OutlineColor = [255, 100, 50]
OutlineColor = [0, 255, 125]
OutlineColor = [75, 150, 255]

OutlineTransparency

The Highlight.OutlineTransparency property sets the visibility of the highlight's outline to any value between the default value of 0 (fully visible) and 1 (invisible).

OutlineTransparency = 0
OutlineTransparency = 1

FillColor

The Highlight.FillColor property sets the Color3 value of the highlight's interior.

FillColor = [255, 100, 50]
FillColor = [0, 255, 125]
FillColor = [75, 150, 255]

FillTransparency

The Highlight.FillTransparency property sets the visibility of the highlight's interior to any value between the default value of 0 (fully visible) and 1 (invisible). You can use this property to determine how much of the object's existing color you want users to see.

FillTransparency = 0
FillTransparency = 0.5
FillTransparency = 1

DepthMode

The Highlight.DepthMode property controls how the effect displays with respect to other objects in the world. You can set this property to one of the following options:

  • AlwaysOnTop - Allows the highlight to display regardless if there are objects between the camera and the highlighted object. This means the user is always able to see the highlight regardless of what is between the highlighted object and the camera.

  • Occluded - Hides the highlight if there are objects between the camera and the highlighted object. This means the user is only able to see the object if there are no obstructing objects between the highlighted object and the camera's view.

DepthMode = AlwaysOnTop
DepthMode = Occluded

Enabled

The Highlight.Enabled property allows you to quickly enable or disable the highlight without any impact on performance.

Performance Tips

While you have a lot of options to customize your Highlight instances, we recommend keeping the following in mind to increase your experience's performance for all user devices:

  • Adding or removing a Highlight can cause a geometry rebuilding step that might lead to performance spikes and extra draw calls. If you want to change a Highlight instance's appearance or temporarily hide/display it on an object, it's best to customize the properties of the Highlight instance directly, as changing any property of the Highlight instance is lightweight and doesn't impact performance.
  • Roblox draws objects in a back to front order, which can cause problems if you embed objects with a child Highlight inside other objects that also have children Highlight instances. For this reason, it's best to keep objects with Highlight instances outside of a parent/child relationship with other objects with Highlight instances.

Highlights for Low-End Devices

For low-end devices, Studio uses a fallback version that doesn't have high performance overheads. This version doesn't have the outline effect; instead, it creates an interior fill with a checker pattern to emulate the Highlight.FillTransparency property.