Scribd
Upload
26 views8 pages

Game Rooms UI Implementation Guide

The document outlines the implementation of a graphical user interface (GUI) for a game room system using a Lua script. It includes functions for creating and managing windows, tabs, and item interactions, allowing players to search for and give items within the game. The script also handles animations and event registrations for user interactions, such as clicking buttons and entering text in input fields.

Uploaded by

rgameplay171
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views8 pages

Game Rooms UI Implementation Guide

The document outlines the implementation of a graphical user interface (GUI) for a game room system using a Lua script. It includes functions for creating and managing windows, tabs, and item interactions, allowing players to search for and give items within the game. The script also handles animations and event registrations for user interactions, such as clicking buttons and entering text in input fields.

Uploaded by

rgameplay171
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

local function isValidPlayer(player)

return player and [Link]


end

function RoomsUI()
local dialog = GUIManager:getWindowByName("GameRoomsDialog")
local currentTab = currentTab or "Item"
if dialog then
dialog:SetVisible(not dialog:IsVisible())
return
end
dialog = GUIManager:createGUIWindow([Link], "GameRoomsDialog")
if not dialog then return end
dialog:SetWidth({0, 600})
dialog:SetHeight({0, 500})
dialog:SetBackgroundColor({0.15, 0.15, 0.15, 0.95})
dialog:SetHorizontalAlignment([Link])
dialog:SetVerticalAlignment([Link])
dialog:SetTouchable(true)
dialog:SetProperty("ClipChild", "true")

local titleBar = GUIManager:createGUIWindow([Link], "TitleBar")


if not titleBar then return end
titleBar:SetWidth({1, 0})
titleBar:SetHeight({0, 50})
titleBar:SetBackgroundColor({0.1, 0.1, 0.3, 1})
titleBar:SetTouchable(true)
titleBar:SetProperty("ClipChild", "true")
dialog:AddChildWindow(titleBar)

local title = GUIManager:createGUIWindow([Link], "Title")


if not title then return end
title:SetText("GAMEROOMS")
title:SetTextColor({0.8, 0.8, 1, 1})
title:SetWidth({1, -20})
title:SetHeight({1, -10})
title:SetTextHorzAlign([Link])
title:SetBordered(true)
title:SetProperty("Font", "Arial")
titleBar:AddChildWindow(title)
titleBar:registerEvent([Link], function()
dialog:SetVisible(false)
end)

local tabContainer = GUIManager:createGUIWindow([Link], "TabContainer")


if not tabContainer then return end
tabContainer:SetWidth({0, 150})
tabContainer:SetHeight({1, -50})
tabContainer:SetYPosition({0, 50})
tabContainer:SetBackgroundColor({0.2, 0.2, 0.2, 1})
tabContainer:SetProperty("ClipChild", "true")
dialog:AddChildWindow(tabContainer)

local contentContainer = GUIManager:createGUIWindow([Link],


"ContentContainer")
if not contentContainer then return end
contentContainer:SetWidth({0, 450})
contentContainer:SetHeight({1, -50})
contentContainer:SetXPosition({0, 150})
contentContainer:SetYPosition({0, 50})
contentContainer:SetBackgroundColor({0.15, 0.15, 0.15, 0.95})
contentContainer:SetProperty("ClipChild", "true")
dialog:AddChildWindow(contentContainer)

local itemTab = GUIManager:createGUIWindow([Link], "ItemTab")


if not itemTab then return end
itemTab:SetText("ITEM")
itemTab:SetWidth({1, -10})
itemTab:SetHeight({0, 50})
itemTab:SetXPosition({0, 5})
itemTab:SetYPosition({0, 10})
itemTab:SetTextColor({1, 1, 1, 1})
itemTab:SetBackgroundColor(currentTab == "Item" and {0.4, 0.4, 0.4, 1} or {0.3,
0.3, 0.3, 1})
itemTab:SetBordered(true)
itemTab:SetProperty("Font", "Arial")
itemTab:SetTextHorzAlign([Link])
tabContainer:AddChildWindow(itemTab)

local allItemsTab = GUIManager:createGUIWindow([Link],


"AllItemsTab")
if not allItemsTab then return end
allItemsTab:SetText("ITEM LIST")
allItemsTab:SetWidth({1, -10})
allItemsTab:SetHeight({0, 50})
allItemsTab:SetXPosition({0, 5})
allItemsTab:SetYPosition({0, 70})
allItemsTab:SetTextColor({1, 1, 1, 1})
allItemsTab:SetBackgroundColor(currentTab == "AllItems" and {0.4, 0.4, 0.4, 1}
or {0.3, 0.3, 0.3, 1})
allItemsTab:SetBordered(true)
allItemsTab:SetProperty("Font", "Arial")
allItemsTab:SetTextHorzAlign([Link])
tabContainer:AddChildWindow(allItemsTab)

local itemContent = GUIManager:createGUIWindow([Link], "ItemContent")


if not itemContent then return end
itemContent:SetWidth({1, 0})
itemContent:SetHeight({1, 0})
itemContent:SetBackgroundColor({0.15, 0.15, 0.15, 0.95})
itemContent:SetVisible(currentTab == "Item")
itemContent:SetProperty("ClipChild", "true")
contentContainer:AddChildWindow(itemContent)

local allItemsContent = GUIManager:createGUIWindow([Link],


"AllItemsContent")
if not allItemsContent then return end
allItemsContent:SetWidth({1, 0})
allItemsContent:SetHeight({1, 0})
allItemsContent:SetYPosition({0, 0})
allItemsContent:SetBackgroundColor({0.15, 0.15, 0.15, 0.95})
allItemsContent:SetProperty("ClipChild", "true")
allItemsContent:SetProperty("AutoScrollBar", "true")
allItemsContent:SetTouchable(true)
allItemsContent:InitializeContainer()
allItemsContent:SetVisible(currentTab == "AllItems")
contentContainer:AddChildWindow(allItemsContent)
local searchInput = GUIManager:createGUIWindow([Link], "SearchInput")
if not searchInput then return end
searchInput:SetWidth({0, 430})
searchInput:SetHeight({0, 40})
searchInput:SetXPosition({0, 10})
searchInput:SetYPosition({0, 10})
searchInput:SetTextColor({0.9, 0.9, 1, 1})
searchInput:SetBackgroundColor({0.2, 0.2, 0.3, 1})
searchInput:SetBordered(true)
searchInput:SetText("Searchitems")
searchInput:SetMaxLength(100)
searchInput:SetCaratOffset(5)
searchInput:SetProperty("Font", "Arial")
allItemsContent:AddChildWindow(searchInput)

searchInput:registerEvent([Link], function()
if searchInput:GetText() == "Searchitems" then
searchInput:SetText("")
end
end)

local itemPreview = GUIManager:createGUIWindow([Link], "ItemPreview")


if not itemPreview then return end
itemPreview:SetWidth({0, 300})
itemPreview:SetHeight({0, 50})
itemPreview:SetBackgroundColor({0.1, 0.1, 0.2, 0.95})
itemPreview:SetXPosition({0, -310})
itemPreview:SetYPosition({0, 180})
itemPreview:SetTouchable(false)
itemPreview:SetVisible(false)
itemPreview:SetProperty("ClipChild", "true")
[Link]():GetRootWindow():AddChildWindow(itemPreview)

local previewText = GUIManager:createGUIWindow([Link],


"PreviewText")
if not previewText then return end
previewText:SetWidth({1, -10})
previewText:SetHeight({1, -10})
previewText:SetTextColor({0.8, 0.8, 1, 1})
previewText:SetTextHorzAlign([Link])
previewText:SetBordered(true)
previewText:SetProperty("Font", "Arial")
itemPreview:AddChildWindow(previewText)

local animating = false


local animTimer = nil
local function animatePreview(show)
if animating and animTimer then
LuaTimer:cancel(animTimer)
animTimer = nil
end
animating = true
itemPreview:SetVisible(show)
local startTime = [Link]()
animTimer = LuaTimer:scheduleTimer(function()
local elapsed = [Link]() - startTime
local progress = [Link](elapsed / 0.3, 1)
if show then
itemPreview:SetXPosition({0, -310 + (320 * progress)})
else
itemPreview:SetXPosition({0, -310 + (320 * (1 - progress))})
end
if progress >= 1 then
animating = false
if not show then
itemPreview:SetVisible(false)
end
LuaTimer:cancel(animTimer)
animTimer = nil
end
end, 0.016, -1)
end

local function createInputLabel(text, yPos, parent)


local label = GUIManager:createGUIWindow([Link], "Label" ..
[Link](1000, 9999))
if not label then return end
label:SetText(text)
label:SetTextColor({0.7, 0.7, 0.9, 1})
label:SetWidth({0, 120})
label:SetHeight({0, 40})
label:SetXPosition({0, 20})
label:SetYPosition({0, yPos})
label:SetBordered(true)
label:SetProperty("Font", "Arial")
label:SetTextHorzAlign([Link])
parent:AddChildWindow(label)
return label
end

local function giveItem(itemId, count, meta)


local player = PlayerManager:getClientPlayer()
if isValidPlayer(player) then
player:sendPacket({
pid = "CreativeAddItem",
data = { count = count or 64, id = itemId, meta = meta or 0 }
})
[Link](itemId, meta or 0, count or 64)
end
animatePreview(false)
end

local itemData = {}
local function initializeItemButtons()
itemData = {}
local yPos = 60
local batchSize = 100
local currentIndex = 1
local function processBatch()
local endIndex = [Link](currentIndex + batchSize - 1, 6999)
for id = currentIndex, endIndex do
local item = [Link](id)
if item then
local unlocName = item:getUnlocalizedName()
if unlocName then
local displayName = Lang:getString(unlocName) or unlocName
local fullText = id .. ":" .. displayName
local itemButton =
GUIManager:createGUIWindow([Link], "ItemBtn" .. id)
if itemButton then
itemButton:SetText(fullText)
itemButton:SetWidth({0, 430})
itemButton:SetHeight({0, 40})
itemButton:SetXPosition({0, 10})
itemButton:SetYPosition({0, yPos})
itemButton:SetTextColor({1, 1, 1, 1})
itemButton:SetBackgroundColor({0.2, 0.2, 0.3, 1})
itemButton:SetBordered(true)
itemButton:SetProperty("Font", "Arial")
itemButton:SetTextHorzAlign([Link])
itemButton:SetVisible(false)
itemButton:registerEvent([Link], function()
giveItem(id, 64, 0)
end)
allItemsContent:AddItem(itemButton)
[Link](itemData, {id = id, text = fullText,
button = itemButton, yPos = yPos})
yPos = yPos + 45
end
end
end
end
currentIndex = endIndex + 1
if currentIndex <= 6999 then
LuaTimer:scheduleTimer(processBatch, 0.016, 1)
end
end
processBatch()
end

local function populateAllItems()


local query = searchInput:GetText():lower()
if query == "Searchitems" then query = "" end
local yPos = 60
for _, data in ipairs(itemData) do
local visible = query == "" or [Link]:lower():find(query)
[Link]:SetVisible(visible)
[Link]:SetYPosition({0, visible and yPos or -1000})
if visible then
yPos = yPos + 45
end
end
allItemsContent:SetVertScrollOffset(0)
end

if #itemData == 0 then
initializeItemButtons()
end

searchInput:registerEvent([Link], function()
populateAllItems()
end)

local idLabel = createInputLabel("ITEMID:", 20, itemContent)


if not idLabel then return end
local idInput = GUIManager:createGUIWindow([Link], "IDInput")
if not idInput then return end
idInput:SetWidth({0, 280})
idInput:SetHeight({0, 40})
idInput:SetXPosition({0, 150})
idInput:SetYPosition({0, 20})
idInput:SetTextColor({0.9, 0.9, 1, 1})
idInput:SetBackgroundColor({0.2, 0.2, 0.3, 1})
idInput:SetBordered(true)
idInput:SetMaxLength(100)
idInput:SetCaratOffset(5)
idInput:SetProperty("Font", "Arial")
itemContent:AddChildWindow(idInput)

local countLabel = createInputLabel("COUNT:", 70, itemContent)


if not countLabel then return end
local countInput = GUIManager:createGUIWindow([Link], "CountInput")
if not countInput then return end
countInput:SetWidth({0, 280})
countInput:SetHeight({0, 40})
countInput:SetXPosition({0, 150})
countInput:SetYPosition({0, 70})
countInput:SetTextColor({0.9, 0.9, 1, 1})
countInput:SetBackgroundColor({0.2, 0.2, 0.3, 1})
countInput:SetMaxLength(100)
countInput:SetText("64")
countInput:SetBordered(true)
countInput:SetCaratOffset(5)
countInput:SetProperty("Font", "Arial")
itemContent:AddChildWindow(countInput)

local metaLabel = createInputLabel("META:", 120, itemContent)


if not metaLabel then return end
local metaInput = GUIManager:createGUIWindow([Link], "MetaInput")
if not metaInput then return end
metaInput:SetWidth({0, 280})
metaInput:SetHeight({0, 40})
metaInput:SetXPosition({0, 150})
metaInput:SetYPosition({0, 120})
metaInput:SetTextColor({0.9, 0.9, 1, 1})
metaInput:SetMaxLength(100)
metaInput:SetBackgroundColor({0.2, 0.2, 0.3, 1})
metaInput:SetText("0")
metaInput:SetBordered(true)
metaInput:SetCaratOffset(5)
metaInput:SetProperty("Font", "Arial")
itemContent:AddChildWindow(metaInput)

local itemGiveBtn = GUIManager:createGUIWindow([Link],


"ItemGiveBtn")
if not itemGiveBtn then return end
itemGiveBtn:SetText("GIVEITEM")
itemGiveBtn:SetWidth({0, 135})
itemGiveBtn:SetHeight({0, 40})
itemGiveBtn:SetXPosition({0, 150})
itemGiveBtn:SetYPosition({0, 180})
itemGiveBtn:SetTextColor({1, 1, 1, 1})
itemGiveBtn:SetBackgroundColor({0.2, 0.5, 0.2, 1})
itemGiveBtn:SetBordered(true)
itemGiveBtn:SetProperty("Font", "Arial")
itemGiveBtn:SetTextHorzAlign([Link])
itemContent:AddChildWindow(itemGiveBtn)

local itemCloseBtn = GUIManager:createGUIWindow([Link],


"ItemCloseBtn")
if not itemCloseBtn then return end
itemCloseBtn:SetText("CLOSE")
itemCloseBtn:SetWidth({0, 135})
itemCloseBtn:SetHeight({0, 40})
itemCloseBtn:SetXPosition({0, 295})
itemCloseBtn:SetYPosition({0, 180})
itemCloseBtn:SetTextColor({1, 1, 1, 1})
itemCloseBtn:SetBackgroundColor({0.5, 0.2, 0.2, 1})
itemCloseBtn:SetBordered(true)
itemCloseBtn:SetProperty("Font", "Arial")
itemCloseBtn:SetTextHorzAlign([Link])
itemContent:AddChildWindow(itemCloseBtn)

local function updateItemName()


local itemId = tonumber(idInput:GetText())
if not itemId then
animatePreview(false)
return
end
local item = [Link](itemId)
if not item then
previewText:SetText("InvalidID:" .. itemId)
animatePreview(true)
return
end
local unlocName = item:getUnlocalizedName()
if not unlocName then return end
local displayName = Lang:getString(unlocName) or unlocName
previewText:SetText(displayName)
local textWidth = previewText:GetTextWidth() + 20
itemPreview:SetWidth({0, [Link](textWidth, 300)})
animatePreview(true)
end

idInput:registerEvent([Link], updateItemName)

itemGiveBtn:registerEvent([Link], function()
local itemId = tonumber(idInput:GetText())
if not itemId then
[Link]("Enter valid ID")
return
end
local count = tonumber(countInput:GetText()) or 64
local meta = tonumber(metaInput:GetText()) or 0
giveItem(itemId, count, meta)
end)

itemCloseBtn:registerEvent([Link], function()
dialog:SetVisible(false)
animatePreview(false)
end)

local function switchTab(activeTab, activeContent, inactiveTab,


inactiveContent, tabName)
currentTab = tabName
if activeTab then activeTab:SetBackgroundColor({0.4, 0.4, 0.4, 1}) end
if inactiveTab then inactiveTab:SetBackgroundColor({0.3, 0.3, 0.3, 1}) end
if activeContent then activeContent:SetVisible(true) end
if inactiveContent then inactiveContent:SetVisible(false) end
if activeContent == allItemsContent then
animatePreview(false)
populateAllItems()
end
end

itemTab:registerEvent([Link], function()
switchTab(itemTab, itemContent, allItemsTab, allItemsContent, "Item")
end)

allItemsTab:registerEvent([Link], function()
switchTab(allItemsTab, allItemsContent, itemTab, itemContent, "AllItems")
end)

local openBtn = GUIManager:createGUIWindow([Link], "OpenBtn")


if not openBtn then return end
openBtn:SetText("GAMEROOMS")
openBtn:SetWidth({0, openBtn:GetTextWidth() + 40})
openBtn:SetHeight({0, 45})
openBtn:SetXPosition({0, 20})
openBtn:SetYPosition({0, 80})
openBtn:SetBackgroundColor({0.2, 0.2, 0.4, 1})
openBtn:SetTextColor({1, 1, 1, 1})
openBtn:SetBordered(true)
openBtn:SetProperty("Font", "Arial")
openBtn:SetTextHorzAlign([Link])
[Link]():GetRootWindow():AddChildWindow(openBtn)
openBtn:registerEvent([Link], function()
dialog:SetVisible(true)
if currentTab == "Item" then
itemContent:SetVisible(true)
allItemsContent:SetVisible(false)
itemTab:SetBackgroundColor({0.4, 0.4, 0.4, 1})
allItemsTab:SetBackgroundColor({0.3, 0.3, 0.3, 1})
elseif currentTab == "AllItems" then
itemContent:SetVisible(false)
allItemsContent:SetVisible(true)
itemTab:SetBackgroundColor({0.3, 0.3, 0.3, 1})
allItemsTab:SetBackgroundColor({0.4, 0.4, 0.4, 1})
populateAllItems()
end
animatePreview(false)
end)

[Link]():GetRootWindow():AddChildWindow(dialog)
end
RoomsUI()

Common questions

Powered by AI

The item preview animation is controlled using a timer mechanism. When an animation starts, the global variable 'animating' is set to true, and a scheduled timer updates the animation's progress every 0.016 seconds. If the animation is interrupted, the timer can be canceled with LuaTimer:cancel(animTimer), stopping the animation prematurely. Once the animation completes or is stopped manually, 'animating' is set back to false and the timer is canceled .

The RoomsUI function leverages event-driven architecture by registering click events on various GUI elements like tabs and action buttons. Functions are defined and linked to these events, specifying what should happen when an event occurs. For example, clicking the 'ItemGiveBtn' triggers an event that captures current inputs, validates them, and then triggers another function to dispatch items to the player. This modularity allows behaviors to be dynamically attached to UI elements, promoting separation of logic and UI .

Transitioning between different content views involves changing the visibility of specific 'Window' elements linked to each tab and modifying their background colors to reflect an active or inactive state. Event functions are attached to click events on the tabs, which call the 'switchTab' function. This function takes parameters for the active and inactive tab/content, updating their properties accordingly and calling additional functions like 'populateAllItems()' if needed .

When a search term is entered, the system retrieves its lowercase version and checks each item's text against the query for matches. If an item's text includes the query or if the query is empty, the corresponding button is made visible and repositioned with an incremented y-position, ensuring it appears in the list. If there's no match, the button's y-position is set to -1000 to hide it effectively. After processing all items, the vertical scroll offset for the content container resets to 0, ensuring the user sees the top of the results .

The system differentiates the active tab from inactive tabs by changing their background color. When a tab is active, it is set to a darker color {0.4, 0.4, 0.4, 1}, while an inactive tab is set to a lighter color {0.3, 0.3, 0.3, 1}. This visual cue helps users identify which tab is currently active .

'TabContainer' is essential because it serves as the primary structure for organizing different content sections of the UI. By providing a dedicated space for tabs such as 'Item' and 'AllItems', it allows users to switch between different data views seamlessly. The container keeps related tabs visually grouped, ensuring that the interface is organized and easy to navigate .

The function ‘isValidPlayer’ ensures that the recipient of any items added via the UI is indeed a legitimate player entity. This validation is critical as it prevents errors and ensures that only valid, active player entities receive items when the ‘giveItem’ function is executed, maintaining the system's integrity .

The system sets the width of the item preview to be the greater of a fixed minimum (300) or the text width plus 20 pixels to account for borders or paddings. This calculation ensures that when the preview text updates with a new item name, the window automatically adjusts its width to fit the content without excessive space or overflowing text .

The purpose of clearing the search input upon focus is to enhance user experience by immediately allowing them to type new queries without having to manually erase placeholder text. Its implementation involves registering a click event on the search input, which checks if the text is equal to 'Searchitems'. If true, it replaces the text with an empty string, effectively clearing it when the field gains focus .

'ClipChild' ensures that any child elements that extend beyond the confines of their parent window are not visible, maintaining the aesthetic and functional bounds of the UI elements. 'Touchable', on the other hand, designates whether a window can interact with touch events, determining parts of the interface that are interactable by the user. Together, they contribute to maintaining both functional interactions and visual coherence within the UI .

You might also like