# Prefabs

In most *HMI* **Projects** you will create, the likelihood of having different variants of a component is quite high. Although this component can be anything from list items to search boxes, in this **Demo** we will be focusing on arguably the most prominent one: buttons.

## Overview

As part of this **Project** you will:

1. [Create a simple button in **Incari Studio**.](#1-creating-a-simple-button)
2. [Turn your basic button into a customizable **Prefab** with **Logic**.](#2-building-your-prefab)
3. [Use **Prefabs** to build a complex **Project** with just a few clicks.](#3-using-prefabs-to-build-complex-projects)

| :information\_source: | **What is a Prefab?** |
| --------------------- | --------------------- |

A **Prefab** in **Incari Studio** is a reusable component that encompasses its own **Logic**, design, and behavior independently from the rest of the **Project**. This means they can be transferred between **Projects** and take many shapes. For more information, see [**Prefabs**](https://docs.incari.com/incari-studio/2022.1/objects-and-types/prefabs).

| :warning: | **Before you start** |
| --------- | -------------------- |

In order to follow along with this guide, you will need to be running **Incari** **Studio** version 2022.1 or higher. [Download now](https://www.incari.com/incari-studio/). Also, to follow along, you can download the **Assets** folder for this project using this [link](https://repo.incari.com/incari/prefabs/-/archive/master/prefabs-master.zip?path=Assets).

The fully functional **Project** is available in **Incari Hub** under *Remote Projects*. To start from scratch, keep following from here.

## 1. Creating a Simple Button

Imagine a generic, rounded rectangle button that can have multiple different icons in the middle, something you would see in a lot of *HMI* systems. This can even be used to build a custom keyboard, although there is already a customizable [**On-Screen-Keyboard** **Object**](https://docs.incari.com/incari-studio/2022.1/readme) in **Incari**, so there is no need.

Our button will have three states: **'Resting'**, **'Hover'**, and **'Pressed'**.

![Button states.](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-08ed63c416af2cad6294d80908d20cad40a4c4e6%2Fdemoprefabs_buttonstatesv2.png?alt=media)

For this **Demo**, we need 5 different buttons: *Wi-Fi*, *Bluetooth*, *Cellular*, *GPS*, and *Mic*. This is a common layout that you might see everywhere from your phone to your car. These are the final buttons we want to have:

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-25a58613c959a8b0ff18893c304916b5b30c37e2%2Fdemoprefabs_allbuttonsv2.png?alt=media)

### 1) Creating the Project

Open **Incari Hub** and [create a **Project**](https://docs.incari.com/incari-studio/2022.1/getting-started/first-steps/creating-a-project) using the default parameters. After all is complete, you should be presented with the **Incari Studio** start screen.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-218c5754426f45a14782f5658f0d2d01e9111d63%2Fdemoprefabs_createproject2.png?alt=media)

### 2) Importing the Assets

Go to the **Asset Manager** to import the unzipped files into your **Project** which you downloaded by the above.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-eb4b3abb965cab666447a042281de6ab4999f11e%2Fdemoprefabs_importassets.gif?alt=media)

### 3) Creating Image Sequences

One of the simplest ways of creating different states for an image is using [**Image Sequences**](https://docs.incari.com/incari-studio/2022.1/toolbox/events/imagesequence). In your **Project's** **Assets** folder, you will find them pre-created. Should you wish, you can skip this step. But just to demonstrate how easy it is to create them, let’s make one for the Wi-Fi icon.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-d6f8005fe1910669d19a290662575671d43fc0c3%2Fdemoprefabs_createImageSequence.gif?alt=media)

### 4) Creating a Prefab

To create a new **Prefab**, in this case one called **'Button'**, simply right-click on the **Asset Manager** and select `Create Asset > Prefab`.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-c17251fdee597c4d4b76558e08265549cd472f8a%2Fdemoprefabs_createprefab.gif?alt=media)

### 5) Creating our Button

After creating your **Prefab**, double-click on it to open the editor. To add **Assets** to the **Scene**, simply drag them from the **Asset Manager** to the **Scene**. First, we will add the button backgrounds **Image Sequence** ('Button.incseq'). This way, we can later modify its state on hover.

Lastly, add an icon (let’s use Wi-Fi for the first one) and set its `sort index` to 3, so that it’s on top of everything else. Changing its name to Icon from the **Scene Outliner** is also a good way to make sure it stays common.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-3b22995aea8562c6be106e53694dbe14775e53cb%2Fdemoprefabs_createbutton.gif?alt=media)

## 2. Building Your Prefab

### 1) Animating the Prefab with Logic

Open the **Logic Editor** through `View > Logic Editor`.

Let’s start by creating the **Logic** for the **'Hover'** and **'Resting'** states.

![Hover Logic](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-be877cb4296eda9d887b9e140dd3f239f30d8d95%2Fdemoprefabs_hoverlogic.png?alt=media)

And lastly, when we click our button it will change the state of the icon, negate the corresponding variable, and output the new value.

![Click Logic](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-862a826006bbca62dc6a426132f138afcf2a98e9%2Fdemoprefabs_clicklogic.png?alt=media)

Which leaves us with this as the end result:

![End Result](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-1b04db295a754cf226123d7cd62403e07e03686f%2Fdemoprefabs_endresult.gif?alt=media)

### 2) Export Your Prefab

Now, in order to use it in different **Projects** and to collaborate with others, let’s export our **Prefab**. This can be done by right-clicking the **Prefab** in the **Asset Manager** and selecting `Export Prefab`.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-04862e5741185637f04e86195686ec87244a75cf%2Fdemoprefabs_exportprefabs.gif?alt=media)

## 3. Using Prefabs to Build Complex Projects

The real power of **Prefabs** is that you can use them again and again in different contexts. Using the **Prefab** we have just created, let’s build a simple control panel. It should take only a few drag and drops to build this fairly generic dashboard:

![Dashboard with Map in the Background](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-a2e011ab2b50c96a91ede43abbaa93687c6c9c8d%2Fdemoprefabs_dashboardmapv2.png?alt=media)

This **Project** uses the **Assets** from the *Dashboard* folder of the provided files. After adding our map and taskbar backgrounds, we can drag our **Prefabs** from the **Asset Manager** to the **Scene**.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-152aea3c27412a365038ba9e6201327bee29102c%2Fdemoprefabs_addprefab2_cropped.gif?alt=media)

After adding all **Prefabs** to the **Scene** and placing them in their respective locations, add the appropriate icons for each of them from the **'Sequences'** folder.

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-1b8731ad687351b1889a57269d225305c10ee04c%2Fdemoprefabs_addsequence2_cropped.gif?alt=media)

| :warning: | After all is done, do not forget to initialize your **Prefabs**! |
| --------- | ---------------------------------------------------------------- |

![Prefab Initialization](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-75b630e16e7c1842a620b7188bd26dac0d655c05%2Fdemoprefabs_prefabinitialize.png?alt=media)

Finally, we add a slide-in animation for the taskbar.

![Current Group Structure](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-9e526ec42924e5f60cab12e82f905b2e201e347f%2Fdemoprefabs_currentstructure.png?alt=media)

![Slide-In Animation](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-ccc6466b3a1a45f02c2dd33bdd6a1351729c4639%2Fdemoprefabs_slideinanimation.png?alt=media)

To see it in action:

![](https://926825830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKQhJdUBr7YQzfIwmpAZ9%2Fuploads%2Fgit-blob-4e022b61a7359a8409fbb1a7675cb3b1a6376832%2Fdemoprefabs_finalv2.gif?alt=media)

:exclamation: Using our Prefabs, we managed to create a dashboard in mere minutes using **Incari Studio**. As your **Prefab** library grows, building complex projects for any need will only get quicker.