Skip to main content

Image Picker

Customize how your images are displayed and interact on the screen using prefab assets from the Image Picker in the Assets Library.

asset library window

Open Image Picker​

To open the Image Picker:

  1. Click the Asset Library button
open asset library
  1. Click Image Picker
open asset library

Import and Apply a Prefab Asset​

Now that the Asset Library is open, let's apply a prefab asset to your project:

  1. Go to Image Picker
  2. Click the Import and apply button. The prefab asset is automatically added to the Hierarchy panel and the Assets panel!
import and apply
tip

You can also click Import and apply while the asset is open. If you click the Import button instead, the package will still be imported into the Assets panel, but you'll need to manually drag the prefabs into the Hierarchy panel.


import and apply

Use Prefabs and Subgraphs​

Let's explore how you can incorporate prefabs and subgraphs from the Assets panel and into your projects.

Prefabs​

Prefabs are located in the Prefabs folder and can be dragged into the Hierarchy panel:

  1. Go to the Assets panel
  2. Open the Prefabs folder
  3. Drag the prefab into the Hierarchy panel Now that your prefab is added to the Hierarchy panel, you can change its parameters within the Inspector panel.

Subgraphs​

Subgraphs are located in the Subgraphs folder and can be dragged into the Visual Scripting panel or added directly by adding a node:

  1. Go to the Assets panel
  2. Open the Subgraphs folder
  3. Drag the subgraph into the Visual Scripting panel
tip

You can also add a subgraph by right-clicking anywhere within the dotted space in the Visual Scripting panel, select Add Node, and then choose Subgraph from the list.

Next, let's customize the subgraph by adding a scene object and a screen tap node to it.

  1. Go to the Hierarchy panel
  2. Click the Add object button [+]
  3. Go to 2D
  4. Select Screen Image
  5. Drag the Screen Image object onto the Scene Object
drag screen image

Now let's add a Screen Tap node:

  1. Go to the Visual Scripting panel
  2. Right-click anywhere in the dotted space, then select Add node
  3. Add the Screen Tap node
  4. Connect Next: Exec to Start
connect screen tap to set trigger once
  1. In the subgraph node, set the Start Position and End Position to your liking

Use Component Script to Spin an Image​

Let's go over an example of how to make your image spin using prefab logic:

  1. Go to the Inspector panel
  2. Click Trigger Once
  3. Select Set Trigger Once

Now let's add a Screen Tap node:

  1. Go to the Visual Scripting panel
  2. Right-click anywhere in the dotted space, then select Add node
  3. Add the Screen Tap node
  4. Connect Next: Exec to Enter
  5. Select the Value checkbox. You'll now notice that the image spins!
connect screen tap to set trigger once

Use Multiple Subgraphs on One Image​

First, let's apply the Fade Out prefab to your project:

  1. Click the Asset Library button
open asset library
  1. Click Image Picker
open asset library
  1. Go to Fade Out
  2. Click the Import and Apply button. The Fade Out prefab should now be added to the Hierarchy panel and the Assets panel.

Using the same logic above, add the Move 2D Object prefab to your project. The Move 2D Object prefab should now be added to the Hierarchy panel and the Assets panel.

Now let's add a 2D Scene Object:

  1. Go to the Hierarchy panel
  2. Click the Add object button [+]
  3. Go to 2D
  4. Select 2D Scene Object
  5. Go to the Inspector panel
  6. Click Add component
inspector panel add component
  1. Go to Custom Component
  2. Select Move 2D Object Logic
  3. Go to the Inspector panel and locate the Scene Object component
  4. Click None (Scene Object) and select Screen Image. Your new image is now applied!
tip

You can also add the Move 2D Object by dragging it from the Subgraphs folder from the Assets panel and into the Visual Scripting panel. Make sure you change the Object component to Screen Image.

Now let's adjust the start, end, and speed:

  1. Go to the Inspector panel
  2. Set the Start Position to (200, 100), End Position to (-200, -100), Speed: 5. This now combines both logics together as one image!

Sequence Two Images With Prefabs​

Let's learn how to set up a sequence of two subgraphs together using prefabs.

  1. Click the Asset Library button
open asset library
  1. Click Image Picker
open asset library
  1. Go to Fade Out
  2. Click the Import and Apply button. The Fade Out prefab should now be added to the Hierarchy panel and the Assets panel.

Using the same logic above, add the Move 2D Object prefab from the Asset Library to your project. You should now have two images on the screen together!

Next, we'll want to move the Screen Image to the side of the screen:

  1. Go to the Hierarchy panel
  2. Click Screen Image
  3. Go to the Inspector panel and locate the Screen Transform component
  4. Set Position to (500, 0)
  5. Locate the Move 2D Object component
  6. Click Trigger Once
  7. Select Set Trigger Once
set trigger once

Now let's add a Timer node:

  1. Go to the Visual Scripting panel
  2. Right-click anywhere in the dotted space, then select Add node
  3. Add the Timer node
  4. Connect Next: Exec to Start
  5. Set Duration to 1
  6. Connect Complete: Exec to Enter
  7. Select the Value checkbox
timer node

Now let's adjust the position of the image:

  1. Go to the Inspector panel and locate the Move 2D Object Logic component
  2. Set Start Position to (500, 0), and End Position to (0, 0)
  3. Deselect Autoplay The final step is to set up the Timer and Set Trigger Once nodes:
  4. Go to the Visual Scripting panel
  5. Go to the Timer node
  6. Set Duration to 1
  7. Connect Complete: Exec to Enter
  8. Select the Value checkbox. You'll now notice that the image moves from the start position to the end position!