Creando una Interfaz gráfica (o GUI) | Documentación del Centro de creación de Roblox

Ahora mismo, mucha de la información del juego está oculta en la ventana de salida, invisible para los jugadores. Así que los jugadores pueden ser informados de lo que está sucediendo en el juego, crearás una interfaz de usuario gráfica (Interfaz gráfica (o GUI)) y la codificarás.

Mostrando información con un Interfaz gráfica (o GUI)

Para este juego, se mostrará la etiqueta de texto el estado del juego actual, así como el número de jugadores restantes y el tiempo.

Configurando la Interfaz gráfica (o GUI)

Primero, crea un objeto GUI de la pantalla para contener los diferentes elementos de texto. Cuando el jugador mueve la cámara, la pantalla GUI se queda en el mismo lugar en su pantalla.

Para asegurar a todos los jugadores que vean el mismo modo de presentación, coloca el GUI en el directorio StarterGui . Al iniciar el juego, este directorio se copia a todos los jugadores.

En la carpeta StarterGui, crea un nuevo ScreenGUI. Luego en ScreenGUI, agrega un nuevo TextLabel llamado StatusText.
Para mover la etiqueta, en el Explorador, seleccione Estado de texto. Luego, en la vista del juego, arrastre la etiqueta donde desea que esté. Sus números pueden diferir del video. La etiqueta también se puede reubicar usando los puntos de anclaje en las esquinas.

Programar la Interfaz gráfica (o GUI)

Para reflejar los cambios en el juego, los scripts necesitarán actualizar los elementos de la GUI. Por instancia, el estado del juego, sea que sea un intermedio o una ronda activa, se almacenará en un valor de cadena y se actualizará con scripts locales.

En comparación con scripts y módulos de scripts que ejecutan servidores Roblox, los scripts locales se ejecutan en el dispositivo del jugador. A menudo se utilizan para codificar elementos de GUI como el temporizador o la entrada del jugador, como acciones de mouse o teclado.

Configurando el Script

El script StatusDisplay se usará para actualizar la GUI del jugador cuando el estado del juego cambie.

En Almacenamiento Replicado , crea una carpeta llamada DisplayValues. En esa carpeta, agrega un valor de cadena llamado Estado. Para probar el valor más tarde, agrégalo con un valor temporal, como "¡Bienvenido a la Batalla!".

Dado que los scripts locales solo se ejecutan en el dispositivo de un jugador, no se pueden almacenar en carpetas del servidor como ServerStorage. ReplicatedStorage es una carpeta que está disponible tanto para el cliente (dispositivo) como para el servidor.
En StarterGui > ScreenGUI > Status, agrega un nuevo script local llamado StatusDisplay. Los scripts que afectan el GUI a menudo se vinculan a ese elemento del GUI.

Abra el estado de la pantalla y defina las siguientes variables para el seguimiento:

Servicio de almacenamiento replicado
Car carpeta de valores
Valor de estado

TextLabel - usa script.Parent .


local ReplicatedStorage = game:GetService("ReplicatedStorage")
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

local textLabel = script.Parent

Cambiar la etiqueta de texto

Para cambiar el texto en la etiqueta, usa un evento cambiado para que cada vez que la cadena de estado sea cambiada por otro script, la etiqueta de texto se actualice.

Código una nueva función llamada updateText() . En esa función, establece la propiedad de texto de textLabel a status.Value .


local textLabel = script.Parent

local function updateText()
	textLabel.Text = status.Value
end

Conecta la función al evento cambiado.


local function updateText()
	textLabel.Text = status.Value
end

status.Changed:Connect(updateText)

Para que los jugadores vean el estado más reciente cuando se inicia el juego, ejecuta updateText() al final del script.


local function updateText()
	textLabel.Text = status.Value
end

status.Changed:Connect(updateText)
updateText()

Corre el juego y confirma que ves el valor temporal en la pantalla.

Creando el Gestor de Display

Durante un juego, la etiqueta de texto necesitará obtener información de GameManager, MatchManager y posiblemente otros scripts. Para que estos diferentes scripts puedan actualizar la etiqueta de texto cuando sea necesario, crear un módulo de script llamado DisplayManager.

Configurando el Script

Dado que DisplayManager necesita comunicarse con otros scripts, será un módulo de script.

En Almacenamiento del servidor > ModuloScripts , crea un nuevo módulo de script llamado DisplayManager. Renombre la tabla del módulo para que coincida con el nombre del script.

Agregue variables locales para lo siguiendo: Replicated Storage, Directorio de Valores de Muestra, Estado.


local DisplayManager = {}

-- Servicios
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Mostrar valores utilizados para actualizar el Interfaz gráfica (o GUI)del jugador
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

-- Funciones locales

-- Funciones de módulo

return DisplayManager

Crea una nueva función de módulo llamada updateStatus() que actualiza la cadena en el valor de Estado. Otros scripts podrán llamar a esta función.


-- Funciones locales

-- Funciones de módulo
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

Actualizar el estado del texto

Con el Administrador de pantalla configurado, se puede utilizar en otros scripts para actualizar la etiqueta de texto de la GUI. Como el primer mensaje en la Interfaz gráfica (o GUI), muestra el comienzo y el final de la interrupción a través del script GameManager.

En Servicio de Script del Servidor > GameManager, crea una variable llamada displayManager y requiere el módulo de Servicio de Mostrador en el almacenamiento del servidor.


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

-- Scripts de módulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

Como la primera línea después de la declaración de la verdad, primero después de la línea de while true, updateStatus() y pase en un mensaje sobre la espera de los jugadores.


-- Eventos
local events = ServerStorage:WaitForChild("Events")
local matchEnd = events:WaitForChild("MatchEnd")

while true do
	displayManager.updateStatus("Waiting for Players")

	repeat
		print("Starting intermission")
		task.wait(gameSettings.intermissionDuration)
	until #Players:GetPlayers() >= gameSettings.minimumPlayers

	task.wait(gameSettings.transitionTime)

	matchManager.prepareGame()
	matchEnd.Event:Wait()
end

Luego de que termine la repetición del ciclo para el intermedio, llame a updateStatus() y pase en una cadena anunciando que la partida está comenzando. Dado que estarás probando con la Interfaz gráfica (o GUI), elimina las dos declaraciones de impresión para notar el inicio y el final de la intermedio.


while true do
	displayManager.updateStatus("Waiting for Players")

	repeat
		task.wait(gameSettings.intermissionDuration)
	until #Players:GetPlayers() >= gameSettings.minimumPlayers

	displayManager.updateStatus("Get ready!")
	task.wait(gameSettings.transitionTime)

	matchManager.prepareGame()
	matchEnd.Event:Wait()
end

Prueba el juego con y sin tus jugadores mínimos. El mensaje debería leer lo siguiendo:
- Sin los jugadores mínimos: "Waiting for Players" .
- Con los jugadores mínimos: "Get ready" .

Consejos de solución de problemas

En este punto, si la etiqueta de texto no muestra el primer mensaje, o aún muestra "Etiqueta", intente uno de los siguientes a continuación.

Asegúrese en el script local de StatusDisplay que updateText() se llama en la parte inferior del script. Esto garantiza que el jugador obtenga el mensaje más reciente.
Asegúrese de que el valor de estado de la cuerda de estado esté en ReplicatedStorage. Debido a la naturaleza única de las relaciones cliente-servidor, si está en ServerStorage, un script local no podrá encontrarlo.

Mostrando el estado de la partida

Durante una coincidir, la GUI mostrará dos números: el número de jugadores restantes y el tiempo. A medida que cambian estos números, la etiqueta de texto también cambiará.

Configurando Valores y Funciones

Se usará IntValues para almacenar el número de jugadores y el tiempo restante.

En ReplicatedStorage > DisplayValues, crea dos IntValues llamados PlayersLeft y TimeLeft.

En DisplayManager, agregue variables para almacenar los valores de los jugadores que se han ido y el tiempo que queda.


local DisplayManager = {}

-- Servicios
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Mostrar valores utilizados para actualizar el Interfaz gráfica (o GUI)del jugador
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

Crea una función local nombrada updateMatchStatus() . Luego, establece el valor del estado para mostrar el número de jugadores restantes y el tiempo restante.


local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

-- Funciones locales
local function updateRoundStatus()
	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
end

Para ambas variables IntValue, conecta updateRoundStatus() al evento cambiado.


-- Funciones de módulo
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

playersLeft.Changed:Connect(updateRoundStatus)
timeLeft.Changed:Connect(updateRoundStatus)

return DisplayManager

Aún no pruebe. Nada ha actualizado los valores de PlayersLeft o TimeLeft, por lo que el estado no se cambiará una vez que la ronda comience.

Mostrando Jugadores

A continuación, agregue el código para mostrar el número de jugadores al comienzo de un juego. Las lecciones posteriores actualizarán el valor de PlayersLeft a medida que los jugadores se eliminen del juego.

En PlayerManager, agregue variables locales para el servicio ReplicatedStorage, la carpeta DisplayValues y el valor IntValue de PlayersLeft.


local PlayerManager = {}

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

-- Variables de mapa
local lobbySpawn = workspace.Lobby.StartSpawn
local arenaMap = workspace.Arena
local spawnLocations = arenaMap.SpawnLocations

-- Valores
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local playersLeft = displayValues:WaitForChild("PlayersLeft")

Muestra el número de jugadores inicial al establecer el valor de playersLeft al tamaño de la matriz/listade jugadores activos.

Luego, en sendPlayersToMatch() , debajo del for, introducir: playersLeft.Value = #activePlayers


function PlayerManager.sendPlayersToMatch()
	local availableSpawnPoints = spawnLocations:GetChildren()

	for playerKey, whichPlayer in Players:GetPlayers() do
		table.insert(activePlayers, whichPlayer)

		local spawnLocation = table.remove(availableSpawnPoints, 1)
		preparePlayer(whichPlayer, spawnLocation)
	end

	playersLeft.Value = #activePlayers
end

Mostrando el temporizador

Recuerda que los scripts de módulo se utilizan para centralizar el código similar. Dado que el temporizador se rastrea en MatchManager, actualiza el valor TimeLeft utilizando funciones de la función Timer. El gestor de la pantalla escuchará cambios en el TimeLeft y actualizará para igualar el nuevo valor.

En MatchManager, crea variables para almacenar el servicio Almacenamiento Replicado , el directorio DisplayValues y el valor TimeLeft.


local MatchManager = {}

-- Servicios
local ServerStorage = game:GetService("ServerStorage")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Scripts de módulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- Eventos
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")

-- Valores
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local timeLeft = displayValues:WaitForChild("TimeLeft")

local myTimer = timer.new()

Encuentra la función startTimer() después del evento Finished del temporizador, copia y pega todo el código mientras se ejecuta el ciclo para actualizar el valor de Finished a medida que el temporizador aún está activo.


while myTimer:isRunning() do
	-- Añadiendo +1 asegura que la pantalla de tiempo muestre 1 en lugar de 0.
	timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
	-- Al no configurar el tiempo para esperar, ofrece más preciso flujo
	task.wait()
end

Cuando se agregue, el código debería ser como el ejemplo a continuación.


local function startTimer()
	print("Timer started")
	myTimer:start(gameSettings.matchDuration)
	myTimer.finished:Connect(timeUp)

	while myTimer:isRunning() do
		-- Añadiendo +1 asegura que la pantalla de tiempo muestre 1 en lugar de 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Al no configurar el tiempo para esperar, ofrece más preciso flujo
		task.wait()
	end
end

Ejecuta el juego con los jugadores mínimos. Asegúrate de que el texto de estado se muestre:
- La cantidad correcta de jugadores de inicio. Recuerda, este número no cambiará hasta que se agregue más código en una lección futura.
- El tiempo disminuye cada segundo hasta que se detenga en 1.

Scripts Completados

A continuación, están los scripts completados para revisar tu trabajo.

Script de GameManager


-- Servicios
local ServerStorage = game:GetService("ServerStorage")
local Players = game:GetService("Players")

-- Scripts de módulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

-- Eventos
local events = ServerStorage:WaitForChild("Events")
local matchEnd = events:WaitForChild("MatchEnd")

while true do
	displayManager.updateStatus("Waiting for Players")

	repeat
		task.wait(gameSettings.intermissionDuration)
	until #Players:GetPlayers() >= gameSettings.minimumPlayers

	displayManager.updateStatus("Get ready!")
	task.wait(gameSettings.transitionTime)

	matchManager.prepareGame()
	matchEnd.Event:Wait()
end

Script de DisplayManager


local DisplayManager = {}

-- Servicios
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Mostrar valores utilizados para actualizar el Interfaz gráfica (o GUI)del jugador
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

-- Funciones locales
local function updateRoundStatus()
	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
end

-- Funciones de módulo
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

playersLeft.Changed:Connect(updateRoundStatus)
timeLeft.Changed:Connect(updateRoundStatus)

return DisplayManager

Guión de MatchManager


local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Scripts de módulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- Eventos
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")
local matchEnd = events:WaitForChild("MatchEnd")

-- Valores
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local timeLeft = displayValues:WaitForChild("TimeLeft")

local myTimer = timer.new()

-- Funciones locales
local function timeUp()
	print("Time is up!")
end

local function startTimer()
	print("Timer started")
	myTimer:start(gameSettings.matchDuration)
	myTimer.finished:Connect(timeUp)

	while myTimer:isRunning() do
		-- Añadiendo +1 asegura que la pantalla de tiempo muestre 1 en lugar de 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Al no configurar el tiempo para esperar, ofrece más preciso flujo
		task.wait()
	end
end

-- Funciones de módulo
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Script de Estado de Displays


local ReplicatedStorage = game:GetService("ReplicatedStorage")
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

local textLabel = script.Parent

local function updateText()
	textLabel.Text = status.Value
end

status.Changed:Connect(updateText)
updateText()