Erstellen einer grafische Benutzeroberfläche | Dokumentation

Derzeit befindet sich eine große Menge der Spielinformationen im Ausgabe-Fenster, die für Spieler unsichtbar ist. So können Spieler darüber informiert werden, was im Spiel passiert, und du erstellst eine grafische Benutzeroberfläche (GUI) und kodierst sie.

Informationen mit einer grafische Benutzeroberflächeanzeigen

Für dieses Spiel wird ein Text-Etikett den aktuellen Spielstatus anzeigen, sowie die verbleibende Anzahl der Spieler und Zeit.

Die grafische Benutzeroberflächeeinrichten

Erstellen Sie zuerst ein Bildschirm-GUI-Objekt , um die verschiedenen Text-Elemente zu halten. Wenn der Spieler die Kamera bewegt, bleibt die Bildschirm-GUI im selben Platz auf ihrem Bildschirm.

Um sicherzustellen, dass alle Spieler die gleiche Anzeige sehen, legen Sie die GUI in den StarterGui -Ordner. Beim Spielstart wird dieser Ordner an alle Spieler kopiert.

In dem StarterGUI-Ordner erstellen Sie einen neuen ScreenGUI. Dann in ScreenGUI fügen Sie einen neuen TextLabel namens StatusText hinzu.
Um das Beschriftungzu verschieben, in dem Explorer, wählen Sie StatusText. Dann, in der Ansicht, ziehen Sie das Label, wo Sie es hinziehen möchten. Ihre Zahlen können vom Video abweichen. Das Label kann auch mit den Ankerpunkten an den Ecken resized werden.

Scripting der grafische Benutzeroberfläche

Um Änderungen im Spiel zu반영, müssen Skripte die GUI-Elemente aktualisieren. Zum Instanzwird der SpielStatus, egal ob es eine Pause oder eine aktive Runde ist, in einem StringValue gespeichert und mit lokalen Skripts aktualisiert.

Im Vergleich zu Skripten und Modul-Skripts, die Roblox-Server ausführen, werden lokale Skripte auf dem Gerät eines Spieler:inausgeführt. Sie werden oft verwendet, um Codes für Benutzeroberflächenelemente wie Timer oder Spieler-Eingaben zu erstellen, wie Maus- oder Tastaturaktionen.

Script einrichten

Das StatusDisplay-Skript wird verwendet, um die Benutzeroberfläche des Spieler:inimmer zu aktualisieren, wenn der Spielzustand sich ändert.

In ReplicatedStorage , erstellen Sie einen Ordner namens DisplayValues. In diesem Ordner fügen Sie einen StringValue namens Status hinzu. Um den Wert später zu testen, geben Sie ihm einen temporären Wert, wie "Willkommen im Kampf!".

Da lokale Skripte nur auf dem Gerät eines Spieler:inausgeführt werden können, 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 hinzu, das StatusDisplay heißt. Skripte, die die GUI betreffen, werden oft mit diesem GUI-Element verbunden.

Öffnen Sie StatusDisplay und definieren Sie die folgenden Variablen für die Verfolgung:

ReplicatedStorage-Dienst
Displaywerte-Ordner
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

Ändern Sie das Text-Etikett

Um den Text in der Beschriftungzu ändern, verwende ein Changed -Ereignis, damit das Text-Feld bei jedem Ändern des Status-Strangs durch ein anderes Skript, das. PL: die Skriptsaktualisiert wird.

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


local textLabel = script.Parent

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

Verbinden Sie die Funktion mit dem Changed-Ereignis.


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

status.Changed:Connect(updateText)

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


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

status.Changed:Connect(updateText)
updateText()

Starten Sie das Spiel und bestätigen Sie, dass Sie den temporären Wert in der Anzeige sehen.

Erstellen des Anzeigemanagers

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

Script einrichten

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

In ServerStorage > ModulScripts , erstellen Sie ein neues Modul-Skript namens DisplayManager. Ändern Sie die Modul-Tabelle, um den Skript-Namen zu entsprechen.

Füge lokale Variablen für die gefolgte ProfileZwecke hinzu: Replicated Storage, DisplayValues-Ordner, Status.


local DisplayManager = {}

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

-- Zeigere Werte, die für die Aktualisierung der grafische Benutzeroberflächeverwendet werden
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

-- Lokale Funktionen

-- Modul-Funktionen

return DisplayManager

Erstellen Sie eine neue Modulfunktion namens updateStatus(), die die Strings im Status-Wert aktualisiert. Andere Skripte können diese Funktion aufrufen.


-- Lokale Funktionen

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

Textstatus aktualisieren

Mit dem Display Manager aufgebaut, kann es in anderen Skripts verwendet werden, um das Beschriftungzu aktualisieren. Als erste Nachricht in der grafische Benutzeroberflächezeigen Sie den Start und das Ende der Pause durch das Skript, das. PL: die Skripts.

In ServerScriptService > GameManager erstellen Sie eine Variable namens displayManager und erfordern Sie das DisplayManager-Modul in ServerStorage.


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

-- Modul-Scripts
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 Wahrheit do- statement, call displayManager > updateStatus() und pass in einer Nachricht über die Wartung 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 des wiederholten Loops für die Pause rufen Sie updateStatus() auf und übergeben Sie eine Zeichenkette, die die Match-Start- und Endzeit ankündigt. Da Sie mit der grafische Benutzeroberflächetesten, löschen Sie die beiden Print-Anweisungen, um die Start- und Endzeit 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

Testen Sie das Spiel mit und und ohne Ihre minimalen Spieler. Die Nachricht sollte gefolgte Profilelesen:
- Ohne die minimalen Spieler: "Waiting for Players".
- Mit den minimalen Spielern: "Get ready".

Troubleshooting-Tipps

Wenn das Text-Etikett die erste Nachricht nicht anzeigt oder immer noch "Etikett" anzeigt, versuchen Sie es mit einer der folgenden Optionen.

Stellen Sie sicher, dass in dem lokalen Skript StatusDisplay updateText() auf der unteren Seite des Skript, das. PL: die Skriptsaufgerufen wird. Dies gewährleistet, dass der Spieler die neuesten Nachrichten erhält.
Überprüfen Sie, ob die Status-String-Werte in ReplicatedStorage sind. Aufgrund der einzigartigen Natur der Client-Server-Beziehungen, wenn es in ServerStorage ist, kann ein lokales Skript es nicht finden.

Match-Status anzeigen

Während eines übereinstimmenwerden zwei Zahlen angezeigt: die verbleibende Anzahl von Spielern und die Zeit. Wenn diese Zahlen sich ändern, ändert sich das Text-Label auch.

Werte und Funktionen einrichten

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

In ReplicatedStorage > DisplayColors erstellen Sie zwei IntColors namens PlayersLeft und TimeLeft.

In DisplayManager fügen Sie Variablen hinzu, um die verbleibenden Spieler- und Zeitwerte zu speichern.


local DisplayManager = {}

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

-- Zeigere Werte, die für die 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")

Erstellen Sie eine lokale Funktion namens updateMatchStatus() . Dann setzen Sie den Wert des Status, 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 Variablen IntValue verbinden Sie updateRoundStatus() mit dem Changed-Ereignis.


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

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

return DisplayManager

Testen Sie noch nicht. Nichts hat die Werte PlayersLeft oder TimeLeft aktualisiert, so dass der Status nicht einmal während einer Runde geändert wird.

Spieler anzeigen

Nächste, füge den Code hinzu, um die Anzahl der Spieler am Beginn eines Spiels anzuzeigen. Die späteren Lektionen aktualisieren den PlayersLeft-Wert, wenn Spieler aus dem Spiel entfernt werden.

In PlayerManager fügen Sie lokale Variablen für ReplicatedStorage-Dienst, DisplayValues-Ordner und PlayersLeft IntValue hinzu.


local PlayerManager = {}

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

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

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

Zeigen Sie die Anfangsspielerzahl, indem Sie den Wert von playersLeft auf die Größe der aktiven Arrayeinstellen.

Dann, in sendPlayersToMatch() , unter der for-Schleife, tippen 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

Anzeigen des Tinners

Denken Sie daran, dass Modul-Skripte verwendet werden, um ähnlichen Codeszu zentralisieren. Da der Timer in MatchManager verfolgt wird, aktualisieren Sie den TimeLeft-Wert mit Funktionen aus dem Skript, das. PL: die Skripts. Der Anzeige-Manager hört auf Änderungen am TimeLeft und aktualisiert den Match-Match mit dem neuen Wert.

In MatchManager erstellen Sie Variablen, um den ReplicatedStorage -Dienst, den DisplayValues -Ordner und den TimeLeft -Wert zu speichern.


local MatchManager = {}

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

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

Finden Sie die Funktion startTimer(). Nach dem Ereignis Finished des Timers kopieren und fügen Sie den gesamten, hervorgehobenen Code in die Zwischenablage ein. Der Code läuft einen Loop aus, um den Wert Finished des Temporisers aktualisiert zu halten, solange der Timer immer noch aktiv ist.


while myTimer:isRunning() do
	-- Durch das Hinzufügen von +1 wird sichergestellt, dass der Timer-Anzeige 1 statt 0 endet.
	timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
	-- Durch das Festlegen der Wartezeit bietet es eine präzisere Loop-Funktion
	task.wait()
end

Wenn hinzugefügt, sollte der Code wie das Beispiel unten aussehen.


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

	while myTimer:isRunning() do
		-- Durch das Hinzufügen von +1 wird sichergestellt, dass der Timer-Anzeige 1 statt 0 endet.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Durch das Festlegen der Wartezeit bietet es eine präzisere Loop-Funktion
		task.wait()
	end
end

Führen Sie das Spiel mit den minimalen Spielern aus. Stellen Sie sicher, dass der Status-Text angezeigt wird:
- Die korrekte Anzahl von Startspielern. Denken Sie daran, diese Zahl wird sich nicht ändern, bis zusätzlicher Code in einer zukünftigen Lektion hinzugefügt wird.
- Die Zeit sinkt jede Sekunde, bis sie bei 1 stoppt.

Abgeschlossene Skripte

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

GameManager-Skript


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

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

DisplayManager-Skript


local DisplayManager = {}

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

-- Zeigere Werte, die für die 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

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

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

return DisplayManager

MatchManager-Skript


local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Modul-Scripts
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
		-- Durch das Hinzufügen von +1 wird sichergestellt, dass der Timer-Anzeige 1 statt 0 endet.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Durch das Festlegen der Wartezeit bietet es eine präzisere Loop-Funktion
		task.wait()
	end
end

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

matchStart.Event:Connect(startTimer)

return MatchManager

StatusDisplay-Skript


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