> For the complete documentation index, see [llms.txt](https://handtracking.lightbuzz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://handtracking.lightbuzz.com/examples/detect-and-visualize-hands-from-a-sprite.md). # 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.