# GUI

A *GUI*, or graphical user interface, uses graphics to let a user interact with an interface. In **Incari**, there are several simple features which are available to create and edit in **Scene2Ds**. They are:

* [**Button**](#button)
* [**Dropdown**](#dropdown)
* [**Slider**](#slider)
* [**Text**](#text)
* [**Text Area**](#text-area)
* [**Toggle**](#toggle)

## Button

The **Button** **GUI** **Object** is a simple icon to attach **Logic** to. Its text, placement, and size can be altered in the **Attribute Editor**.

![Button.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-1b59a8140e413426b5f5eaa44b6f8d7fa1c24b1e%2Fbutton2d.png?alt=media)

![Button with Text.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-880aed087f7143fd6cd17b929b592c029c085030%2Fbuttonafter.png?alt=media)

## Dropdown

The **Dropdown** is a **GUI** **2D Object** that allows the user to create a *dropdown menu*. The options in the menu, together with the colors and size, can be customized in the **Attributes**.

The following is a simple example of a **Dropdown** with three options:

![Dropdown.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-3d216354d2bf26bd1a88e765cdaf13b5f1d3cb07%2Fgui-dropdown1.png?alt=media)

The `Options` **Attribute** defines the options in the **Dropdown**:

![Options Attributes.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-e454dfdb7f38e6853cbd6f3ac0e70aeb591b0073%2Fgui-dropdown-options.png?alt=media)

Finally, this **Dropdown** looks like this when the **Project** is run:

![Dropdown example.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-2e25f734715ca9fe8a9c7168766b5df710dcaeb2%2Fdropdown-example.gif?alt=media)

## Slider

The **Slider** is a **GUI** **2D Object** that allows the user to create a customizable slider selector. The customization is done through the **Attributes**.

![Slider.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-613244123ab190d6cfbabd8df484c0ce8146e3f8%2Fgui-slider1.png?alt=media)

The **Slider Attributes** offer the user options to customize the **Slider**:

![Slider Attributes.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-097eeac51e519b36f4d4889ae5eb40d24f722356%2Fgui-slider-attri.png?alt=media)

Finally, the **Slider** works like this when the **Project** is run:

![Slider example.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-d461615798b61df96679d0d2a1d1a3c48aca91e8%2Fslider-example.gif?alt=media)

## Text

The **Text** **Object** allows the user to add text to their **Project**. It can be completely customized in the **Text Attributes**.

![Text.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-8e37207a8fa13a208b8c94d8bbd697e8064beae3%2F2dgui-text.png?alt=media)

## Text Area

The **Text Area** **Object** allows the user to add text with a background to their **Project**. It can be completely customized in the **Text** and **Text Area Attributes**.

![Text Area.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-a0c286322b60d0fe4148ee973444368b237d6565%2F2dgui-textarea1.png?alt=media)

![Text Area Attributes.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-3459c4066cb1715b7abf0ce78646becaf8000cc2%2F2dgui-textarea-attri.png?alt=media)

## Toggle

The **Toggle** **Object** is a **2D GUI Object** that has two states: checked or unchecked. Its initial state and colors can be customized in the **Attributes**.

![Toggle.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-74e70df2cb6245092a6556d196f7e2e054a2d000%2F2dgui-toggle.png?alt=media)

![Toggle example.](https://4267723012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-32da3a675bb4cbe0604173fa8a5223ffe44008a1%2Ftoggle-example.gif?alt=media)