Getting Started꞉ Item Canvas

On this page, you'll learn how to customize the default item renderer's canvas by adjusting the sizes and positions of its elements.

Instructions

📷 Modifying the default item renderer's canvas elements

1. Complete the Scene Setup step.
2. Add an item to your scene. See the Checkbox Item or Slider Item instructions for assistance.
3. Find the HoverCanvas component of the renderer's Canvas object.
   1. Set "Alignment" to control the position of the label and icons. For all options (except "Custom") the label position automatically compensates for the size of the icon. Some options keep the label near to the icon, while others push them to opposing sides.
   2. Set "Icon Size" to control the size of the icons. For all options (except "Custom") the icon size is determined relative to the label's font size.
   3. Set "Alignment" to the "Custom" option to enable manual positioning of the label and icons. With this option selected, the HoverCanvas component no longer sets these positions automatically.
   4. Set "Icon Size" to the "Custom" option to enable manual sizing of the icons. With this option selected, the HoverCanvas component no longer sets these sizes automatically.
4. Find the HoverItemData-based component (like HoverItemDataCheckbox) of the item object. Regardless of the sizes and positions used by the canvas element, the renderer still uses this data as expected. For example:
   1. Set "Label" to some value, and watch how the renderer's text label updates.
   2. Set the "Value" property (like "Checkbox Value") to see how the icons update.

Related Assets

This tutorial uses the GettingStarted-Customize-ItemCanvas scene, from the "HoverDemos" folder.