Créer une interface utilisateur graphique | Documentation

En ce moment, une grande partie de l'information sur le jeu est actuellement dans la fenêtre de sortie, invisible pour les joueurs. Ainsi, les joueurs peuvent être informés de ce qui se passe dans le jeu, vous créerez une interface graphique utilisateur (interface utilisateur graphique) et le coderez.

Afficher des informations avec une interface utilisateur graphique

Pour ce jeu, une étiquette de texte affichera le statut de jeu actuel ainsi que le nombre de joueurs restant et le temps.

Configurer l'interface interface utilisateur graphique

Tout d'abord, créez un Objet de gui de l'écran pour contenir les différents éléments de texte. Lorsque le joueur déplace la caméra, l'interface de gui de l'écran reste dans le même endroit sur leur écran.

Pour vous assurer que tous les joueurs voient le même affichage, placez le GUI dans le dossier StarterGui . Lors du lancement du jeu, ce dossier est copié à tous les joueurs.

Dans le dossier StarterGUI, créez un nouveau ScreenGUI. Puis dans ScreenGUI, ajoutez un nouveau TextLabel nommé StatusText.
Pour déplacer l'étiquette, dans l'Explorer, sélectionnez Statut de texte. Puis, dans la voirdu jeu, faites glisser l'étiquette où vous le souhaitez. Vos numéros peuvent varier de la vidéo. L'étiquette peut également être redimensionnée en utilisant les points d'ancrage sur les coins.

Scripting de l'interface interface utilisateur graphique

Pour refléter les changements dans le jeu, les scripts devront mettre à jour les éléments de l'interface graphique. Par instance, le statut du jeu, qu'il s'agisse d'une intermission ou d'une manche active, sera stocké dans une valeur de chaîne et mis à jour à l'aide de scripts locaux.

Par rapport aux scripts et aux scripts de module qui exécutent les serveurs Roblox, les scripts locaux s'exécutent sur l'appareil d'un joueur. Ils sont souvent utilisés pour coder des éléments GUI comme le minuteur ou l'entrée du joueur, comme les actions de souris ou de clavier.

Configurer le script

Le script StatusDisplay sera utilisé pour mettre à jour le GUI du joueur chaque fois que le statut du jeu change.

Dans ReplicatedStorage , créez un dossier nommé DisplayValues. Dans ce dossier, ajoutez une valeur de chaîne nommée Statut. Pour tester la valeur plus tard, donnez-lui une valeur temporaire, comme « Bienvenue dans la bataille ! ».

Comme les scripts locaux ne s'exécutent que sur le périphérique d'un appareil, ils ne peuvent pas être stockés dans les dossiers du serveur comme ServerStorage. ReplicatedStorage est un dossier qui est disponible à la fois pour le client (appareil) et le serveur.
Dans StarterGui > ScreenGUI > Status, ajoutez un nouveau script local nommé StatusDisplay. Les scripts qui affectent le GUI sont souvent parentés à cet élément GUI.

Ouvrez le panneau d'état et définissez les variables suivantes pour la s'abonner:

Service de stockage répliqué
Dossier DisplayValues
Valeur de statut

TextLabel - utilisez script.Parent .


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

local textLabel = script.Parent

Changer l'étiquette de texte

Pour modifier le texte dans l'étiquette, utilisez un événement Changé pour que chaque fois que la chaîne Statut est modifiée par un autre script, la balise de texte sera mise à jour.

Code une nouvelle fonction nommée updateText() . Dans cette fonction, définissez la propriété de texte de textLabel à status.Value .


local textLabel = script.Parent

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

Connectez la fonction à l'événement Changed.


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

status.Changed:Connect(updateText)

Ainsi, les joueurs voient le statut le plus récent lors du démarrage du jeu, exécutez updateText() à la fin du script.


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

status.Changed:Connect(updateText)
updateText()

Exécutez le jeu et confirmez que vous voyez la valeur temporaire dans l'affiche.

Créer le Gestionnaire d'affichage

Pendant une jeu, l'étiquette de texte devra obtenir des informations auprès de GameManager, MatchManager et peut-être d'autres scripts. Ainsi, ces différents scripts peuvent mettre à jour l'étiquette de texte lorsque nécessaire, créer un script de module nommé DisplayManager.

Configurer le script

Comme Manager du Display doit communiquer avec d'autres scripts, il s'agira d'un script de module.

Dans ServerStorage > ModuleScripts , créez un nouveau script de module nommé DisplayManager. Renommez la table du module pour correspondre au nom du script.

Ajoutez des variables locales pour les éléments suivre: ReplicatedStorage, dossier DisplayValues, Statut.


local DisplayManager = {}

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

-- Afficher les valeurs utilisées pour mettre à jour l'interface utilisateur graphiqueutilisateur du joueur
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")

-- Fonctions locales

-- Fonctions de module

return DisplayManager

Créez une nouvelle fonction de module nommée updateStatus() qui met à jour la chaîne dans la valeur Statut. D'autres scripts pourront appeler cette fonction.


-- Fonctions locales

-- Fonctions de module
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

Mise à jour du statut du texte

Avec le gestionnaire d'affichage configuré, il peut être utilisé dans d'autres scripts pour mettre à jour l'étiquette de texte de l'interface graphique. En tant que première message dans la interface utilisateur graphique, montrez le début et la fin de l'intermission à travers le script GameManager.

Dans ServerScriptService > GameManager, créez une variable nommée displayManager et exigez le module DisplayManager dans ServerStorage.


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

-- Scripts de module
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

En tant que première ligne après la déclaration while true do , appelez displayManager > updateStatus() et passez un message sur l'attente des joueurs.


-- Événements
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

Après la fin du boucle de répétition pour l'intermission, appelez updateStatus() et passez une chaîne annonçant le début et la fin de l'intermission. Étant donné que vous testerez avec le interface utilisateur graphique, supprimez les deux déclarations d'impression pour noter le début et la fin de l'intermission.


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

Testez le jeu avec et sans vos joueurs minimum. Le message doit lire les suivre:
- Sans les joueurs minimums : "Waiting for Players" .
- Avec les joueurs minimums : "Get ready" .

Conseils de débogage

À ce stade, si l'étiquette de texte ne montre pas le premier message, ou montre toujours « Émetteur », essayez l'un des éléments suivants ci-dessous.

Assurez-vous dans le script local StatusDisplay que updateText() est appelé en bas du script. Cela garantit que le joueur reçoit le message le plus récent.
Vérifiez que la valeur de statut est dans ReplicatedStorage. En raison de la nature unique des relations client-serveur, si elle est dans ServerStorage, un script local ne pourra pas le trouver.

Afficher le statut du match

Pendant un correspondre, le GUI affichera deux numéros : le nombre de joueurs restants et le temps. À mesure que ces numéros changent, l'étiquette de texte changera également.

Définir des valeurs et des fonctions

Les valeurs int seront utilisées pour stocker le nombre de joueurs et le temps restant.

Dans ReplicatedStorage > DisplayValues, créez deux IntValues nommés PlayersLeft et TimeLeft.

Dans DisplayManager, ajoutez des variables pour stocker les valeurs de gauche et le temps restant.


local DisplayManager = {}

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

-- Afficher les valeurs utilisées pour mettre à jour l'interface utilisateur graphiqueutilisateur du joueur
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

Créez une fonction locale nommée updateMatchStatus() . Puis, définissez la valeur du statut pour afficher le nombre de joueurs restants et le temps restant.


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

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

Pour les valeurs de variable int , connectez updateRoundStatus() à l'événement Changed.


-- Fonctions de module
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Ne testez pas encore. Rien n'a mis à jour les valeurs PlayersLeft ou TimeLeft, donc le statut ne sera pas changé une fois le tour commencé.

Afficher les joueurs

Ensuite, ajoutez le code pour afficher le nombre de joueurs au début d'un jeu. Les leçons ultérieures mettront à jour la valeur PlayersLeft lorsque les joueurs sont éliminés du jeu.

Dans PlayerManager, ajoutez des variables locales pour le service ReplicatedStorage, le dossier DisplayValues et le joueur gauche IntValue.


local PlayerManager = {}

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

-- Variables de carte
local lobbySpawn = workspace.Lobby.StartSpawn
local arenaMap = workspace.Arena
local spawnLocations = arenaMap.SpawnLocations

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

Affichez le nombre de joueurs de départ en définissant la valeur de playersLeft au niveau de la taille de l'arrêt des joueurs matrice.

Ensuite, dans sendPlayersToMatch() , sous le for loop, taper: 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

Affichage du minuteur

N'oubliez pas que les scripts de module sont utilisés pour centraliser le code similaire. Étant que le minuteur est suivi dans MatchManager, mettez à jour la valeur TimeLeft en utilisant des fonctions du script Timer. Le gestionnaire d'affichage écoutera les modifications de TimeLeft et mettra à jour pour correspondre à la nouvelle valeur.

Dans MatchManager, créez des variables pour stocker le ReplicatedStorage service, le dossier DisplayValues et la valeur TimeLeft.


local MatchManager = {}

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

-- Scripts de module
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- Événements
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")

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

local myTimer = timer.new()

Trouvez la fonction startTimer(). Après l'événement Finished du timer, copiez et collez tout le texte en surbrillance tout en laissant le code s'exécuter en boucle pour mettre à jour la valeur Finished du curseur tant que le timer est toujours actif.


while myTimer:isRunning() do
	-- Ajouter +1 fait en sorte que l'afficheur de temps s'affiche à 1 au lieu de 0.
	timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
	-- En ne définissant pas le temps d'attente, il offre un meilleur suivi
	task.wait()
end

Lorsqu'il est ajouté, le code devrait ressembler à l'échantillon ci-dessous.


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

	while myTimer:isRunning() do
		-- Ajouter +1 fait en sorte que l'afficheur de temps s'affiche à 1 au lieu de 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- En ne définissant pas le temps d'attente, il offre un meilleur suivi
		task.wait()
	end
end

Exécutez le jeu avec les joueurs minimums. Vérifiez que le texte de statut s'affiche :
- Quantité correcte de joueurs de départ. N'oubliez pas, ce nombre ne changera pas jusqu'à ce que du code supplémentaire soit ajouté dans une leçon future.
- Le temps diminue chaque seconde jusqu'à ce qu'il s'arrête à 1.

Scripts terminés

Ceux-ci sont des scripts terminés pour vérifier vos travaux.

Script de GameManager


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

-- Scripts de module
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

-- Événements
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 DisplayManager


local DisplayManager = {}

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

-- Afficher les valeurs utilisées pour mettre à jour l'interface utilisateur graphiqueutilisateur du joueur
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

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

-- Fonctions de module
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Script de MatchManager


local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Scripts de module
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- Événements
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")
local matchEnd = events:WaitForChild("MatchEnd")

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

local myTimer = timer.new()

-- Fonctions locales
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
		-- Ajouter +1 fait en sorte que l'afficheur de temps s'affiche à 1 au lieu de 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- En ne définissant pas le temps d'attente, il offre un meilleur suivi
		task.wait()
	end
end

-- Fonctions de module
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Script de statut


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