Incari Studio — Demo Projects: Prefabs 101 - How to Use One of Incari Studio’s Best New Features

The latest version of Incari Studio, launched July 5, has brought a number of new features and major improvements to Incari Studio. Arguably the most significant feature that came out with version 2022.1, Prefabs will completely change how Incari Studio is used and how HMI projects will be built in the future. Here’s how you can use this new feature.

What is a Prefab and why is it important? In Incari Studio, a Prefab is a reusable component that encompasses its own logic, design, and behavior independently from the rest of the project. Taking many different shapes, Prefabs can be transferred between projects. Thanks to Prefabs, developers can now easily create several objects with the same functionality that retain unique properties via overrides. This makes it significantly easier for users to build increasingly complex applications without repetitive logic or inconsistent components, saving them a lot of time and work.

Let’s explore how to use Prefabs. In this demo, we will be focusing on one of the most prominent components: buttons.

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 in Incari, so there is no need. Our button will have three states: ‘Resting’, ‘Hover’, and ‘Pressed’.

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:

a. Creating the Project

Open Incari Hub and create a project using the default parameters. After all is complete, you should be presented with the Incari Studio start screen.

b. Importing the Assets

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

c. Creating Image Sequences

One of the simplest ways of creating different states for an image is using Image Sequences. 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.

d. 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.

e. 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.

2) Building Your Prefab

a. 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. When the button is pressed, it will automatically scale down and up:

And lastly, when we click our button it will change the state of the icon, negate the corresponding variable, and output the new value. Which leaves us with this as the end result:

b. 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.

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:

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.

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. After all is done, do not forget to initialize your Prefabs! Finally, we add a slide-in animation for the taskbar.

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. For more details and additional content and demos, visit our online GitBook: https://docs.incari.com/incari-studio/demo-projects/prefabs-demo.

The agile-friendly workflow and modular architecture of Incari Studio supports the complete UI/UX creation process. Focused on team collaboration, it unifies the work of designers, developers, and suppliers on one platform while providing improved tools for logic coding, 3D animation, technology integration, and a lot more. Subscribe to Incari Studio here.