Erstelle eine grafische Benutzeroberfläche

Im Moment ist ein Großteil der Spielinformationen im Ausgabe-Fenster, für Spieler unsichtbar.Damit Spieler über das Geschehen im Spiel informiert werden können, erstellen Sie eine grafische Benutzeroberfläche (GUI) und kodieren Sie sie.

Informationen mit einer grafische Benutzeroberflächeanzeigen

Für dieses Spiel wird ein Text-Label den aktuellen Spielstatus sowie die verbleibende Spieleranzahl und -zeit anzeigen.

grafische Benutzeroberflächeeinrichten

Erstellen Sie zuerst ein Bildschirm-GUI -Objekt, um die verschiedenen Text元素 zu halten.Wenn der Spieler die Kamera bewegt, bleibt die Bildschirm-GUI am selben Ort auf seinem Bildschirm.

Um sicherzustellen, dass alle Spieler dasselbe Display sehen, platzieren Sie die GUI im StarterGUI -Ordner. Beim Spielstart wird dieser Ordner für alle Spieler kopiert.

Erstellen Sie im StarterGUI-Ordner ein neues ScreenGUI. Dann fügen Sie in ScreenGUI ein neues Textlabel namens StatusText hinzu.
Um das Beschriftungzu verschieben, wählen Sie im Explorer den Statustext aus.Dann ziehe im Ansichtdas Label dort hin, wo du es gerne hättest.Deine Zahlen können vom Video abweichen.Das Etikett kann auch mit den Ankerpunkten an den Ecken skaliert werden.

Skripte die grafische Benutzeroberfläche

Um Änderungen im Spiel widerzuspiegeln, müssen Skripte die GUI-Elemente aktualisieren.Zum Instanzwird der Status, ob es sich um eine Pause oder eine aktive Runde handelt, in einem StringValue gespeichert und mit lokalen Skripten aktualisiert.

Im Vergleich zu Skripten und Modulskripten, die Roblox-Server ausführen, laufen lokale Skripte auf dem Gerät eines Spieler:in.Sie werden oft zum Codieren von GUI-Elementen wie Timer oder Spieler-Eingabe verwendet, wie Maus- oder Tastaturn操作.

Konfiguriere das Skript, das. PL: die Skripts

Das Statusdisplay-Skript wird verwendet, um die GUI des Spieler:inzu aktualisieren, wann immer sich der Spielstatus ändert.

In ReplicatedStorage erstelle einen Ordner mit dem Namen DisplayValues.In diesem Ordner füge einen StringValue mit dem Namen Status hinzu.Um den Wert später zu testen, gib ihm einen vorübergehenden Wert, wie "Willkommen zum Kampf!".

Da lokale Skripte nur auf dem Gerät eines Spieler:inausgeführt werden, können sie nicht in Server-Ordnern wie ServerStorage gespeichert werden.ReplicatedStorage ist ein Ordner, der sowohl für den Client (Gerät) als auch für den Server verfügbar ist.
In StarterGUI > ScreenGUI > Status fügen Sie ein neues lokales Skript namens StatusDisplay hinzu. Skripte, die die GUI beeinflussen, werden oft auf dieses GUI-Element übertragen.

Öffne das Statusdisplay und definiere die folgenden Variablen für die Folge:

ReplicatedStorage-Service
Ordner "Displaywerte"
Status StringValue

TextLabel - verwende script.Parent .


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

local textLabel = script.Parent

Ändere das Beschriftung

Um den Text im Beschriftungzu ändern, verwende ein Änderungsereignis, so dass jedes Mal, wenn der Statusstring durch ein anderes Skript, das. PL: die Skriptsgeändert wird, das Textfeld aktualisiert wird.

Code eine neue Funktion namens updateText(). In dieser Funktion wird die Text-Eigenschaft von textLabel auf status.Value gesetzt.


local textLabel = script.Parent

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

Verbinde die Funktion mit dem geänderten Ereignis.


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

status.Changed:Connect(updateText)

Also sehen Spieler den neuesten Status, wenn sie das Spiel starten, führen updateText() am Ende des Skript, das. PL: die Skriptsaus.


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

status.Changed:Connect(updateText)
updateText()

Führe das Spiel aus und bestätige, dass du den vorübergehenden Wert im Display siehst.

Erstellen des Display-Managers

Während eines Spiels muss das Text-Label Informationen von GameManager, MatchManager und möglicherweise anderen Skripten erhalten.Also können diese verschiedenen Skripte den Text-Label aktualisieren, wenn nötig, ein Modul-Skript namens DisplayManager erstellen.

Konfiguriere das Skript, das. PL: die Skripts

Da der DisplayManager mit anderen Skripten kommunizieren muss, wird es ein Skript, das. PL: die Skriptssein.

In ServerStorage > ModuleScripts erstelle ein neues Modulskript mit dem Namen DisplayManager.Benenne den Modultisch um, um den Skriptnamen zu entsprechen.

Füge lokale Variablen für das gefolgte Profilehinzu: Replicated Storage, DisplayValues-Ordner, Status.


local DisplayManager = {}

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

-- Anzeigewerte, die zur Aktualisierung der grafische Benutzeroberflächeverwendet werden
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

-- Lokale Funktionen

-- Modulfunktionen

return DisplayManager

Erstellen Sie eine neue Modulfunktion namens updateStatus(), die den String im Statuswert aktualisiert. Andere Skripte können diese Funktion aufrufen.


-- Lokale Funktionen

-- Modulfunktionen
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

Aktualisieren Sie den Status

Mit dem Display-Manager eingerichtet, kann er in anderen Skripten verwendet werden, um die Beschriftungzu aktualisieren.Als erste Nachricht in der grafische Benutzeroberflächezeige den Beginn und das Ende der Pause durch das Skript, das. PL: die Skripts.

In ServerScriptService > GameManager erstellt eine Variable mit dem Namen displayManager und erfordert das DisplayManager-Modul in ServerStorage.


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

-- Modul-Skripte
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

Als die erste Zeile nach der While-true-Anweisung rufe displayManager > updateStatus() auf und sende eine Nachricht über das Warten auf Spieler.


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

Nach dem Ende der Wiederholungsschleife für die Pause rufe updateStatus() an und gib einen String ein, der die Übersetzung des Spiels ankündigt.Da du mit der grafische Benutzeroberflächetesten wirst, lösche die beiden Druckausdrücke, um den Beginn und das Ende der Pause zu notieren.


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

Teste das Spiel mit und ohne deine mindestens Spieler. Die Nachricht sollte gefolgte Profilelesen:
- Ohne die minimalen Spieler: "Waiting for Players" .
- Mit der minimalen Anzahl von Spielern: "Get ready" .

Problemlösungstipps

An dieser Stelle, wenn das Textfeld die erste Nachricht nicht anzeigt oder immer noch "Label" anzeigt, versuchen Sie eines der folgenden Optionen.

Stellen Sie sicher, dass im Statusdisplay-lokalen Skript updateText() am Ende des Skript, das. PL: die Skriptsaufgerufen wird.Dies gewährleistet, dass der Spieler die neueste Nachricht erhält.
Überprüfen Sie, dass der Status StringValue in ReplicatedStorage ist.Aufgrund der einzigartigen Art der Client-Server-Beziehungen kann ein lokales Skript, wenn es in ServerStorage ist, es nicht finden.

Zeige den Statusan

Während eines übereinstimmenwird die GUI zwei Zahlen anzeigen: verbleibende Spieleranzahl und Zeit. Wenn sich diese Zahlen ändern, ändert sich auch das Text-Label.

Werte und Funktionen einrichten

IntValues werden verwendet, um die Spieleranzahl und die verbleibende Zeit zu speichern.

In ReplicatedStorage > DisplayValues erstellen Sie zwei IntValues mit dem Namen PlayersLeft und TimeLeft.

Füge im DisplayManager Variablen hinzu, um die übrigen Spieler und die verbleibende Zeitwerte zu speichern.


local DisplayManager = {}

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

-- Anzeigewerte, die zur Aktualisierung der grafische Benutzeroberflächeverwendet werden
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

Erstelle eine lokale Funktion mit dem Namen updateMatchStatus(). Dann lege den Wert des Status fest, um die Anzahl der verbleibenden Spieler und die verbleibende Zeit anzuzeigen.


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

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

Für beide IntValue-Variablen verbinden Sie updateRoundStatus() mit dem Änderungsereignis.


-- Modulfunktionen
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Teste noch nicht. Nichts hat die Werte von PlayersLeft oder TimeLeft aktualisiert, so dass der Status nicht geändert wird, sobald eine Runde beginnt.

Spieler anzeigen

Füge als Nächstes den Code hinzu, um die Anzahl der Spieler am Beginn eines Spiels anzuzeigen.Spätere Lektionen aktualisieren den Wert von PlayersLeft, wenn Spieler aus dem Spiel eliminiert werden.

Füge in PlayerManager lokale Variablen für den ReplicatedStorage-Service, die DisplayValues-Ordner und die IntValue von PlayersLeft hinzu.


local PlayerManager = {}

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

-- Kartenvariablen
local lobbySpawn = workspace.Lobby.StartSpawn
local arenaMap = workspace.Arena
local spawnLocations = arenaMap.SpawnLocations

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

Zeige die Anfangszähleranzahl, indem du den Wert von playersLeft auf die Größe des aktiven Spielers阵列 festlegst.

Dann, in sendPlayersToMatch() , unter der for-Schleife, geben Sie eingeben: 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

Zeige den Timer an

Denken Sie daran, dass Modulskripte verwendet werden, um ähnlichen Codeszu standardisieren.Da der Timer im MatchManager verfolgt wird, aktualisieren Sie den TimeLeft-Wert mit Funktionen aus dem Skript, das. PL: die Skripts.Der Anzeigemanager hört auf Änderungen an TimeLeft und aktualisiert, um dem neuen Wert zu entsprechen.

Erstellen Sie in MatchManager Variablen, um den ReplicatedStorage -Dienst, die DisplayValues-Ordner und den TimeLeft-Wert zu speichern.


local MatchManager = {}

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

-- Modul-Skripte
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

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

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

local myTimer = timer.new()

Finde die startTimer()-Funktion. Nach dem Ereignis des Tasters Finished kopieren und einfügen Sie das Ganze, das hervorgehoben wurde, während der Schleife unten.Der Code führt eine Schleife aus, um den Wert timeLeft zu aktualisieren, solange der Timer noch aktiv ist.


while myTimer:isRunning() do
	-- Das Hinzufügen von +1 stellt sicher, dass die Timeranzeige bei 1 statt bei 0 endet.
	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
	-- Durch das Nicht festlegen der Zeit für die Wartezeit bietet es genauere Schleifen
	task.wait()
end

Wenn er hinzugefügt wird, sollte der Code wie die Probe unten aussehen.


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

	while myTimer:isRunning() do
		-- Das Hinzufügen von +1 stellt sicher, dass die Timeranzeige bei 1 statt bei 0 endet.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Durch das Nicht festlegen der Zeit für die Wartezeit bietet es genauere Schleifen
		task.wait()
	end
end

Führe das Spiel mit der minimalen Anzahl von Spielern aus. Überprüfe, ob der Statustext angezeigt wird:
- Die korrekte Anzahl der Startspieler. Denke daran, dass sich diese Zahl nicht ändern wird, bis zusätzlicher Code in einer zukünftigen Lektion hinzugefügt wird.
- Die Zeit sinkt jede Sekunde, bis sie bei 1 stoppt.

Abgeschlossene Skripte

Im Folgenden sind abgeschlossene Skripte, um deine Arbeit zu überprüfen.

Skript, das. PL: die Skripts


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

-- Modul-Skripte
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

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

Skript, das. PL: die Skripts


local DisplayManager = {}

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

-- Anzeigewerte, die zur Aktualisierung der grafische Benutzeroberflächeverwendet werden
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

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

-- Modulfunktionen
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Skript, das. PL: die Skripts


local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Modul-Skripte
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

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

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

local myTimer = timer.new()

-- Lokale Funktionen
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
		-- Das Hinzufügen von +1 stellt sicher, dass die Timeranzeige bei 1 statt bei 0 endet.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Durch das Nicht festlegen der Zeit für die Wartezeit bietet es genauere Schleifen
		task.wait()
	end
end

-- Modulfunktionen
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Skript, das. PL: die Skripts


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

Auf dieser Seite