Stwórz interfejs GUI

Obecnie wiele informacji o grze znajduje się obecnie w oknie wyjścia, niewidoczne dla graczy.W ten sposób gracze mogą być informowani o tym, co dzieje się w grze, stworzysz interfejs użytkownika graficzny (GUI) i skodujesz go.

Wyświetlaj informacje za pomocą interfejsu graficznego

Dla tej gry etykieta tekstowa wyświetli obecny stan gry, a także pozostałą liczbę graczy i czas.

>

>

Ustaw interfejs GUI

Najpierw utwórz obiekt interfejsu ekranowego , aby utrzymać różne elementy tekstowe.Kiedy gracz przesuwa kamerę, interfejs GUI na ekranie pozostaje w tym samym miejscu na ich ekranie.

Aby wszyscy gracze widzieli ten sam wygląd, umieść interfejs GUI w folderze Początkowy GUI . Podczas uruchamiania gry ten folder jest kopiowany do wszystkich graczy.

1. W folderze StarterGUI utwórz nową aplikację ScreenGUI. Następnie w aplikacji ScreenGUI dodaj nową etykietę tekstową o nazwie StatusText.

   

2. Aby przesunąć etykietę, w Explorerze, wybierz StatusText.Następnie, w widoku gry, przeciągnij etykietę, gdzie chcesz.Twoje liczby mogą się różnić od wideo.Etykietę można również zmienić rozmiar za pomocą punktów przyczepienia na krawędziach.

Skryptuj interfejs GUI

Aby odzwierciedlić zmiany w gra, skrypty będą musiały zaktualizować elementy interfejsu.Na instancjastatus gry, czy to przerwa czy aktywna runda, zostanie przechowany w wartości StringValue i zaktualizowany za pomocą lokalnych skryptów.

Ustaw skrypt

Skrypt StatusDisplay zostanie wykorzystany do aktualizowania interfejsu użytkownika gracza za każdym razem, gdy zmienia się stan gry.

1. W ReplicatedStorage , utwórz katalog o nazwie DisplayValues.W tej katalogu dodaj wartość StringValue o nazwie Status.Aby później przetestować wartość, nadaj jej tymczasową wartość, taką jak "Witaj w bitwie!".

   

   Ponieważ lokalne skrypty uruchamiane są tylko na urządzeniegracza, nie mogą być przechowywane w folderach serwerowych, takich jak ServerStorage.ReplicatedStorage to folder, który jest dostępny zarówno dla klienta (urządzenie), jak i serwera.

2. W StarterGUI > ScreenGUI > Status dodaj nowy lokalny skrypt o nazwie StatusDisplay. Skrypty, które wpływają na interfejs, są często powiązane z tym elementem interfejsu.

   

3. Otwórz wyświetlanie statusu i określ następujące zmienne dla obserwować:

   • Usługa ReplicatedStorage

   • Katalog Werteł Wyświetlania

   • Wartość Statusu StringValue

   • Etykieta tekstowa - użyj script.Parent.

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

Zmień etykietę tekstową

Aby zmienić tekst w etykiecie, użyj zmienionego wydarzenia, tak że za każdym razem, gdy sznurek Status zostanie zmieniony przez inny skrypt, etykieta tekstowa zostanie zaktualizowana.

1. Koduj nową funkcję o nazwie updateText(). W tej funkcji ustaw właściwość tekstu textLabel na status.Value.

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

2. Połącz funkcję z zmienionym wydarzeniem.

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

3. Więc gracze widzą najnowszy stan, gdy rozpoczynają grę, uruchamiają updateText() na końcu skryptu.

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

4. Uruchom grę i potwierdź, że widzisz tymczasową wartość na wyświetlaniu.

   

Utwórz menedżera wyświetlania

Podczas graetykieta tekstowa będzie musiała uzyskać informacje od GameManagera, MatchManagera i ewentualnie innych skryptów.Więc te różne skrypty mogą aktualizować etykietę tekstową w razie potrzeby, tworząc skrypt modułu o nazwie DisplayManager.

Ustaw skrypt

Ponieważ DisplayManager musi komunikować się z innymi skryptami, będzie to skrypt modułu.

1. W ServerStorage > ModuleScripts stwórz nowy skrypt modułu o nazwie DisplayManager.Zmień nazwę tabeli modułu, aby pasowała do nazwy skryptu.

2. Dodaj lokalne zmienne dla obserwuje: Replicated Storage, folder DisplayValues, Status.

   local DisplayManager = {}
   
   -- Usługi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Wyświetl wartości używane do aktualizacji interfejsu użytkownika gracza
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   
   -- Lokalne funkcje
   
   -- Funkcje modułu
   
   return DisplayManager

3. Stwórz nową funkcję modułu o nazwie updateStatus(), która aktualizuje ciąg wartości Status. Inne skrypty będą mogły wezwać tę funkcję.

   -- Lokalne funkcje
   
   -- Funkcje modułu
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end

statusstan tekstu

Po skonfigurowaniu menedżera wyświetlania można go używać w innych skryptach do aktualizowania etykiety tekstu interfejsu.Jako pierwsza wiadomość w interfejsie użytkownika, pokaż początek i koniec przerwy za pomocą skryptu GameManager.

1. W ServerScriptService > GameManager stwórz zmienną o nazwie displayManager i wymagaj modułu DisplayManager w ServerStorage.

   -- Usługi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local ServerStorage = game:GetService("ServerStorage")
   local Players = game:GetService("Players")
   
   -- Skrypty modułowe
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

2. Jako pierwsza linia po stwierdzeniu while true do , wezwij displayManager > updateStatus() i przekaż wiadomość o oczekiwaniu na graczy.

   -- Wydarzenia
   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. Po zakończeniu pętla powtórzenia dla przerwy wezwij updateStatus() i przekaż ciąg ogłaszający, że rozpoczyna się mecz.Ponieważ będziesz testować za pomocą interfejsu graficznego, usuń dwie oświadczenia drukujące, aby zauważyć początek i koniec przerwy.

   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. Przetestuj grę z i bez twoich minimalnych graczy. Wiadomość powinna odczytywać obserwuje:

   • Bez minimalnej liczby graczy: "Waiting for Players" .
   • Z minimalną liczbą graczy: "Get ready" .

Wskazówki dotyczące rozwiązywania problemów

W tym momencie, jeśli etykieta tekstowa nie wyświetla pierwszej wiadomość, lub nadal wyświetla "Etykieta", spróbuj jedną z poniższych opcji.

• Upewnij się, że w lokalnym skrypcie StatusDisplay updateText() jest wywołany na dole skryptu.Zapewnia to, że gracz otrzymuje najnowszą wiadomość.
• Sprawdź, czy wartość Status StringValue jest w ReplicatedStorage.Ze względu na unikalną naturę relacji klient-serwer, jeśli jest w ServerStorage, lokalny skrypt nie będzie w stanie go znaleźć.

Wyświetlaj status meczu

Podczas dopasowywaćinterfejs użytkownika wyświetli dwie liczby: pozostałą liczbę graczy i czas. W miarę zmiany tych liczb zmieni się również etykieta tekstowa.

Ustaw wartości i funkcje

Wartości IntValues zostaną wykorzystane do przechowywania liczby graczy i czasu pozostałego.

1. W ReplicatedStorage > DisplayValues utwórz dwie wartości Int nazwane PlayersLeft i TimeLeft.

   

2. W DisplayManager dodaj zmienne, aby przechować wartości pozostałych graczy i pozostały czas.

   local DisplayManager = {}
   
   -- Usługi
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Wyświetl wartości używane do aktualizacji interfejsu użytkownika gracza
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")

3. Stwórz lokalną funkcję o nazwie updateMatchStatus(). Następnie ustaw wartość statusu, aby wyświetlić liczbę pozostałych graczy i czas pozostały.

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

4. Dla obu zmiennych IntValue, połącz updateRoundStatus() z wydarzeniem Zmienionym.

   -- Funkcje modułu
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end
   
   playersLeft.Changed:Connect(updateRoundStatus)
   timeLeft.Changed:Connect(updateRoundStatus)
   
   return DisplayManager

   Nie testuj jeszcze. Nic nie zaktualizowało wartości PlayersLeft lub TimeLeft, więc status nie zostanie zmieniony po rozpoczęciu rundy.

Wyświetlaj graczy

Następnie dodaj kod do wyświetlania liczby graczy na początku gry.Późniejsze lekcje zaktualizują wartość PlayersLeft, gdy gracze zostaną wyeliminowani z gry.

1. W PlayerManager dodaj lokalne zmienne dla usługi ReplicatedStorage, folderu DisplayValues i IntValue IntValue graczyLeft.

   local PlayerManager = {}
   
   -- Usługi
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Zmienne mapy
   local lobbySpawn = workspace.Lobby.StartSpawn
   local arenaMap = workspace.Arena
   local spawnLocations = arenaMap.SpawnLocations
   
   -- Wartości
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")

2. Pokaż liczbę początkowych graczy, ustawiając wartość playersLeft do rozmiaru aktywnej listy graczy.

   Następnie, w sendPlayersToMatch() , pod cyklem for, wpisywać: 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

Wyświetl zegar

Pamiętaj, że skrypty modułu są używane do scentralizowania podobnego kodu.Ponieważ czasomierz jest śledzony w MatchManager, aktualizuj wartość TimeLeft za pomocą funkcji z kryptu Timer.Menadżer wyświetlania będzie słuchał zmian w TimeLeft i zaktualizuje się, aby pasować do nowej wartości.

1. W MatchManager stwórz zmienne, aby przechować usługę ReplicatedStorage , folder DisplayValues i wartość TimeLeft.

   local MatchManager = {}
   
   -- Usługi
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Skrypty modułowe
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local timer = require(moduleScripts:WaitForChild("Timer"))
   
   -- Wydarzenia
   local events = ServerStorage:WaitForChild("Events")
   local matchStart = events:WaitForChild("MatchStart")
   
   -- Wartości
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   local myTimer = timer.new()

2. Znajdź funkcję startTimer() . Po wydarzeniu zegara Finished kopiuj i wklej całe, podświetlone podczas pętla poniżej.Kod wykonuje pętielę, aby aktualizować wartość timeLeft, dopóki czasomierz jest nadal aktywny.

   while myTimer:isRunning() do
   	-- Dodanie +1 sprawia, że wyświetlanie czasu kończy się na 1 zamiast na 0.
   	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   	-- Nie ustawiając czasu oczekiwania, oferuje dokładniejsze pętle
   	task.wait()
   end

   Po dodaniu kod powinien wyglądać jak przykład poniżej.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- Dodanie +1 sprawia, że wyświetlanie czasu kończy się na 1 zamiast na 0.
   		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   		-- Nie ustawiając czasu oczekiwania, oferuje dokładniejsze pętle
   		task.wait()
   	end
   end

3. Uruchom grę z minimalną liczbą graczy. Sprawdź, czy wyświetla się tekst statusu:

   • Poprawna ilość rozpoczynających graczy. Pamiętaj, że ta liczba nie zmieni się, dopóki dodany nie zostanie dodatkowy kod w przyszłej lekcji.
   • Czas zmniejsza się co sekundę, aż się zatrzyma na 1.

Zakończone skrypty

Poniżej są ukończone skrypty do sprawdzenia podwójnego swojej pracy.

Skrypt Menadżera gry

-- Usługi
local ServerStorage = game:GetService("ServerStorage")
local Players = game:GetService("Players")

-- Skrypty modułowe
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

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

Skrypt menedżera wyświetlania

local DisplayManager = {}

-- Usługi
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Wyświetl wartości używane do aktualizacji interfejsu użytkownika gracza
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

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

-- Funkcje modułu
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Skrypt Menadżera meczów

local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Skrypty modułowe
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

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

-- Wartości
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local timeLeft = displayValues:WaitForChild("TimeLeft")

local myTimer = timer.new()

-- Lokalne funkcje
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
		-- Dodanie +1 sprawia, że wyświetlanie czasu kończy się na 1 zamiast na 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Nie ustawiając czasu oczekiwania, oferuje dokładniejsze pętle
		task.wait()
	end
end

-- Funkcje modułu
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

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