# Logic Editor

**Logic** in **Incari** is what allows us to take our **2D/3D** **Assets** and turn them into fully interactive *User* *Interfaces*. Traditionally, building this kind of complex system was only achievable by writing *a lot* of code. However, by utilizing **Incari's** powerful visual scripting tools, we can build these systems without writing a single line! This section introduces you to some of the core concepts and terminologies of **Incari's** **Logic Editor**.

## 1 - Logic Editor Window

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-cf78e27af57fc5f7034b6255bf390b925244b8f3%2FlogicEditorWindow.PNG?alt=media)

**Logic Editor** - The main window which contains all things **Logic**-related. It is compartmentalized into several different sections discussed below.

## 2 - Toolbar

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-a75fca4de46ebe06fbc4c74583448ca7b707b413%2Ftoolbar.PNG?alt=media)

The **Toolbar** shows a list of icons that are used to visualize certain features in the **Logic Graph**. Definitions of the icons are as follows:

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-29fdc4cd52bab4263fd98de72fc67f6bd3c2a33d%2FimportBlueprint.PNG?alt=media) The **Import blueprint** icon allows you to import a **Logic Graph** saved on your computer into the **Logic Editor**.

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-cf459b169aef1c02d2dfb2d087f446ad37238f02%2Fgroup.PNG?alt=media) The **Group** icon clusters **Logic Graphs** into distinct groupings. See a usage example below:

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-372394fd353b0ff4695443c1360e63c42cbf7330%2Fgroup%20\(3\)%20\(4\)%20\(4\)%20\(4\)%20\(1\).gif?alt=media)

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-f7a06a16950d66275c843d9c42b5e9d8e50ff4bd%2FhighlightUnhighlight.PNG?alt=media) The **Highlight** icon applies a distinct color to sections of a **Logic Graph** that are connected together. **Remove highlight** reverses the action performed by clicking the **Highlight** icon. See a usage example below:

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-1cbf849383f0415981f42812691fb0be684c2ff1%2FhighlightUnhighlight.gif?alt=media)

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-08718d0f21a8be50be079262d083e33101430428%2FalignVerticalHorizontal.PNG?alt=media) The **Align horizontally** and **Align vertically** icons will align a **Node Graph** horizontally and vertically, respectively, in the **Logic Editor**. See a usage example below:

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-37c1f847fb71b09be7038ec7c7886f9f97b2b6b7%2FalignHorizontally.gif?alt=media)

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-43d1ada3ce7bf2d97c207911770b7ed6cb41b764%2FalignVertically.gif?alt=media)

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-8a317311ae29ed3c6fc16e92ff31be3e06d1f7e6%2Farrange.PNG?alt=media) The **Arrange horizontally** and **Arrange vertically** icons will arrange a **Node Graph** horizontally and vertically, respectively, in the **Logic Editor**. See a usage example below:

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-f4e85b8cb31cce6bc2d3b885d35169b88ecad818%2FarrangeHorizontally.gif?alt=media)

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-caddfb0bb4601864d7fe4704f00b369b6aacc1de%2FarrangeVertically.gif?alt=media)

## 3 - Top Panel

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-7a0f2a9f93ea843211f1f3898c41d46dd7add909%2FtopPanelImage.PNG?alt=media)

The top panel represents **Logic Graphs** that are implemented for different **Incari** items such as the current opened **Project**, the selected **Scene** in the **Project Outliner**, and **Functions** added to the **Logic Editor**. Each **Logic Graph** can be accessed by using the tabs on the top panel.

## 4 - Left Panel

The left panel contains **Nodes** that can be added to the **Logic Editor** and is divided into five sections. These are the **Explorer**, **Toolbox**, **Events**, **Functions**, and **Variables**.

Each section is described below:

{% tabs %}
{% tab title="Explorer" %}
![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-db21b34c52e3ca2b4c0886fcf619dcf248c9142b%2FleftPanelExplorer.PNG?alt=media)

All **Nodes** and **Groups** that are added to the **Logic Graph** will be listed in this section. When an item is picked in this section, the corresponding **Node** is selected in the **Logic Graph**.
{% endtab %}

{% tab title="Toolbox" %}
![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-73efe136721fa157e0cfd395f926a9eaaef2e277%2FleftPanelToolbox.PNG?alt=media)

The **Toolbox** contains all of the individual tools you will need to create your **Logic**. The function and purpose of all **Nodes** are covered in depth in the **Toolbox** section and it is *highly* recommended that you refer to it to understand how each **Node** functions. In short, the **Toolbox** contains a categorized list of all **Nodes** available at your disposal, which can be added to your **Logic** by double-clicking or dragging and dropping an item into your **Logic Graph**.
{% endtab %}

{% tab title="Events" %}
![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-5b6ddf357561af0c291e8ad85e5ad2412253d6a1%2FleftPanelEvents.PNG?alt=media)

An **Event** **Node** can be added to the **Events** tab by clicking on the add icon ![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(16\).PNG?alt=media) located at the top of the panel, then the desired name for the **Event Node** is inserted. You can add the **Event Node** to your **Logic** by dragging and dropping it into your **Logic Graph**. The illustration below describes briefly how **Events** are created in the **Logic Editor**. For a detailed introduction to **Events**, please see [toolbox/events](https://docs.incari.com/incari-studio/2021.3/toolbox/events).

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-4e8d4f6be94dff3faea2a121c8037e051165e2e5%2FaddEvent.gif?alt=media)
{% endtab %}

{% tab title="Functions" %}
![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-0ecd5431468c471e19bccaddc83d10f33c65db2b%2FleftPanelFunctions.PNG?alt=media)

Custom-built **Node Graphs** can be packaged as a **Function** and added to your **Scene** **Logic** in a modular manner. To add a **Function** to the **Functions** tab, click on the add icon ![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\).PNG?alt=media) located at the top of the panel and type in the desired name of the **Function**. The illustration below describes briefly how **Functions** are created in the **Logic** **Editor**. For a detailed discussion of **Functions**, please see [toolbox/functions](https://docs.incari.com/incari-studio/2021.3/toolbox/functions).

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-5ca4891f7f2f4b91731ff8a5fe0e353588a55a61%2FaddFunctions.gif?alt=media)
{% endtab %}

{% tab title="Variables" %}
![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-8c25d03dfb499304d6a356370fbed17612c8db06%2FleftPanelVariables.PNG?alt=media)

The **Variables** tab allows us to add **Variables** to the **Logic Editor**. To add a **Variable** to your **Logic Graph**, click on the add icon ![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\).PNG?alt=media) located at the top of the panel and type in the desired **Variable** name. The illustration below describes briefly how **Variables** are created in the **Logic Editor**. For a detailed discussion of **Variables**, please see [toolbox/variables](https://docs.incari.com/incari-studio/2021.3/toolbox/events/variables).

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-83c289164ba8e4c7304ff0d6d36fad726861ede6%2FaddVariables.gif?alt=media)
{% endtab %}
{% endtabs %}

## 5 - The Logic Graph / Node Graph

This is the most important section of the **Logic Editor**. If the **Nodes** and **Variables** are the paints and materials at your disposal, then the **Logic Graph** is the canvas. This is where we build our systems from the ground up and where you will spend most of your time while using **Incari**.

Fundamentally, it is comprised of a combination of two entities: **Nodes** and **Connections**.

![Nodes are linked together by connections to define logic and execution order.](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-a1aa3f19205dc2586561db5d1e2a71a1b44f4097%2FLogicNodeGraph.PNG?alt=media)

### **Nodes**

**Nodes** are components that each have a specific, singular function. The majority of **Nodes** evaluate data values based on input parameters, but they can also represent **Variables**, **Events**, and **Objects**.

#### Sockets

![Nodes have a number of input/output sockets.](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-1049b40260a39f319e69d7018eb547dc90acdf79%2Fsockets.PNG?alt=media)

**Sockets** are like the ports on an electronic device. Along with **Connections**, they allow us to link **Nodes** to each other. In **Incari**, **Sockets** are either:

* **Input** (receiving an instruction or data value). **Sockets** on the left-hand side of a **Node** are **Input Sockets.**
* **Output** (sending an instruction or data value). **Sockets** on the right-hand side of a **Node** are **Output Sockets**.

Beyond that, we have **Pulse** and **Data Sockets** denoted by white triangles (►) and colored squares (■), respectively. For example, when we refer to an "Input Pulse Socket", we are normally referring to the white triangle in the top-left-hand side of a **Node**.

The concept of **Sockets** makes much more sense in the context of **Connections**.

#### **Connections**

![Nodes are linked to each other via Connections.](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-160a8f6204b7a29ddcfd74650a9687db322c87a0%2Fconnections%20\(1\).png?alt=media)

**Connections** are the "wires" that link our components together. This is how we pass data between **Nodes** and how we determine the execution order of our **Logic**. **Connections** come in two categories and are related to the type of **Socket** they are plugged into. The two categories are **Pulse** and **Data**.

#### Pulse

These **Connections** do not carry any data between **Nodes**. What they *do* is tell **Nodes** that it is time for them to execute. Once a **Node** has finished its execution and its purpose has been fulfilled, the next **Node** connected via the **Pulse Connection** will then begin *its* task. **Pulse Connections** are represented by a white "wire" linking two **Pulse Sockets**, represented by white triangles (►). Multiple **Connections** can be plugged into a single **Pulse Input Socket**, however only one **Connection** can come out of a **Pulse Output Socket**. **Pulse Connections** are also referred to as **Pulses**.

#### Data

These **Connections** pass data values between **Nodes**. We do this by connecting the **Data Output Socket** of one **Node** into a **Data Input Socket** of another **Node**. Both the input and output **Sockets** must be of the same **Data Type**. **Data Sockets** are represented by a colored square (⬛), the color of which corresponds to the **Data Type**. Conversely to **Pulse Connections**, **Data Input Sockets** can take only one **Input Connection**, whereas **Data Output Sockets** can have multiple **Output Connections**. Unlike **Pulse Connections**, **Data Connections** do not initiate the execution of a **Node**.

## 6 & 7 - Node Attribute Editor

![The Node Attribute Editor Node](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-042e64df8704730f57f0e9a8e0aafb2136985504%2FrangeMapperNodeImg.PNG?alt=media)

![The Node Attribute Editor Inputs](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-bb35d55b39a2c248c1b020fe46183cc099f51cbd%2FrangeMapperInputsImg.PNG?alt=media)

![The Node Attribute Editor Outputs](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-10b9e40ceea01b1f25c4668a0f54a1844738daa1%2FrangeMapperOutputsImg.PNG?alt=media)

The **Node Attribute Editor** (referred to simply as **Editor** from here on) is similar to the **Attribute Editor**, except rather than adjusting the **Attributes** of **Objects**, we can adjust the **Attributes** of **Nodes**. **Node Attributes** are specific to that particular **Node** and are documented in their corresponding entry in the **Toolbox** section. Oftentimes, **Node** **Attributes** are simply an alternative to using **Input Connections** and can define a default value if there is no **Connection** attached to that particular **Input Socket**. There are exceptions, however, where **Attributes** can be set only in the **Editor** and there is no equivalent **Socket** available, which are discussed below in the **Node-Specific Attributes** section.

### General Attributes

Coming under the "Node" heading of the **Editor**, these **Attributes** are available on nearly all **Nodes** and can only be set in the **Editor**.

All **Nodes** have the following **Attributes**:

* `Name` - The name of the **Node**. This isn't editable unless it is a **Function**.
* `Type` - The type of **Node**. This isn't editable and will often be the same as the name, unless the **Node** represents something which the user defines, like **Functions**, **Variables**, and **Objects**.
* `Enabled` - Allows the entire **Node** to be ignored by enabling/disabling it. This is useful when you want to test and debug a specific part of your **Logic**, as you can disable entire **Node Trees** temporarily. All subsequent **Nodes** linked via **Pulse Connections** *will not* be executed.

Most **Nodes** also have an additional **Attribute**:

* `Pulse Pass Through` - Similar to the `Enabled` **Attribute** above, it disables the evaluation of a **Node**. The difference with this option, however, is that subsequent **Nodes** linked via **Pulse Connections** *will* be executed. This is useful when you only want to disable part of a **Node Tree**, rather than the entire thing.

### Node-Specific Attributes

As stated above, most **Node Attributes** are an alternative to **Data Input Connections** and allow us to set default values, in the absence of such a **Connection**. There are cases, though, where **Attributes** can only be set in the **Editor**, which modifies the way that the **Node** functions.

#### Data Types

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-b63f47799e1da13e18d61b0d8a6770ecdb5bf86b%2Fdatatypedropdown.gif?alt=media)

Some **Nodes** work with different **Data Types**. However, these need to be explicitly defined in the **Editor**, so that the **Node** knows which **Type** it will receive (**Input**) and/or the **Type** of data it will return (**Output**). Where multiple **Data Types** are available, there will be a drop-down Menu in the **Editor**. Changing the **Type** will also change the color of the corresponding **Socket**.

#### Linked Objects

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-3d417c59f611d532944984d6b0d0a2b183925e91%2FaddObjectToAttribute.gif?alt=media)

Some **Node Attributes** correspond to something outside of the **Logic Editor**, such as a **Scene**, **Screen**, **Object**, **Text Object**, or **File**. In this case, you will see a small square, which will either have a thumbnail, related to that **Type** of **File** or **Object**, or the text "drag here". To assign something to the **Attribute**, simply drag and drop it onto the square.

#### Adding Removing Sockets

![](https://1582035224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-3848250649%2Fuploads%2Fgit-blob-de4ce22fd549fddd02747c86fb48b356857d1df5%2FaddRemoveSockets.gif?alt=media)

There are a few **Nodes** in **Incari** that allow you to customize the number of **Input**/**Output Sockets**. The purpose for this is very specific to that particular **Node**, but the process of adding/removing parameters is the same.

By clicking the plus button (**+**) you can add additional elements, which will be added to the bottom of the list.

By clicking the cross button (**x**) you can remove elements. If you click the cross on the list *header*, it will remove *all* of the elements, whereas if you click the cross on a list *item*, you only remove that *single* element.

You can also rearrange the order of the elements by clicking and dragging elements using the rearrange button (**⠿**).