# No Code: Detect and visualize hands from a Sprite

This example demonstrates how to detect and visualize fingers in an image sprite using an [ImageView](https://handtracking.lightbuzz.com/ui-reference/imageview),  a [SpriteSource](https://handtracking.lightbuzz.com/ui-reference/streamsource/spritesource), a [HandManager](https://handtracking.lightbuzz.com/ui-reference/handmanager) and a [HandViewer](https://handtracking.lightbuzz.com/ui-reference/handviewer). No code is needed for this example!

{% hint style="warning" %}
All Hand Tracking Unity plugin samples are no-code! You can find the code versions in the `Examples` section of this documentation.
{% endhint %}

{% hint style="info" %}
This is a walkthrough of the `LightBuzz_Hand_Tracking_Picture` Hand Tracking Unity plugin sample.&#x20;
{% endhint %}

#### Step 1: Create a Unity scene

Open the Unity Project you created in the [Installation](https://handtracking.lightbuzz.com/hand-tracking-unity-plugin/installation) section.

Right-click on the `Assets` folder and select `Create > Scene`.

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2Fjq6n6qCxjh0OR775jrfm%2F1_create_scene.png?alt=media&#x26;token=f8e0e814-512e-4bab-b17e-c341a8bd2281" alt=""><figcaption><p>Create new scene</p></figcaption></figure>

Type the scene's name. In this example, we'll use the name `PictureDemoNC`.

After the scene is created, right-click on the scene and select `GameObject > UI > Canvas`.

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2Fde9seJ1XF1in693SVhhX%2F2_add_canvas.png?alt=media&#x26;token=dc33f608-7150-4fe9-a2c4-07fa0e212c35" alt=""><figcaption><p>Add a Canvas</p></figcaption></figure>

#### Step 2: Add hand tracking prefabs

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

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2FptBTcWOYXEUCIgv8n8Cs%2F3_prefabs.png?alt=media&#x26;token=a8c96402-2def-43f9-87cb-764c0336e3ed" alt=""><figcaption><p>LightBuzz Prefabs</p></figcaption></figure>

For this example, drag and drop the [ImageView](https://handtracking.lightbuzz.com/ui-reference/imageview), [SpriteSource](https://handtracking.lightbuzz.com/ui-reference/streamsource/spritesource), [HandViewer](https://handtracking.lightbuzz.com/ui-reference/handviewer) and [HandManager](https://handtracking.lightbuzz.com/ui-reference/handmanager) prefabs into the Canvas.

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2FzSYw5mIcdr2FwEFhhKqj%2F4_add_prefabs_picture_nocode.png?alt=media&#x26;token=dd9bf7c2-9217-4751-856c-d38375105c40" alt=""><figcaption><p>Add prefabs</p></figcaption></figure>

Select the [SpriteSource](https://handtracking.lightbuzz.com/ui-reference/streamsource/spritesource) prefab and connect the `Sprite` field 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.

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2FBCAde7gKKSjlOHxJeKGy%2F9_sprite.png?alt=media&#x26;token=372d4901-937d-4bc9-ae85-5cbd650b2359" alt=""><figcaption><p>Connect field to SpriteSource</p></figcaption></figure>

#### Step 3: Set render options

After connecting all the fields, navigate to the `Canvas` to set the render options.

Change the `Render Mode` to `Screen Space - Camera`.

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2F3Nl9z2Beuk8eRI1DZj7G%2F11_render_mode_camera.png?alt=media&#x26;token=e582de34-c7cb-4610-82a7-9d2a3b9f486d" alt=""><figcaption><p>Change Render Mode</p></figcaption></figure>

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

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2FIUjjpjWLwZqDxqRdJ5q9%2F12_main_camera.png?alt=media&#x26;token=d82b6dce-3e08-4777-8bb2-23ed475d6aca" alt=""><figcaption><p>Select Render Camera</p></figcaption></figure>

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

<figure><img src="https://1895788644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyGqKFJQGBmrlsrsolzNU%2Fuploads%2FqVosuFDLymh0LRB1qK48%2F13_render_camera_settings.png?alt=media&#x26;token=6a83eba6-4c2c-4787-a324-f1c519b26026" alt=""><figcaption><p>Render settings</p></figcaption></figure>

By following these steps, you will be able to detect and visualize fingers in an image sprite without a single line of code.
