> For the complete documentation index, see [llms.txt](https://octanta-studio.gitbook.io/automatic-tutorial-maker-for-unity-in-game-tips/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://octanta-studio.gitbook.io/automatic-tutorial-maker-for-unity-in-game-tips/usage-guide/advanced-creating-visual-prefab.md).

# Advanced: Creating Visual Prefab

## Custom UI Pointer or Hover

* Create a GameObject on UI layer and add a pointer image to it.
* Add UIPointerGraphAnimation component to the main GameObject.
* In Settings field, assign settings. Create new ones via Create > Tutorial System > Pointer Graphic Settings. For full animation control, use UIPointerNone settings.
* Optionally add a text element and assign it to Text Element field to display step text.
* Add all pointer's images to Images To Lerp list for automatic raycast disable and fade animations possible.
* For mouse-style pointers, add mouse parts to corresponding fields for animation.
* Make it a prefab by dragging to your folder. You can now assign this prefab to the Pointer Prefab and Hover Prefab fields in the tutorial step.

## Custom UI Graphic

<figure><img src="/files/SSnJTD7YgtYUHbbm1E15" alt=""><figcaption><p>Graphic Prefab all possible components</p></figcaption></figure>

* Create a GameObject on UI layer and add required graphics to it - **main composition, popup window, animations, etc**.
* Add UIGraphicAnimation component to the main GameObject.
* In Settings field, assign settings. Create new ones via Create > Tutorial System > Graphic Settings. For full animation control, use UI Graphics None settings.
* Optionally set **Background** color for graphics background dimming.
* Choose positioning relative to canvas or use current anchors.
* Optionally add text element and assign it to **Text** Element field to display step text.
* Add all graphic's images to Images To Lerp list for automatic raycast disable and fade animations.
* In **Confirm Button** field, assign a button that requires pressing before completing the step. Important: button click must trigger InitializeByConfirm method in UIGraphicAnimation.
* In **Gesture Graphic** field, assign swipe animation object to reflect swipe direction without duplicating graphics.
* Make it a prefab by dragging to your folder. You can now assign this prefab to the Graphic Prefab fields in the tutorial step.

<figure><img src="/files/JHtKpbBLy4p0ono8Is2l" alt=""><figcaption><p>Confirm Button should have a reference to the graphic script and activate InitializeByConfirm method</p></figcaption></figure>

## Custom World Pointer or Hover

* Create a GameObject in world coordinates and add a pointer sprite/mesh to it.
* Add WorldPointerAnimation component to the main GameObject.
* In Settings field, assign settings. Create new ones via Create > Tutorial System > World Pointer Settings. For full animation control, use WorldPointerNone settings.
* Optionally add a world text element and assign it to Text Element field to display step text.
* Add all pointer's sprites to Sprites To Lerp list and all pointer\`s meshes to Meshes To Lerp list for automatic raycast disable and fade animations possible.
* For Frame-style pointers, add a Frame Corner Prefab of upper left corner.
* Make it a prefab by dragging to your folder. You can now assign this prefab to the World Pointer Prefab and World Hover Prefab fields in the tutorial step.

## Custom World Graphic

* Create a GameObject in world coordinates and add required graphics to it.
* Add WorldGraphicAnimation component to the main GameObject.
* In Settings field, assign settings. Create new ones via Create > Tutorial System > World Graphic Settings. For full animation control, use UI Graphics None settings. Choose positioning relative to Camera or use current position.
* Optionally add text element and assign it to **Text** Element field to display step text.
* Add all pointer's sprites to Sprites To Lerp list and all pointer\`s meshes to Meshes To Lerp list for automatic raycast disable and fade animations possible.
* Make it a prefab by dragging to your folder. You can now assign this prefab to the World Graphic Prefab fields in the tutorial step.