# Detect and visualize hands from a Sprite This example demonstrates how to load and display image sprites in a Unity scene with an [ImageView](/ui-reference/imageview.md), implement hand tracking with the [HandTracker](/api-reference/handtracker.md), and use the [HandManager](/ui-reference/handmanager.md) to render detected fingers on a 2D canvas. {% hint style="info" %} This is a code walkthrough of the `LightBuzz_Hand_Tracking_Picture` Hand Tracking Unity plugin sample. The plugin includes the no-code demo that has the same functionality. {% endhint %} #### Step 1: Create a Unity scene Open the Unity Project you created in the [Installation](/hand-tracking-unity-plugin/installation.md) section. Right-click on the `Assets` folder and select `Create > Scene`.

Type the scene's name. In this example, we'll use the name `PictureDemo`. After the scene is created, right-click on the scene and select `GameObject > UI > Canvas`.

Navigate to the LightBuzz `Prefabs` folder at `Assets\LightBuzz Hand Tracking\Runtime\Prefabs`.

For this example, drag and drop the [ImageView](/ui-reference/imageview.md) and [HandManager](/ui-reference/handmanager.md) prefabs into the Canvas.

Then, right-click on the `Hierarchy` pane and select `Create Empty`.

Give a name to the new component. In this example, we'll use the name `Demo`. Then, go to the `Inspector` pane and select `Add Component`. In the search bar, type `new` and select the `New script` option.

Type the script's name and select `Create and Add`. For this example, we'll use the name `PictureDemo`.

#### Step 2: Initialize the visual components Double-click on the newly created `MonoBehaviour` script and import the necessary namespaces. ```csharp using LightBuzz.HandTracking; using System.Collections.Generic; using UnityEngine; ``` For this example, we'll need a `Sprite`to load an image, an [ImageView](/ui-reference/imageview.md) to draw its texture and a [HandManager](/ui-reference/handmanager.md) to visualize the detected hands. ```csharp [SerializeField] private ImageView _image; [SerializeField] private HandManager _handManager; [SerializeField] private Sprite _sprite; ``` After adding the serialized fields, go to the Unity Editor to connect these fields with the `Demo` component. At the `Inspector` pane, select the round button next to each `SerializeField`.

Then, at the `Scene` tab, select the corresponding prefab. For example, for the `Image` field, select the `ImageView` prefab.

The `Sprite` field should connect to an image sprite. You can either use the demo image sprite `lightbuzz-hand-tracking.png` included in the `Assets/LightBuzz Hand Tracking/Runtime/Media` folder or create your own image sprite. When all fields are connected, the result should resemble the following image.

Then, select the `HandManager` prefab, under the `Canvas`, and connect the `Image` field to the `ImageView` prefab.

{% hint style="info" %} Make sure the `Is 2D` option is selected to see the hand tracking detections in the 2D space. If the option is not checked, detections are displayed in the 3D world space. {% endhint %} After connecting all the fields, navigate to the `Canvas` to set the render options. Change the `Render Mode` to `Screen Space - Camera`.

Then, set the `Main Camera,` from the Scene tab, as the `Render Camera`.

When all the render options are set, the result should look like the following image.

Finally, return to the script and instantiate a [HandTracker](/api-reference/handtracker.md) to detect hands. ```csharp HandTracker _handTracker = new HandTracker(); ``` #### Step 3: Load the image Create a `Texture2D` object with the `Sprite`'s texture. ```csharp Texture2D texture = _sprite.texture; ``` Load the `Texture2D` object onto the [ImageView](/ui-reference/imageview.md) to show the image. ```csharp _image.Load(texture); ``` #### Step 4: Detect hands Pass the texture created in Step 3 to the [HandTracker](/api-reference/handtracker.md) for processing. ```csharp List hands = _handTracker.Load(_image.Texture); ``` The [HandTracker](/api-reference/handtracker.md) will analyze the texture and detect any hands present in the image. #### Step 5: Visualize the hands To display the detected hands on a 2D canvas, simply pass the detections to the [HandManager](/ui-reference/handmanager.md). It will manage the rendering and updates required to accurately depict the hands on the canvas based on the detection data provided. ```csharp _handManager.Load(hands); ``` {% hint style="info" %} Steps 3 through 5 are incorporated into the `Start()` method. {% endhint %} #### Step 6: Release the resources Dispose of the [HandTracker](/api-reference/handtracker.md) object to ensure that all associated resources are released. ```csharp _handTracker.Dispose(); ``` {% hint style="info" %} In this example, the resources are released in the `OnDestroy()` method. Alternatively, you could do that with the click of a button or in the `OnApplicationQuit()` method. {% endhint %} ### Full example code Here is the full example code that has the same functionality as the Hand Tracking Unity plugin `LightBuzz_Hand_Tracking_Picture` sample. ```csharp using LightBuzz.HandTracking; using System.Collections.Generic; using UnityEngine; public class PictureDemo : MonoBehaviour { [SerializeField] private ImageView _image; [SerializeField] private HandManager _handManager; [SerializeField] private Sprite _sprite; private readonly HandTracker _handTracker = new HandTracker(); private void Start() { Texture2D texture = _sprite.texture; _image.Load(texture); List hands = _handTracker.Load(_image.Texture); _handManager.Load(hands); } private void OnDestroy() { _handTracker.Dispose(); } } ``` By following these steps, you will be able to load a `Sprite` into your application, detect hands, and finally, render these detections on a 2D canvas. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://handtracking.lightbuzz.com/examples/detect-and-visualize-hands-from-a-sprite.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.