Table of Contents

Conversation

Finished product

UI Design

Script

local next_button = nil
local previous_button = nil
local text_element = nil
local text_process = nil
local uiid = nil
local first_content_process = nil
local number_of_content = nil
local content_1 = nil
local content_2 = nil
local content_3 = nil
 
local click = 0
 
function button(e)
    if e.uielement == next_button then
        click = click + 1
    elseif e.uielement == previous_button then
        click = click - 1
    end
 
    if click < 1 then
        click = 1
    elseif click > number_of_content then
        click = number_of_content
    end
 
    Customui:setText(e.eventobjid, uiid, text_process, first_content_process .. " (".. click.. "/".. number_of_content .. ")")
 
    if click == 1 then
        Customui:setText(e.eventobjid, uiid, text_element, content_1)
    elseif click == 2 then
        Customui:setText(e.eventobjid, uiid, text_element, content_2)
    elseif click == 3 then
        Customui:setText(e.eventobjid, uiid, text_element, content_3)
    end
end
 
ScriptSupportEvent:registerEvent("UI.Button.Click", button)

Explanation

Variables

click variable: is initialized to 0 and is used to keep track of the current position or index of the content being displayed.

Handle when clicked on next button or previous button

if e.uielement == next_button then
    click = click + 1
elseif e.uielement == previous_button then
    click = click - 1
end

Ensuring click Stays Within Valid Bounds

    if click < 1 then
        click = 1
    elseif click > number_of_content then
        click = number_of_content
    end

Updating the process

  Customui:setText(e.eventobjid, uiid, text_process, first_content_process .. " (".. click.. "/".. number_of_content .. ")")

When the player click on the next or previous button, the text's going to update

Displaying the Corresponding Content

if click == 1 then
    Customui:setText(e.eventobjid, uiid, text_element, content_1)
elseif click == 2 then
    Customui:setText(e.eventobjid, uiid, text_element, content_2)
elseif click == 3 then
    Customui:setText(e.eventobjid, uiid, text_element, content_3)
end

This ensures that the correct content is displayed based on the current value of click.

Registering the Button Click Event

ScriptSupportEvent:registerEvent("UI.Button.Click", button)

This means that whenever a button in the UI is clicked, the button function will be triggered, allowing it to process the event and update the UI accordingly.


If you have any questions about Developer Tools, feel free to join our official discord server Mini World Global DEV discord