Detect and visualize hands from a Sprite
An example on how to detect and visualize hands from a Sprite.
This example demonstrates how to load and display image sprites in a Unity scene with an ImageView, implement hand tracking with the HandTracker, and use the HandManager to render detected fingers on a 2D canvas.
Step 1: Create a Unity scene
Open the Unity Project you created in the Installation 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 and HandManager 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.
using LightBuzz.HandTracking;
using System.Collections.Generic;
using UnityEngine;
For this example, we'll need a Sprite
to load an image, an ImageView to draw its texture and a HandManager to visualize the detected hands.
[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.

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 to detect hands.
HandTracker _handTracker = new HandTracker();
Step 3: Load the image
Create a Texture2D
object with the Sprite
's texture.
Texture2D texture = _sprite.texture;
Load the Texture2D
object onto the ImageView to show the image.
_image.Load(texture);
Step 4: Detect hands
Pass the texture created in Step 3 to the HandTracker for processing.
List<Hand> hands = _handTracker.Load(_image.Texture);
The HandTracker 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. It will manage the rendering and updates required to accurately depict the hands on the canvas based on the detection data provided.
_handManager.Load(hands);
Step 6: Release the resources
Dispose of the HandTracker object to ensure that all associated resources are released.
_handTracker.Dispose();
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.
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<Hand> 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.
Last updated