Which data organization and UI elements should I have in order to add the player's data to the UI?

Help and Feedback Scripting Support
#1

I was thinking of retrieving all the data and doing it little by little, but in terms of optimization, it’s not great. Thanks for helping me!

local Players = game:GetService("Players")
local ServerStorage = game:GetService("ServerStorage")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local ServerContents = ServerStorage.Contents
local ReplicatedContents = ReplicatedStorage.Contents

local Enums = require(ReplicatedContents.Enums.Enums)
local Player = require(ServerContents.Player.Player)

local Events = ReplicatedStorage.Events
local playerEvent = Events.PlayerEvent

local function onPlayerAdded(player: Player)
	local playerObject = Player.new(player.UserId)
	
	playerEvent:FireClient(player, playerObject:getData(), Enums.PlayerEvent.SetDefaultData)
end

local function onPlayerRemoving(player: Player)
	
end

Players.PlayerAdded:Connect(onPlayerAdded)
Players.PlayerRemoving:Connect(onPlayerRemoving)

--CLIENT

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Contents = ReplicatedStorage.Contents

local Enums = require(Contents.Enums.Enums)

local Events = ReplicatedStorage.Events
local playerEvent = Events.PlayerEvent

local player = game.Players.LocalPlayer
local playerGui = player.PlayerGui
local playerUi = playerGui:WaitForChild("PlayerUi")

local container = playerUi.Container
local top = container.Top
local Frames = container.Frames

--on TOP
local levelBar = top.LevelBar
local progressBar = levelBar.ProgressBar
local levelText = levelBar.LevelText

--on Frame

playerEvent.OnClientEvent:Connect(function(data, action)
	if action == Enums.PlayerEvent.SetDefaultData then
		
	end
end)
#2

I’m bumping this post because I really need some guidance!

#3

What exactly do you need guidance with? It seems you are asking for data organization, UI elements, and optimization advices, the first two being purely subjective and the last one being unnecessary if you’re planning on resending data (at an interval) anyways.

#4

I’m not planning to send any data back to the server, just to the client. The only problem is that I’m not really sure how to go about it.

#5

Right, but what’s your issue? You’re already sending data to the client of playerObject:getData() and your client code already receiving that data with the variable data?

#6

What I’m really looking to understand is how to efficiently distribute my data to their respective UIs in a smooth and optimized way.

#7

Make a server script to load user data and send them to the client using a RemoteEvent (at least thats what I’d do)

#8

Then the most common way is to simply update their UI everytime they receive a new version of their data.

The UI/UX design itself is up to you or the designer. If you want it to look smooth, consider applying some tween effects using TweenService. If you want it to sound smooth, consider adding some sound effects whenever something significant happens, such as if their currency is higher than the previously stored currency data, play some sort of cash sound effect.

Distributing your data to their respective UI is as simple as calling some sort of function to update all of your UI. Only “optimize” when you know there is a problem, but in most simple cases, you won’t need to.

Here is a mock code and a rundown of what this process might look like:

local storedData = nil

local function updateAllUI()
    -- update static elements
    goldLabel.Text = storedData.Gold
    levelLabel.Text = storedData.Level
    expLabel.Text = storedData.Experience

    -- update dynamic elements, such as inventory
    for _, item in storedData.Inventory do
        local itemFrame = inventoryFrame:FindFirstChild(item.Name)
        
        if itemFrame == nil then
            -- create item frame for the first time
            itemFrame = newItemFrame
        end

        -- update existing items
        itemFrame.ItemName.Text = item.Name
        itemFrame.Quantity.Text = item.Quantity

        -- a simple optimization is to parent AFTER
        -- setting properties in case of a new itemFrame,
        -- just so the renderer engine only has to render
        -- the updated frame rather than also the blank one
        itemFrame.Parent = inventoryFrame
    end

    -- delete any item frames that doesn't exist anymore
    for _, itemFrame in inventoryFrame:GetChildren() do
        if itemFrame:IsA("Frame") and storedData.Inventory[itemFrame.Name] == nil then
            itemFrame:Destroy()
        end
    end
end

yourRemoteEvent.OnClientEvent:Connect(function(newData)
    storedData = newData
    updateAllUI()
end)
  1. Server sends data to client the first time
  2. Client receives data, updates all UI via function for the first time
  3. Renderer engine updates the client’s screen with the new properties
  4. Some time later, server sends data to the client again
  5. Client receives data, updates all UI via function again, but some data remains the same as previous
  6. Only part of the UI elements will actually get updated, renderer engine only updates what properties actually changed
1 Like
#9

Oh, I know I need to use that… but that’s not really what I was talking about.

#10

Sorry, I must have misinterpreted your question

#11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.