# 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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-29fdc4cd52bab4263fd98de72fc67f6bd3c2a33d%2FimportBlueprint.PNG?alt=media) **Import blueprint** icon allows you to import a **Logic Graph** saved on your computer into the **Logic Editor**.

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

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

![](https://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-f7a06a16950d66275c843d9c42b5e9d8e50ff4bd%2FhighlightUnhighlight.PNG?alt=media) **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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-1cbf849383f0415981f42812691fb0be684c2ff1%2FhighlightUnhighlight.gif?alt=media)

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

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

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

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

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

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

## 3 - Top Panel

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

The *top panel* represents **Logic Graph**s 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**. The panel is divided into five sections, and these are the **Explorer**, **Toolbox**, **Events**, **Functions** and **Variables**.

Each section is described below:

{% tabs %}
{% tab title="Explorer" %}
![](https://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(36\).PNG?alt=media) located at the top of the panel and then the desired name for the **Event Node** inserted. You can add the **Event Node** to your logic by dragging and dropping it into your **Logic Graph**. The illustrations 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/2.0/toolbox/events).

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

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

Custom-built **Node Graph**s 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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(48\).PNG?alt=media) located at the top of the panel and type in the desired name of the function. The illustrations below describes briefly how **Functions** are created in the **Logic** **Editor**. For a detailed discussion of **Functions**, please see [toolbox/functions](https://github.com/cgi-studio-gmbh/incari-doc/tree/66656c2442958de634bc73f77b533a03f83df0fb/toolbox/functions/README.md).

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

{% tab title="Variables" %}
![](https://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-55a9686264982a9e5bf290bb46e76f517453c193%2FplusIcon%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(4\)%20\(12\).PNG?alt=media) located at the top of the panel and type in the desired variable name. The illustrations below describes briefly how **Variables** are created in the **Logic** **Editor**. For a detailed discussion of **Variables**, please see [toolbox/variables](https://github.com/cgi-studio-gmbh/incari-doc/tree/66656c2442958de634bc73f77b533a03f83df0fb/toolbox/variables/README.md).

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

## 5 - The Logic Graph / Node Graph

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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-a1aa3f19205dc2586561db5d1e2a71a1b44f4097%2FLogicNodeGraph.PNG?alt=media)

### **Nodes**

**Nodes** are components which 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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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 coloured 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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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 do their thing. 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 coloured square (⬛), the colour 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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-042e64df8704730f57f0e9a8e0aafb2136985504%2FrangeMapperNodeImg.PNG?alt=media)

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

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

The **Node Attribute Editor** (referred to simply as **Editor** hereinafter) 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. Often, **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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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 colour of the corresponding **Socket**.

#### Linked Objects

![](https://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%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://879976444-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MIspkFTPkuGkv4UgQGs-41739140%2Fuploads%2Fgit-blob-de4ce22fd549fddd02747c86fb48b356857d1df5%2FaddRemoveSockets.gif?alt=media)

There are a few **Nodes** in Incari that allow you to customise 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 (**⠿**).