Getting Started꞉ Animated 3D Icons

On this page, you'll learn how to create custom, animated, three-dimensional icons.

This tutorial shows one specific way to accomplish this, by assembling and adding components to simple "Cube" primitives. Of course, there are unlimited possibilities here -- using detailed 3D models, with complex animation paths, reacting to different values or events, and so on.

Instructions, Part 1: Build Geometry

📷 Building, sizing, and positioning the custom icon's geometry

1. Complete the Scene Setup step.
2. Add a checkbox item to your scene. See the Checkbox Item instructions for assistance.
3. Create an empty GameObject named CustomIcon as a child of the item renderer object.
   1. Add five "Cube" primitives, named Top, Bottom, Left, Right, and Center.
   2. Apply an appropriate size and position to each of the five cubes.
4. Rotate the item object, making it face mostly upwards.
5. Select the CustomIcon object.
   1. Rotate the object, making it face straight forward (negate the item's rotation).
   2. Position the object, making it float above the item's flat plane.

Instructions, Part 2: Animate Entire Icon

📷 Adding a component to dynamically animate the entire icon

1. Add the ScaleViaIndicator component to the CustomIcon object.
   1. Set the scale-related properties to control the scale at start, at maximum highlight progress, and at maximum selection progress.
   2. The scale will dynamically update based upon highlight and selection progress values, which are provided by the object set in the "Indicator" property.
2. Play the scene.
   1. Drag an active cursor near to the item.
   2. Notice how the icon scale animates based upon the item's highlight and selection progress.
3. Review the code of the ScaleViaIndicator component.
   1. Notice its simplicity, using the indicator values to interpolate between scales.
   2. Consider ways you could expand on this to perform more complex animations.

Instructions, Part 3: Animate Icon Elements

📷 Adding components to dynamically animate the icon's internal elements

1. Add the ScaleViaIndicator component to all child objects of the CustomIcon object.
   1. Set the scale-related properties to control the scale at start, at maximum highlight progress, and at maximum selection progress.
   2. Note the different settings used for the Center object compared to the others.
2. Play the scene.
   1. Drag an active cursor near to the item.
   2. Notice how the icon elements' scale is animated based upon the item's highlight and selection progress.
3. Stop the scene.
4. Add the ColorViaIndicator component to all child objects of the CustomIcon object.
   1. Optionally, change the color settings for each object.
5. Add the ShowViaItemBoolValue component to the Center object.
6. Play the scene.
   1. Drag an active cursor near to the item.
   2. Notice how the icon elements' color is animated based upon the item's highlight and selection progress.
   3. Notice how the Center object's visibility matches the checkbox item's boolean value (its toggled/untoggled state).
7. Review the code of the ColorViaIndicator and ShowViaItemBoolValue components.
   1. Notice its simplicity of the code in these components.
   2. Consider ways you could expand on this to perform more complex animations.

Related Assets

This tutorial uses the GettingStarted-Customize-ItemIcon3D scene, from the "HoverDemos" folder. The sections above include links for the components used in this tutorial.