Crear una interfaz Interfaz gráfica (o GUI)

En este momento, gran parte de la información del juego se encuentra actualmente en la ventana de salida, invisible para los jugadores.Para que los jugadores estén informados de lo que sucede en el juego, crearás una interfaz de usuario gráfica (Interfaz gráfica (o GUI)) y la codificarás.

Mostrar información con una Interfaz gráfica (o GUI)

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

Configurar la interfaz Interfaz gráfica (o GUI)

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

Para asegurarse de que todos los jugadores vean la misma pantalla, coloque la interfaz de usuario en la carpeta StarterGUI . Al inicio del juego, esta carpeta se copia a todos los jugadores.

1. En la carpeta StarterGUI, crea una nueva ScreenGUI. Luego en ScreenGUI, agrega una nueva etiqueta de texto llamada StatusText.

   

2. Para mover la etiqueta, en el Explorador, seleccione Texto de estado.Luego, en la vista del juego, arrastra la etiqueta donde te gustaría que estuviera.Tus números pueden diferir del video.La etiqueta también se puede redimensionar usando los puntos de anclaje en las esquinas.

Programar la interfaz Interfaz gráfica (o GUI)

Para reflejar los cambios en el juego, los scripts deberán actualizar los elementos de la interfaz gráfica.Por instancia, el estado del juego, ya sea una interrupción o una ronda activa, se almacenará en un valor de cadena y se actualizará usando scripts locales.

Configurar el script

El script StatusDisplay se usará para actualizar la interfaz gráfica del jugador cada vez que cambie el estado del juego.

1. En Almacenamiento replicado , crea una carpeta llamada DisplayValues.En esa carpeta, agregue un valor de cadena llamado Estado.Para probar el valor más tarde, dale un valor temporal, como "¡Bienvenido a la batalla!".

   

   Debido a 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.

2. En StarterGUI > ScreenGUI > Estado, agregue un nuevo script local llamado StatusDisplay. Los scripts que afectan la interfaz de usuario a menudo se asignan a ese elemento de la interfaz de usuario.

   

3. Abre el estado de la pantalla y define las siguientes variables para el seguimiento:

   • Servicio ReplicatedStorage

   • Carpaura de valores de visualización

   • Valor de estado StringValue

   • Etiqueta de texto - use 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, use un evento cambiado para que cada vez que la cadena de estado sea cambiada por otro script, se actualice la etiqueta de texto.

1. Codifica 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

2. Conecta la función al evento Cambiado.

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

3. Así que los jugadores ven el estado más actualizado cuando comienzan el juego, ejecuta updateText() al final del script.

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

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

   

Crear el administrador de la pantalla

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

Configurar el script

Debido a que DisplayManager debe comunicarse con otros scripts, será un script de módulo.

1. En Almacenamiento del servidor > Guiones de módulo , crea un nuevo guión de módulo llamado DisplayManager.Renombra la tabla del módulo para que coincida con el nombre del script.

2. Añade variables locales para lo siguiendo: almacenamiento replicado, carpeta DisplayValues, estado.

   local DisplayManager = {}
   
   -- Servicios
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Mostrar valores utilizados para actualizar la interfaz 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

3. 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 usar en otros scripts para actualizar la etiqueta de texto de la interfaz gráfica.Como el primer mensaje en la Interfaz gráfica (o GUI), muestra el comienzo y el final de la intermisión a través del script GameManager.

1. En Servicio de guión de servidor > GameManager, crea una variable llamada displayManager y requiere el módulo de administrador de pantalla en ServerStorage.

   -- 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"))

2. Como la primera línea después de la declaración while true do , llama a displayManager > updateStatus() y pasa un mensaje sobre la espera de 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

3. Después del final del bucle de repetición para el intermedio, llama a updateStatus() y pasa una cadena que anuncia que el partido está comenzando.Dado que probarás con la interfaz Interfaz gráfica (o GUI), elimina las dos declaraciones de impresión para anotar el comienzo y el final de la interrupción.

   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

4. Prueba el juego con y sin tus jugadores mínimos. El mensaje debe leer lo siguiendo:

   • Sin los jugadores mínimos: "Waiting for Players" .
   • Con el mínimo de jugadores: "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", prueba una de las siguientes opciones.

• Asegúrese de que en el script local StatusDisplay se llame updateText() en la parte inferior del script.Esto garantiza que el jugador reciba el mensaje más actualizado.
• Compruebe que el valor de la cadena de estado está en ReplicatedStorage.Debido a la naturaleza única de las relaciones cliente-servidor, si está en ServerStorage, un script local no podrá encontrarla.

Mostrar el estado del partido

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

Configurar valores y funciones

Los valores Int se usarán para almacenar el número de jugadores y el tiempo restante.

1. En ReplicatedStorage > DisplayValues, crea dos valores Int llamados PlayersLeft y TimeLeft.

   

2. En DisplayManager, agregue variables para almacenar los valores de los jugadores restantes y el tiempo restante.

   local DisplayManager = {}
   
   -- Servicios
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Mostrar valores utilizados para actualizar la interfaz 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")

3. Crea una función local llamada updateMatchStatus(). Luego, establece el valor de 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

4. 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 pruebes. Nada ha actualizado los valores de PlayersLeft o TimeLeft, por lo que el estado no cambiará una vez que comience una ronda.

Mostrar jugadores

A continuación, añade 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 se eliminen los jugadores del juego.

1. 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")

2. Muestra el número de jugadores iniciales al establecer el valor de playersLeft a la longitud del matriz/listade jugadores activos.

   Luego, en sendPlayersToMatch() , bajo el bucle 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

Mostrar el temporizador

Recuerde que los scripts de módulo se usan para centralizar código similar.Dado que el temporizador se rastrea en MatchManager, actualice el valor TimeLeft usando funciones del script Timer.El administrador de la pantalla escuchará los cambios en el TimeLeft y se actualizará para coincidir con el nuevo valor.

1. En MatchManager, crea variables para almacenar el servicio ReplicatedStorage , la carpeta 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()

2. Encuentra la función startTimer() . Después de el evento del temporizador Finished, copia y pega todo, resaltado mientras se repite el bucle a continuación.El código ejecuta un bucle para actualizar el valor timeLeft hasta que el temporizador siga activo.

   while myTimer:isRunning() do
   	-- Añadir +1 asegura que la pantalla del temporizador termine en 1 en lugar de 0.
   	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   	-- Al no establecer el tiempo para esperar, ofrece un ciclo más preciso
   	task.wait()
   end

   Cuando se agrega, el código debe parecerse al ejemplo a continuación.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- Añadir +1 asegura que la pantalla del temporizador termine en 1 en lugar de 0.
   		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   		-- Al no establecer el tiempo para esperar, ofrece un ciclo más preciso
   		task.wait()
   	end
   end

3. Ejecuta el juego con el mínimo de jugadores. Asegúrate de que se muestre el texto de estado:

   • La cantidad correcta de jugadores iniciales. Recuerda, este número no cambiará hasta que se agregue código adicional en una lección futura.
   • El tiempo disminuye cada segundo hasta que se detiene en 1.

Guiones completados

A continuación, se completan los scripts para verificar doblemente tu trabajo.

scriptdel administrador del juego

-- 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

scriptde gestor de visualización

local DisplayManager = {}

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

-- Mostrar valores utilizados para actualizar la interfaz 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 scriptMatchManager

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ñadir +1 asegura que la pantalla del temporizador termine en 1 en lugar de 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Al no establecer el tiempo para esperar, ofrece un ciclo más preciso
		task.wait()
	end
end

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

matchStart.Event:Connect(startTimer)

return MatchManager

scriptde mostrar estado

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()