Basic UI Components

# Course Introduction

You can compose UI entities in various formats by combining components. In this course, let's learn about the basic components that are often used.

##### Reference Guide

  * [UI Editor](/docs?postId=120%7B%22target%22:%22_blank%22%7D)
  * [Creating UI](/docs?postId=64%7B%22target%22:%22_blank%22%7D)
  * [Controlling UI Entities](/docs?postId=1154%7B%22target%22:%22_blank%22%7D)



# UITransformComponent

[UITransformComponent](/apiReference/Components/UITransformComponent) is a basic component that UI entities must contain. It is quite similar to TransformComponent, but the difference is that this operates in screen coordinates. The main properties are as follows:

[png](1657174537010c416d38c6dbd4357a590984d44bcb9ac)

[{"Numbers":"\u0001","Items":"Coordinates","Description":"You set the location of UI. Required Properties vary depending on the Anchor Presets setting on the left.You can find more details in the Anchor Presets section of [World Coordinates and Screen Coordinates](\/docs\/?postId=688)."},{"Numbers":"\u0001","Items":"UIMode","Description":"If UI Entity\u0001 is below the UI in Hierarchy, it is fixed with Screen. If it is below maps, it is fixed with World."}]

# Output

#### SpriteGUIRendererComponent

[SpriteGUIRendererComponent](/apiReference/Components/SpriteGUIRendererComponent) is a component that shows image resources in the UI. This component allows you to set it to show 'what' in 'which form' in the UI. The main properties are as follows:

[png](1744880492943da5f0130b3564b8fb38d8921f50fe423)

[{"Numbers":"\u0001","Items":"ImageRUID","Description":"You set ImageRUID to show on the screen."},{"Numbers":"\u0001","Items":"Type","Description":"A method of displaying images. Select from Simple, Sliced, Tiled, or Filled."},{"Numbers":"\u0001","Items":"Select if you want to use SortingLayer and OrderInLayer. Only activated when the SpriteGUIRendererComponent is added to an entity under World - maps.","Description":"nan"}]

You can also set the way to show the image you have set in ImageRUID through other properties.

#### TextComponent

[TextComponent](/apiReference/Components/TextComponent) is a component that shows text in the UI. When you use this with SpriteGUIRendererComponent, you should draw TextComponent above SpriteGUIRendererComponent. If the UI Entity contains TextComponent, you can double-click the entity and edit text easily. The main properties are as follows:

[png](168671067460393c17d7821884fa9a30c00141833b74b)

[{"Numbers":"\u0001","Items":"Font","Description":"You set the font to show.You can select from Default, Maple Bazzi, and Football."},{"Numbers":"\u0001","Items":"FontColor","Description":"You set the font color and transparency."},{"Numbers":"\u0001","Items":"FontSize","Description":"You decide the font size."},{"Numbers":"\u0001","Items":"Text","Description":"You write text to use."}]

# Input

#### ButtonComponent

[ButtonComponent](/apiReference/Components/ButtonComponent) is a representative component to use when receiving a user's input. You can receive the input information 'a user clicked the button'. The main properties are as follows:

[png](1657592785058cf83097552544842a3b8a24257de7ce5)

[{"Numbers":"\u0001","Items":"KeyCode","Description":"When pressing the button, it operates as if the specified keyCode was pressed."},{"Numbers":"\u0001","Items":"Transition","Description":"You set the conversion method for button status. The properties you should set below will differ depending on the conversion method. ColorTint: Color Conversion SpriteSwap: Sprite Replacement"}]

ButtonComponent can change the status of the button using [ButtonState](/apiReference/Enums/ButtonState%7B%22target%22:%22_blank%22%7D).

  * Normal, Hover, Pressed, Released, Clicked



ButtonComponent does not have an output function. It is used with SpriteGUIComponent or TextComponent to inform the user that the button has been pressed. ButtonComponent only sends the information 'it was input,' so you need to define that you will process 'what' and 'how' after the button is pressed in Scripts. The general way is to detect the button input through Event and then write a logic.

The Events usually used are as follows:

  * [ButtonClickEvent](/apiReference/Events/ButtonClickEvent%7B%22target%22:%22_blank%22%7D): This event occurs when the button is pressed.
  * [ButtonPressedEvent](/apiReference/Events/ButtonPressedEvent%7B%22target%22:%22_blank%22%7D): This event occurs while the button is pressed.
  * [ButtonStateChangeEvent](/apiReference/Events/ButtonStateChangeEvent%7B%22target%22:%22_blank%22%7D): This event occurs when the button's status is changed.



#### TextInputComponent

[TextInputComponent](/apiReference/Components/TextInputComponent) is a component that can receive text input. The main properties are as follows:

[png](168957179254024254818dac64c37a05886983c29e0dc)

[{"Numbers":"\u0001","Items":"AutoClear","Description":"If it is True, it automatically initializes the input field after text input."},{"Numbers":"\u0001","Items":"ContentType","Description":"It specifies the text type to input.  Standard: Allows all inputs. Autocorrected: Allows all inputs, and automatic modification is made in the platform with autocorrect. IntegerNumber: You can input numbers only. DecimalNumber: You can input numbers and one decimal point only. Alphanumeric: You can input A-Z, a-z, and 0-9. Name: Capitalize the first letter. EmailAddress: You can input English and number strings, including one @ symbol. You cannot enter consecutive periods (.). Password: You can input all characters, and they are shown with an asterisk (asterisk). Pin : You can input numbers only, and they are shown with an asterisk (asterisk). Custom: Users can set up the types directly, such as Line Type, Input Type, Keyboard Type, and String Verification."},{"Numbers":"\u0001","Items":"LineType","Description":"SingleLine : Enter in a single line. MultiLineSubmit : You can enter multiple lines, and it stops when the Enter is input. MultiLineNewline : You can enter multiple lines, and the line changes when the Enter is input."}]

TextInputComponent only receives input, so to show what is input, TextComponent is required. TextInputComponent and TextComponent are generally used together. You need to define how to process the input text through TextInputComponent in the script. TextInputComponent also detects text input through Event and then writes a logic.

The Events usually used are as follows:

  * [TextInputEndEditEvent](/apiReference?postId=444%7B%22target%22:%22_blank%22%7D): This event occurs once the input is complete. It is used when it receives and processes a complete sentence or a word.
  * [TextInputValueChangeEvent](/apiReference?postId=406%7B%22target%22:%22_blank%22%7D): This event occurs when the input value is changed. It detects and processes each moment whenever input is made.