Controlling UI elements with scripts¶

Preparation¶

In UI Editor, create a Lua script to control UI elements by choosing + New client script.

UIprojct-lua

Fill in a name for the script and you can write codes in your specified editor, such as Visual Studio Code.

Loading UI elements¶

Load UI elements that you've created in UI Editor using the name of the UI project and the canvas.

loadUIelements

--Get the resource path of the UI component.
local uiPath = script:GetResourceUri("ygc://") 
-- Load UI elements using the project name and the canvas name.
local mainPanel = YaUIManager:CreateUIPanel(uiPath, "ProjectName", "MainCanvas") 
-- Set the UI elements to full-screen mode.
mainPanel:SetSize(YaUIManager.ScreenSize)

Getting UI elements on the canvas¶

Get the UI elements using their name in the UI project. Make sure the name in the code is identical to that in your UI project.

UIelementname

-- Get the UI element using its name in the UI project.
local button = mainPanel:GetButton("Button") 
local graph = mainPanel:GetGraph("Graphg")
local image = mainPanel:GetImage("Image")
local list = mainPanel:GetList("List")
local loader = mainPanel:GetLoader("Loader")
local slider = mainPanel:GetSlider("Slider")
local progressBar = mainPalen:GetProgressBar("Progress")
local textField = mainPanel:GetTextField("Text")
local textInput = mainPanel:GetTextInput("Text")

Binding a click event to a button¶

local function ButtonOnClickEvent()
    -- Write your code here.
    print("The button is clicked on.")
end

button.OnClick:AddListener0(ButtonOnClickEvent)

Drawing and refreshing a list¶

local list = mainPanel:GetList("List")
list.ItemRenderer = OnRenderList
-- Provide the number of list items.
list.NumItems = 10 

-- Render the list using the index of the list and the canvas.
local function OnRenderList(index, canvas)

end

-- Refresh the list.
list.ItemRenderer = OnRenderList
list.NumItems = 10

Drawing and refreshing a virtual list¶

local list = mainPanel:GetList("List")
list.DefaultItem = "ui://PackageName/CanvasName"
list:SetVirtual()
list.ItemRenderer = OnRenderList
-- Provide the number of list items.
list.NumItems = 10 

-- Render the list using the index of the list and the canvas.
local function OnRenderList(index, component)

end

-- Refresh the virtual list.
list:RefreshVirtualList(10)

Using Loader¶

local loader = mainPanel:GetLoader("Loader")
loader.Url = "ui://PackageName/CanvasName"
-- Get the canvas that you configured in the loader.
local canvas = loader:GetLoaderComponent()

Using Text¶

local textField = mainPanel:GetTextField("Text")
-- Set the font size of the text to 64.
textField.FontSize = 64    
-- Make the text bold.
textField.Bold = true       
-- Make the text italic.
textField.Italic = true   
-- Apply the above settings.
textField:ApplyFormat() 

-- The text inside the text box displays the typewriter effect at a speed of 1 character per second.
textField:ShowTypeWritterText("This is a test for the Text UI element.", 1)

Using TextInput¶

local textInput = mainPanel:GetTextInput("Text")
textInput.SingleLine = true

local function SubmitEvent()
    -- Write your code here.
end

-- The OnSubmit works when the player presses the enter button. The SingleLine property must be set to true.
textInput.OnSubmit:AddListener0(SubmitEvent)