Criar uma Interface gráfica do usuário

No momento, muita da informação do jogo está atualmente na janela de Saída, invisível para os jogadores.Assim, os jogadores podem ser informados do que está acontecendo no jogo, você criará uma interface gráfica de usuário (Interface gráfica do usuário) e a codificará.

Exibir informações com uma Interface gráfica do usuário

Para este jogo, uma etiqueta de texto exibirá o status do jogo atual, bem como o número restante de jogadores e o tempo.

>

>

Configurar a Interface gráfica do usuário

Primeiro, crie um objeto GUI da tela para conter os diferentes elementos de texto.Quando o jogador move a Câmera, a GUI da tela permanece no mesmo lugar em sua tela.

Para garantir que todos os jogadores vejam o mesmo display, coloque a GUI na pasta StarterGUI . Na inicialização do jogo, esta pasta é copiada para todos os jogadores.

1. Na pasta StarterGUI, crie um novo ScreenGui. Em seguida, no ScreenGui, adicione um novo TextLabel chamado StatusText.

   

2. Para mover a etiqueta / rótulo, no Explorador, selecione StatusText.Então, na visualização do jogo, arraste a etiqueta para onde você gostaria.Seus números podem diferir do vídeo.A etiqueta também pode ser redimensionada usando os pontos de âncora nos cantos.

Scriptar a Interface gráfica do usuário

Para refletir as alterações no jogo, os scripts precisarão atualizar os elementos da GUI.Por instância, o status do jogo, se for uma intermissão ou rodada ativa, será armazenado em um StringValue e atualizado usando scripts locais.

Configure o script

O script StatusDisplay será usado para atualizar a GUI do jogador sempre que o estado do jogo mudar.

1. Em ReplicatedStorage , crie uma pasta chamada DisplayValues.Nessa pasta, adicione um StringValue chamado Status.Para testar o valor mais tarde, dê a ele um valor temporário, como "Bem-vindo à Batalha!".

   

   Como os scripts locais só são executados no dispositivo de um jogador, eles não podem ser armazenados em pastas do Servidor como o Armazenamento de Servidor.O ReplicatedStorage é um diretório que está disponível tanto para o cliente (dispositivo) quanto para o servidor.

2. No StarterGui > ScreenGui > Status, adicione um novo script local chamado StatusDisplay. Scripts que afetam a GUI são frequentemente parentados a esse elemento da GUI.

   

3. Abra o StatusDisplay e defina as seguintes variáveis para a seguir:

   • Serviço ReplicatedStorage

   • Pasta de Valores a Mostrar

   • Valor da String de Status

   • TextLabel - use script.Parent .

     local ReplicatedStorage = game:GetService("ReplicatedStorage")
     local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
     local status = displayValues:WaitForChild("Status")
     
     local textLabel = script.Parent

Altere a etiqueta / rótulode texto

Para alterar o texto no etiqueta / rótulo, use um evento Alterado sempre que a string de status for alterada por outro script, o rótulo de texto será atualizado.

1. Codifique uma nova função chamada updateText(). Nessa função, defina a propriedade Texto de textLabel para status.Value.

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

2. Conecte a função ao evento Alterado.

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

3. Assim, os jogadores veem o status mais atual quando iniciam o jogo, execute updateText() no final do script.

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

4. Execute o jogo e confirme que você veja o valor temporário no display.

   

Crie o gerenciador de exibição

Durante um jogo, o rótulo de texto precisará obter informações do Gerenciador de Jogo, Gerenciador de Partida e, possivelmente, de outros scripts.Então, esses diferentes scripts podem atualizar a etiqueta de texto quando necessário, criar um script de módulo chamado DisplayManager.

Configure o script

Como o DisplayManager precisa se comunicar com outros scripts, será um script de módulo.

1. Em Armazenamento do Servidor > ModuleScripts , crie um novo script de módulo chamado DisplayManager.Renomeie a tabela de módulo para combinar com o nome do script.

2. Adicione variáveis locais para o seguindo: Armazenamento Replicado, pasta DisplayValues, Status.

   local DisplayManager = {}
   
   -- Serviços
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Exibir valores usados para atualizar a Interface gráfica do usuáriodo Jogador
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   
   -- Funções Locais
   
   -- Funções de Módulo
   
   return DisplayManager

3. Crie uma nova função de módulo chamada updateStatus() que atualiza a string no valor de Status. Outros scripts poderão chamar essa função.

   -- Funções Locais
   
   -- Funções de Módulo
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end

Atualizar o status do texto

Com o Gerenciador de Exibição configurado, ele pode ser usado em outros scripts para atualizar a etiqueta / rótulode texto da GUI.Como a primeira mensagem na Interface gráfica do usuário, mostre o início e o fim da intermissão através do script GameManager.

1. Em Serviço de Script de Servidor > GameManager, crie uma variável chamada displayManager e exija o módulo DisplayManager no Armazenamento de Servidor.

   -- Serviços
   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 a primeira linha após a declaração while true do, chame o displayManager > e passe uma mensagem sobre a espera por jogadores.

   -- 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. Após o fim do ciclo de repetição para a intermissão, chame updateStatus() e passe uma string que anuncia que a partida está começando.Como você vai testar com a Interface gráfica do usuário, exclua as duas declarações de impressão para notar o início e o fim da intermissão.

   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. Teste o jogo com e sem seus jogadores mínimos. A mensagem deve ler o seguindo:

   • Sem os jogadores mínimos: "Waiting for Players" .
   • Com os mínimos jogadores: "Get ready" .

Dicas de solução de problemas

Neste ponto, se a etiqueta de texto não exibir a primeira mensagem ou ainda exibir "Label", tente uma das seguintes opções.

• Certifique-se no script local StatusDisplay que updateText() seja chamado no final do script.Isso garante que o jogador receba a mensagem mais atual.
• Verifique se o valor da string de status está no ReplicatedStorage.Devido à natureza única das relações cliente-servidor, se estiver no Armazenamento do Servidor, um script local não será capaz de encontrá-lo.

Exibir o status da partida

Durante uma conferir, a GUI exibirá dois números: contagem de jogadores restantes e tempo. À medida que esses números mudam, a etiqueta de texto também muda.

Definir valores e funções

Os IntValues serão usados para armazenar o número de jogadores e o tempo restante.

1. No ReplicatedStorage > DisplayValues, crie dois IntValues chamados PlayersLeft e TimeLeft.

   

2. No DisplayManager, adicione variáveis para armazenar os valores de tempo restante e os jogadores restantes.

   local DisplayManager = {}
   
   -- Serviços
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Exibir valores usados para atualizar a Interface gráfica do usuáriodo Jogador
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")

3. Crie uma função local chamada updateMatchStatus(). Então, defina o valor de status para exibir o número de jogadores restantes e o tempo restante.

   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   -- Funções Locais
   local function updateRoundStatus()
   	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
   end

4. Para ambas variáveis IntValue, conecte updateRoundStatus() ao evento Alterado.

   -- Funções de Módulo
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end
   
   playersLeft.Changed:Connect(updateRoundStatus)
   timeLeft.Changed:Connect(updateRoundStatus)
   
   return DisplayManager

   Ainda não teste. Nada atualizou os valores de PlayersLeft ou TimeLeft, então o status não será alterado quando uma rodada começar.

Exibir jogadores

Em seguida, adicione o código para exibir o número de jogadores no início de um jogo.As lições posteriores atualizarão o valor de PlayersLeft à medida que os jogadores são eliminados do jogo.

1. No PlayerManager, adicione variáveis locais para o serviço ReplicatedStorage, pasta DisplayValues e IntValue de PlayersLeft.

   local PlayerManager = {}
   
   -- Serviços
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Variáveis 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. Mostre o número inicial de jogadores definindo o valor de playersLeft para o tamanho do matriz / listade jogadores ativos.

   Então, em sendPlayersToMatch() , sob o loop for, digitar: 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

Exibir o relógio

Lembre-se que os scripts de módulo são usados para centralizar código semelhante.Como o cronômetro é rastreado no MatchManager, atualize o valor TimeLeft usando funções do script Timer.O gerenciador de exibição ouvirá as alterações no TimeLeft e atualizará para corresponder ao novo valor.

1. No MatchManager, crie variáveis para armazenar o serviço ReplicatedStorage , a pasta DisplayValues e o valor TimeLeft.

   local MatchManager = {}
   
   -- Serviços
   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. Encontre a função startTimer() . Após o evento do cronômetro Finished, copie e cole todo o conteúdo, destacado enquanto loop abaixo.O código executa um loop para atualizar o valor timeLeft enquanto o cronômetro ainda estiver ativo.

   while myTimer:isRunning() do
   	-- Adicionar +1 garante que a exibição do tempo termine em 1 ao invés de 0.
   	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   	-- Ao não definir o tempo para espera, oferece um looping mais preciso
   	task.wait()
   end

   Ao ser adicionado, o código deve parecer com o exemplo abaixo.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- Adicionar +1 garante que a exibição do tempo termine em 1 ao invés de 0.
   		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   		-- Ao não definir o tempo para espera, oferece um looping mais preciso
   		task.wait()
   	end
   end

3. Execute o jogo com o mínimo de jogadores. Verifique se o texto de status é exibido:

   • A quantidade correta de jogadores iniciais. Lembre-se, esse número não mudará até que seja adicionado código adicional em uma lição futura.
   • O tempo diminui a cada segundo até parar em 1.

Scripts concluídos

Abaixo estão scripts concluídos para verificar duas vezes o seu trabalho.

scriptdo Gerenciador de Jogo

-- Serviços
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

scriptdo Gerenciador de Exibição

local DisplayManager = {}

-- Serviços
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Exibir valores usados para atualizar a Interface gráfica do usuáriodo Jogador
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

-- Funções Locais
local function updateRoundStatus()
	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
end

-- Funções de Módulo
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

scriptdo Gerenciador de Partida

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

-- Funções Locais
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
		-- Adicionar +1 garante que a exibição do tempo termine em 1 ao invés de 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Ao não definir o tempo para espera, oferece um looping mais preciso
		task.wait()
	end
end

-- Funções de Módulo
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

scriptde exibição de status

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