Creazione di un GUI or Intefaccia grafica utente

Al momento, gran parte delle informazioni sul gioco è attualmente nella finestra di uscita, invisibile ai giocatori. Quindi i giocatori possono essere informati su ciò che sta succedendo nel Gioco, creerai un'interfaccia utente grafica (GUI or Intefaccia grafica utente) e lo codificherai.

Visualizzazione delle informazioni con un GUI or Intefaccia grafica utente

Per questo gioco, un'etichetta di testo mostrerà lo stato del gioco attuale nonché il numero di giocatori rimanenti e il tempo.

Configurazione dell'GUI or Intefaccia grafica utentegrafica utente

Prima, crea un oggetto GUI della schermata per contenere i diversi elementi di testo. Quando il giocatore muove la Telecamera, la GUI della schermata rimane allo stesso posto sulla loro schermata.

Per assicurarti che tutti i giocatori vedano lo stesso display, posiziona il GUI nella cartella StarterGui . Alla fine del gioco, questa cartella viene copiata a tutti i giocatori.

1. Nella cartella StarterGUI, crea una nuova GUI di schermo. Quindi in GUI di schermo, aggiungi un nuovo TextLabel chiamato StatusText.

   

2. Per spostare l'Etichetta, nell'Explorer, seleziona StatusText. Quindi, nella vista del gioco, trascina l'etichetta dove vuoi che sia. I tuoi numeri possono differire dal video. L'etichetta può anche essere ridimensionata utilizzando i punti di ancoraggio sulle angolazioni.

Scripting dell'interfaccia grafica utente

Per riflettere le modifiche nel Gioco, gli script dovranno aggiornare gli elementi GUI. Ad esempio, lo Statodel gioco, che sia un intervallo o un round attivo, sarà memorizzato in un StringValue e aggiornato utilizzando gli script locali.

Configurazione dello script

Lo script StatusDisplay sarà utilizzato per aggiornare l'interfaccia utente del Giocatoreogni volta che lo stato del gioco cambia.

1. In ReplicatedStorage , crea una cartella chiamata DisplayColors. In that cartella, add a StringValue named Status. Per testare il valore in seguito, give it a temporary value, come "Welcome to the Battle!".

   

   Poiché gli script locali vengono eseguiti solo sul Dispositivodi un Giocatore, non possono essere memorizzati nei cartelli del server come ServerStorage. ReplicatedStorage è un cartello che è disponibile sia per il client (Dispositivo) che per il Server.

2. In StarterGui > ScreenGUI > Status, aggiungi uno script locale chiamato StatusDisplay. Gli script che influenzano l'interfaccia grafica sono spesso parented a quel GUI elemento.

   

3. Apriamo StatusDisplay e definiamo le seguenti variabili per il Seguire:

   • ReplicatedStorage servizio

   • Cartella DisplayValues

   • Valore di stato

   • TextLabel - usa script.Parent .

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

Cambiare l'etichetta del testo

Per cambiare il testo nell'Etichetta, usa un evento cambiato in modo che ogni volta che lo stato della richiesta viene cambiato da uno script, l'etichetta del testo sarà aggiornata.

1. Codice una nuova funzione chiamata updateText() . In quella funzione, imposta la proprietà di testo di textLabel a status.Value .

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

2. Connetti la funzione all'evento Changed.

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

3. In modo che i giocatori vedano lo stato più recente quando si avvia il Gioco, esegui updateText() alla fine dello script.

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

4. Esegui il gioco e conferma che vedi il valore temporaneo nell' Display.

   

Creazione del Manager Display

Durante una Gioco, l'etichetta di testo dovrà ottenere informazioni da GameManager, MatchManager e forse da altri script. In modo che questi diversi script possano aggiornare l'etichetta di testo quando necessario, creare uno script di modulo chiamato DisplayManager.

Configurazione dello script

Poiché DisplayManager deve comunicare con altri script, sarà uno script del modulo.

1. In ServerStorage > ModuleScripts , crea un nuovo script del modulo chiamato DisplayManager. Rinomina la tabella del modulo per corrispondere al nome dello script.

2. Aggiungi variabili locali per il Seguendo: Replicated Storage, DisplayValues folder, Status.

   local DisplayManager = {}
   
   -- Servizi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Visualizza i valori utilizzati per aggiornare l'GUI or Intefaccia grafica utenteutente del giocatore
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   
   -- Funzioni locali
   
   -- Funzioni del modulo
   
   return DisplayManager

3. Crea una nuova funzione del modulo chiamata updateStatus() che aggiorna la stringa nel valore Stato. Altri script potranno chiamare questa funzione.

   -- Funzioni locali
   
   -- Funzioni del modulo
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end

Aggiornamento dello stato del testo

Con il Manager Display impostato, può essere utilizzato in altri script per aggiornare il GUI text Etichetta. Come il primo messaggio nella GUI or Intefaccia grafica utente, mostra il start e end of the intermission attraverso lo script GameManager .

1. In ServerScriptService > GameManager, crea una variabile chiamata displayManager e richiedi il modulo DisplayManager in ServerStorage.

   -- Servizi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local ServerStorage = game:GetService("ServerStorage")
   local Players = game:GetService("Players")
   
   -- Script del modulo
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

2. Come la prima riga dopo la dichiarazione while true , chiama displayManager > updateStatus() e passa in un messaggio sulla attesa dei giocatori.

   -- Eventi
   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. Dopo la fine del loop di ripetizione per l'interruzione, chiama updateStatus() e passa in una stringa che annuncia l'inizio e la fine dell'interruzione. Poiché stai testando con la GUI or Intefaccia grafica utente, elimina le due dichiarazioni di stampa per notare l'inizio e la fine dell'interruzione.

   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. Prova il gioco con e senza i tuoi giocatori minori. Il messaggio dovrebbe leggere il Seguendo:

   • Senza i giocatori minori: "Waiting for Players" .
   • Con i giocatori minimi: "Get ready" .

Risolvere i problemi

A questo punto, se l'etichetta del testo non visualizza il primo Messaggio, o visualizza ancora "Etichetta", prova uno dei seguenti sotto.

• Assicurati che nel script locale StatusDisplay che updateText() sia chiamato in fondo dello script. Ciò garantisce che il giocatore ottenga il Messaggiopiù recente.
• Controlla che il valore di stato della stringa sia in ReplicatedStorage. A causa della natura unica delle relazioni client-server, se è in ServerStorage, uno script locale non potrà trovarlo.

Visualizzazione dello stato della partita

Durante una Corrisponde, l'interfaccia utente visualizzerà due numeri: il numero di giocatori rimanenti e il tempo. Man mano che questi numeri cambiano, l'etichetta del testo cambierà anche.

Configurazione dei valori e delle funzioni

IntValues verrà utilizzato per memorizzare il numero di giocatori e il tempo rimanente.

1. In ReplicatedStorage > DisplayValues, crea due IntValues chiamati PlayersLeft e TimeLeft.

   

2. In DisplayManager, aggiungi variabili per memorizzare i valori a sinistra e il tempo a sinistra.

   local DisplayManager = {}
   
   -- Servizi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Visualizza i valori utilizzati per aggiornare l'GUI or Intefaccia grafica utenteutente del giocatore
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")

3. Crea una funzione locale chiamata updateMatchStatus() . Quindi, imposta il valore dello stato per visualizzare il numero di giocatori rimasti e il tempo rimanente.

   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   -- Funzioni locali
   local function updateRoundStatus()
   	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
   end

4. Per entrambe le variabili IntValue , connect updateRoundStatus() all'evento Changed .

   -- Funzioni del modulo
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end
   
   playersLeft.Changed:Connect(updateRoundStatus)
   timeLeft.Changed:Connect(updateRoundStatus)
   
   return DisplayManager

   Non testare ancora. Nulla ha aggiornato i valori PlayersLeft o TimeLeft, quindi lo stato non cambierà una volta che inizia una partita.

Visualizzazione dei giocatori

Successivamente, aggiungi il codice per visualizzare il numero di giocatori all'inizio di un Gioco. Le lezioni successive aggiungeranno il valore PlayersLeft mentre i giocatori vengono eliminati dal Gioco.

1. In PlayerManager, aggiungi variabili locali per il servizio ReplicatedStorage, la cartella DisplayColors e PlayersLeft IntValue.

   local PlayerManager = {}
   
   -- Servizi
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Variabili di mappa
   local lobbySpawn = workspace.Lobby.StartSpawn
   local arenaMap = workspace.Arena
   local spawnLocations = arenaMap.SpawnLocations
   
   -- Valori
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")

2. Mostra il numero di giocatori iniziali impostando il valore di playersLeft alla dimensione dell' vettoredei giocatori attivi.

   Quindi, in sendPlayersToMatch() , sotto il for loop, inserisci / scrivi: 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

Visualizzazione del timer

Ricorda che gli script del modulo vengono utilizzati per centralizzare il codice simile. Poiché il timer è tracciato in MatchManager, aggiorna il valore TimeLeft utilizzando funzioni dal script Timer. Il gestore di visualizzazione ascolterà le modifiche al TimeLeft e aggiunterà il nuovo valore.

1. In MatchManager, crea variabili per memorizzare il servizio ReplicatedStorage , la cartella DisplayValues e il valore TimeLeft .

   local MatchManager = {}
   
   -- Servizi
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Script del modulo
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local timer = require(moduleScripts:WaitForChild("Timer"))
   
   -- Eventi
   local events = ServerStorage:WaitForChild("Events")
   local matchStart = events:WaitForChild("MatchStart")
   
   -- Valori
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   local myTimer = timer.new()

2. Trova la funzione startTimer(). Dopo l'evento Finished del timer, copia e pasta l'intero, evidenziato mentre si esegue il loop sotto. Il codice esegue un loop per aggiornare il valore 1>timeLeft1> come long as il timer è ancora attivo.

   while myTimer:isRunning() do
   	-- L'aggiunta di +1 assicura che il timer finisca a 1 invece di 0.
   	timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
   	-- Impostando il tempo di attesa, offre un looping più preciso
   	task.wait()
   end

   Quando viene aggiunto, il codice dovrebbe assomigliare all'esempio seguente.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- L'aggiunta di +1 assicura che il timer finisca a 1 invece di 0.
   		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
   		-- Impostando il tempo di attesa, offre un looping più preciso
   		task.wait()
   	end
   end

3. Esegui il gioco con i giocatori minori. Controlla che il testo di stato sia visualizzato:

   • La quantità corretta di giocatori di partenza. Ricorda, questo numero non cambierà fino a quando non verrà aggiunto ulteriore codice in un'ulteriore lezione.
   • Il tempo cala ogni secondo fino a quando non si ferma a 1.

Script completati

Di seguito sono gli script completati per il doppio controllo del tuo lavoro.

Script del GameManager

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

-- Script del modulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

-- Eventi
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 del DisplayManager

local DisplayManager = {}

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

-- Visualizza i valori utilizzati per aggiornare l'GUI or Intefaccia grafica utenteutente del giocatore
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

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

-- Funzioni del modulo
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Script del MatchManager

local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Script del modulo
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

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

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

local myTimer = timer.new()

-- Funzioni locali
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
		-- L'aggiunta di +1 assicura che il timer finisca a 1 invece di 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Impostando il tempo di attesa, offre un looping più preciso
		task.wait()
	end
end

-- Funzioni del modulo
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Script StatusDisplay

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