Créer une interface interface utilisateur graphique

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

Afficher des informations avec une interface interface utilisateur graphique

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

Configurer l'interface utilisateur graphique

Tout d'abord, créez un objet interface utilisateur écran pour contenir les différents éléments de texte.Lorsque le joueur déplace la caméra, l'interface graphique de l'écran reste au même endroit sur son écran.

Pour garantir que tous les joueurs voient le même affichage, placez l'interface graphique dans le dossier StarterGUI . Lors du démarrage du jeu, ce dossier est copié à tous les joueurs.

Dans le dossier StarterGUI, créez un nouvel écran GUI. Puis dans ScreenGUI, ajoutez une nouvelle étiquette de texte nommée StatusText.
Pour déplacer l'étiquette, dans l'Explorer, sélectionnez TextStatus.Ensuite, dans la voirdu jeu, faites glisser l'étiquette où vous le souhaitez.Vos chiffres peuvent différer de la vidéo.La balise peut également être redimensionnée en utilisant les points d'ancrage sur les coins.

Script le interface utilisateur graphique

Pour refléter les modifications dans le jeu, les scripts devront mettre à jour les éléments de l'interface graphique.Par instance, le statut du jeu, s'il s'agit d'une pause ou d'un tour actif, sera stocké dans une valeur String et sera mis à jour en utilisant des scripts locaux.

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

Configurer le script

Le script StatusDisplay sera utilisé pour mettre à jour l'interface graphique du joueur chaque fois que l'état 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 l'appareil d'un joueur, 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 > Statut, ajoutez un nouveau script local nommé StatusDisplay. Les scripts qui affectent l'interface utilisateur sont souvent liés à cet élément d'interface utilisateur.

Ouvrez l'afficheur d'état et définissez les variables suivantes pour la s'abonner:

Service de stockage répliqué
Dossier valeurs d'affichage
Valeur de chaîne d'état

TextLabel - utiliser 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 Changed chaque fois que la chaîne d'état est modifiée par un autre script, la balise de texte sera mise à jour.

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


local textLabel = script.Parent

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

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


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

Lancez le jeu et confirmez que vous voyez la valeur temporaire dans l'affichage.

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 DisplayManager doit communiquer avec d'autres scripts, ce sera un script de module.

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

Ajouter des variables locales pour les éléments suivre: Stockage répliqué, 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 premier message dans l'interface utilisateur graphique, montre le début et la fin de l'intermission via 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 de la boucle de répétition pour l'intermission, appelez updateStatus() et passez une chaîne annonçant le début du match.Comme vous allez tester avec la 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 ce qui suivre:
- Sans les joueurs minimums : "Waiting for Players" .
- Avec le minimum de joueurs : "Get ready" .

Conseils de dépannage

À ce stade, si la balise de texte ne montre pas le premier message, ou affiche encore « Label », essayez l'une des options suivantes.

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 chaîne de valeur d'état est dans ReplicatedStorage.En raison de la nature unique des relations client-serveur, si c'est dans ServerStorage, un script local ne pourra pas le trouver.

Afficher le statut du match

Pendant un correspondre, l'interface graphique affichera deux nombres : le nombre restant de joueurs et le temps. À mesure que ces nombres 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ées PlayersLeft et TimeLeft.

Dans DisplayManager, ajoutez des variables pour stocker les valeurs des joueurs restants 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(). Ensuite, définissez la valeur de l'état 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 deux variables IntValue , 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 modifié une fois qu'une ronde commence.

Afficher les joueurs

Ensuite, ajoutez le code pour afficher le nombre de joueurs au début d'un jeu.Des 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 la valeur IntValue de PlayersLeft.


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 à la taille de l'matricedes joueurs actifs.

Ensuite, dans sendPlayersToMatch() , sous la boucle for, 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

Afficher la minuterie

Rappelez-vous que les scripts de module sont utilisés pour centraliser un code similaire.Puisque le minuteur est suivi dans MatchManager, mettez à jour la valeur TimeLeft en utilisant les fonctions du script Timer.Le gestionnaire d'affichage écoutera les modifications du TimeLeft et se mettra à jour pour correspondre à la nouvelle valeur.

Dans MatchManager, créez des variables pour stocker le service ReplicatedStorage , 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 du minuteur Finished, copiez et collez l'ensemble, souligné pendant la boucle ci-dessous.Le code exécute une boucle pour mettre à jour la valeur timeLeft tant que le minuteur est toujours actif.


while myTimer:isRunning() do
	-- Ajouter +1 garantit que l'affichage du temps se termine à 1 au lieu de 0.
	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
	-- En ne définissant pas l'heure d'attente, il offre une boucle plus précise
	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 garantit que l'affichage du temps se termine à 1 au lieu de 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- En ne définissant pas l'heure d'attente, il offre une boucle plus précise
		task.wait()
	end
end

Exécutez le jeu avec le minimum de joueurs. Vérifiez que le texte d'état s'affiche :
- Le montant correct de joueurs de départ. N'oubliez pas que 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

Ci-dessous, les scripts terminés pour vérifier à nouveau votre travail.

scriptdu gestionnaire de jeu


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

scriptde 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

scriptde 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 garantit que l'affichage du temps se termine à 1 au lieu de 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- En ne définissant pas l'heure d'attente, il offre une boucle plus précise
		task.wait()
	end
end

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

matchStart.Event:Connect(startTimer)

return MatchManager

scriptd'affichage du 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()

Sur cette page