====== Loading UI ======

==== Created UI ====
Step 1: You need to remember to change the width of the process picture to 0
{{:developer_center:developer_editor:loading_ui_2.png?nolink&|}}

Step 2: Also, you need to remember the first width of the process picture
{{:developer_center:developer_editor:loading_ui_1.png?nolink&|}}

====Script====
	local loading_picture = nil
	local ratio = nil
	local the_first_width_value = nil
	-- Define the game function to update the UI
	function game(obj)
    	repeat
        -- Set the size of the UI element
        Customui:setSize(obj.eventobjid, loading_picture[1], loading_picture[2], width_value, 86)
	-- Increment the width value by a random number between 0 and 5
        width_value = width_value + math.random(6)
        --Calculate the percentage of the current width relative to the initial width
        local percentage = (width_value / the_first_width_value) * 100
        -- Set the text with the calculated percentage (formatted with no decimal places)
        Customui:setText(obj.eventobjid, ratio[1], ratio[2], string.format("%.0f%%", percentage))
        -- Wait for 0.01 seconds before the next iteration
        Trigger:wait(0.01)
        -- If the width value exceeds the initial width, set it to the initial width
        if width_value > the_first_width_value then
            width_value = the_first_width_value
        end
    	-- Repeat until the width value reaches the initial width
    	until width_value == the_first_width_value
	end
	-- Register the game function to be triggered when the UI is shown
	ScriptSupportEvent:registerEvent("UI.Show", game)
====Explanation====
===Variable Initialization===
	local loading_picture = nil
	local ratio = nil
	local the_first_width_value = nil
	loading_picture = nil -- Replace with your picture IDs
	ratio = nil -- Replace with your ratio IDs
These lines initialize some variables:
  * loading_picture: Holds identifiers for UI elements related to the loading picture.
  * ratio: Holds identifiers for UI elements related to displaying the percentage.
  * the_first_width_value: Stores the initial width value of the loading bar.
===Game Function===
	function game(obj)
    		repeat
        	-- Set the size of the UI element
        Customui:setSize(obj.eventobjid, loading_picture[1], loading_picture[2], width_value, 86)

  * game(obj): A function that runs when a specific event (UI showing) occurs.
  * repeat: Starts a loop that will run until the specified condition is met.
  * Customui:setSize: Sets the size of the UI element (loading_picture). The parameters are:
  * obj.eventobjid: The ID of the object triggering the event.
  * loading_picture[1]: The first identifier for the loading picture.
  * loading_picture[2]: The second identifier for the loading picture.
  * width_value: The current width of the loading bar.
  * 86: A fixed height for the loading bar.

        	-- Increment the width value by a random number between 0 and 5
        width_value = width_value + math.random(6)

  * math.random(6): Generates a random number between 0 and 5 and adds it to width_value.

        	-- Calculate the percentage of the current width relative to the initial width
        local percentage = (width_value / the_first_width_value) * 100
        -- Set the text with the calculated percentage (formatted with no decimal places)
        Customui:setText(obj.eventobjid, ratio[1], ratio[2], string.format("%.0f%%", percentage))

  * Calculates the percentage that width_value represents of the_first_width_value.
  * Customui:setText: Sets the text of the UI element (ratio) to display the percentage.
  * obj.eventobjid: The ID of the object triggering the event.
  * ratio[1]: The first identifier for the ratio text.
  * ratio[2]: The second identifier for the ratio text.

        	-- Wait for 0.01 seconds before the next iteration
        Trigger:wait(0.01)
        -- If the width value exceeds the initial width, set it to the initial width
        if width_value > the_first_width_value then
            width_value = the_first_width_value
        end
    -- Repeat until the width value reaches the initial width
    until width_value == the_first_width_value
	end

  * Trigger:wait(0.01): Pauses the loop for 0.01 seconds.
  * Checks if width_value exceeds the_first_width_value and if so, resets width_value to the_first_width_value.
  * The until loop condition ensures the loop runs until width_value equals the_first_width_value.
  * Registering the Game Function

	ScriptSupportEvent:registerEvent("UI.Show", game)
ScriptSupportEvent:registerEvent("UI.Show", game): Registers the game function to be called when the UI.Show event occurs.

====Summary====
This script initializes variables and defines a function (game) that simulates a loading bar increasing over time by updating the width and percentage text of UI elements. The function runs in a loop, increasing the width incrementally until it reaches a specified initial width. The function is triggered by the UI.Show event.