GUI 생성

현재 게임 정보의 대부분은 출력 창에 있으며 플레이어에게는 보이지 않습니다.따라서 플레이어가 게임에서 발생하는 일을 알 수 있도록 그래픽 사용자 인터페이스(GUI)를 만들고 코딩합니다.

GUI로 정보 표시

이 게임의 경우 텍스트 레이블에 현재 게임 상태와 남은 플레이어 수 및 시간이 표시됩니다.

>

>

GUI 설정

먼저, 다른 텍스트 요소를 보유하기 위한 화면 GUI 개체를 생성합니다.플레이어가 카메라를 이동하면 화면 GUI가 화면에서 동일한 위치에 유지됩니다.

모든 플레이어가 동일한 디스플레이를 보도록 하려면 스타터 GUI 폴더에 GUI를 배치하십시오. 게임 시작 시 이 폴더가 모든 플레이어에 복사됩니다.

1. 스타터 GUI 폴더에서 새 스크린 GUI를 생성한 다음, 스크린 GUI에 상태 텍스트라는 새 텍스트 레이블을 추가합니다.

   

2. 레이블을 이동하려면 탐색기에서 상태 텍스트를 선택합니다.그런 다음, 게임 뷰에서 원하는 레이블을 드래그하십시오.비디오와 숫자가 다를 수 있습니다.레이블은 모서리의 앵커 지점을 사용하여 크기를 조정할 수도 있습니다.

GUI 스크립트

게임의 변경 사항을 반영하려면 스크립트가 GUI 요소를 업데이트해야 합니다.예를 인스턴스, 게임 상태(중단 또는 활성 라운드)는 StringValue에 저장되고 로컬 스크립트를 사용하여 업데이트됩니다.

스크립트 설정

상태 표시 스크립트는 게임 상태가 변경될 때마다 플레이어의 GUI를 업데이트하는 데 사용됩니다.

1. In ReplicatedStorage 에서 DisplayValues라는 폴더를 만듭니다.그 폴더에서 상태라는 이름의 StringValue를 추가합니다.나중에 값을 테스트하려면 "Welcome to the Battle!"과 같은 임시 값을 지정하십시오.

   

   로컬 스크립트는 플레이어의 기기실행되므로 ServerStorage와 같은 서버 폴더에 저장할 수 없습니다.ReplicatedStorage는 클라이언트(기기)와 서버 모두에서 사용할 수 있는 폴더입니다.

2. 스타터 GUI > 스크린 GUI > 상태에서 StatusDisplay라는 새로운 로컬 스크립트를 추가하십시오. GUI에 영향을 주는 스크립트는 종종 해당 GUI 요소에 부모가 됩니다.

   

3. 상태 표시를 열고 다음 변수를 따라 팔로우:

   • ReplicatedStorage 서비스

   • 표시 값 폴더

   • 상태 문자열 값

   • 텍스트 레이블 - 사용 script.Parent .

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

텍스트 레이블 변경

레이블의 텍스트를 변경하려면 변경된 이벤트를 사용하여 상태 문자열이 다른 스크립트에 의해 변경될 때마다 텍스트 레이블이 업데이트됩니다.

1. 새로운 함수 updateText() 를 코드로 작성합니다. 해당 함수에서 Text 속성을 textLabel 에서 status.Value 로 설정합니다.

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

2. 함수를 변경된 이벤트에 연결합니다.

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

3. 따라서 플레이어는 게임을 시작할 때 최신 상태를 보고, 스크립트 끝에 updateText()를 실행합니다.

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

4. 게임을 실행하고 디스플레이에 임시 값이 표시되는지 확인합니다.

   

디스플레이 관리자 생성

게임 중에 텍스트 레이블은 GameManager, MatchManager 및 기타 스크립트에서 정보를 가져와야 합니다.따라서 이러한 다양한 스크립트는 필요할 때 텍스트 레이블을 업데이트하고, DisplayManager라는 모듈 스크립트를 만듭니다.

스크립트 설정

표시 관리자가 다른 스크립트와 통신해야 하기 때문에 모듈 스크립트가 될 것입니다.

1. In ServerStorage > ModuleScripts , 디스플레이 관리자라는 새로운 모듈 스크립트를 만듭니다.스크립트 이름에 맞게 모듈 테이블 이름을 변경합니다.

2. 팔로잉대한 로컬 변수 추가: 복제된 스토리지, DisplayValues 폴더, 상태.

   local DisplayManager = {}
   
   -- 서비스
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 플레이어 GUI를 업데이트하는 데 사용되는 값 표시
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   
   -- 로컬 함수
   
   -- 모듈 기능
   
   return DisplayManager

3. 상태 값에 있는 문자열을 업데이트하는 새로운 모듈 함수 updateStatus()를 만들어 다른 스크립트가 이 함수를 호출할 수 있습니다.

   -- 로컬 함수
   
   -- 모듈 기능
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end

텍스트 상태 업데이트

디스플레이 관리자를 설정하면 GUI 텍스트 레이블을 업데이트하기 위해 다른 스크립트에서 사용할 수 있습니다.GUI의 첫 번째 메시지로, GameManager 스크립트를 통해 휴식의 시작과 끝을 표시합니다.

1. In ServerScriptService >게임 매니저에서, 변수 displayManager 이름을 만들고 ServerStorage의 디스플레이 관리자 모듈을 요구합니다.

   -- 서비스
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local ServerStorage = game:GetService("ServerStorage")
   local Players = game:GetService("Players")
   
   -- 모듈 스크립트
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

2. while truedo 문 뒤의 첫 번째 줄 로, displayManager > updateStatus()에 전화하여 플레이어를 기다리는 메시지를 전달합니다.

   -- 이벤트
   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. 중단 시간을 위한 반복 루프가 끝난 후, updateStatus()를 호출하고 매치가 시작되는 것을 알리는 문자열을 전달합니다.GUI로 테스트하므로 휴식의 시작과 끝을 기록하기 위한 두 개의 인쇄 문을 삭제합니다.

   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. 최소 플레이어 수를 사용하여 게임을 테스트 하고 최소 플레이어 수를 사용하지 않고 테스트 하십시오 . 메시지는 팔로잉읽어야 합니다.

   • 최소 플레이어 없이: "Waiting for Players" .
   • 최소 플레이어로: "Get ready" .

문제 해결 팁

이 시점에서 텍스트 레이블에 첫 번째 메시지가 표시되지 않거나 "레이블"이 여전히 표시되는 경우 다음 중 하나를 시도하십시오.

• 상태 표시 로컬 스크립트에서 updateText()가 스크립트 하단에 호출되도록 하세요.이렇게 하면 플레이어가 최신 메시지를 받을 수 있습니다.
• 상태 문자열 값이 ReplicatedStorage에 있는지 확인합니다.클라이언트-서버 관계의 독특한 성질 때문에, ServerStorage에 있으면 로컬 스크립트에서 찾을 수 없습니다.

매치 상태 표시

일치중에 GUI는 두 가지 숫자를 표시합니다: 남은 플레이어 수와 시간. 이 숫자가 변경되면 텍스트 레이블도 변경됩니다.

값과 함수 설정

IntValues는 플레이어 수와 남은 시간을 저장하는 데 사용됩니다.

1. ReplicatedStorage > DisplayValues에서 PlayersLeft와 TimeLeft라는 이름의 IntValues 두 개를 만듭니다.

   

2. DisplayManager에서 플레이어 왼쪽 및 남은 시간 값을 저장하기 위해 변수를 추가합니다.

   local DisplayManager = {}
   
   -- 서비스
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 플레이어 GUI를 업데이트하는 데 사용되는 값 표시
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")

3. 로컬 함수 updateMatchStatus() 를 만들고 상태 값을 설정하여 남은 플레이어 수와 남은 시간을 표시합니다.

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

4. For 둘 다 IntValue 변수, 변경된 이벤트에 updateRoundStatus()합니다.

   -- 모듈 기능
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end
   
   playersLeft.Changed:Connect(updateRoundStatus)
   timeLeft.Changed:Connect(updateRoundStatus)
   
   return DisplayManager

   아직 테스트하지 마십시오. 플레이어 왼쪽 또는 시간 왼쪽 값이 업데이트되지 않았으므로 라운드가 시작되면 상태가 변경되지 않습니다.

플레이어 표시

다음으로, 게임 시작 시 플레이어 수를 표시하는 코드를 추가합니다.나중의 교훈은 플레이어가 게임에서 제거되면서 PlayersLeft 값을 업데이트합니다.

1. PlayerManager에서 ReplicatedStorage 서비스, DisplayValues 폴더 및 PlayersLeft IntValue에 대한 로컬 변수를 추가합니다.

   local PlayerManager = {}
   
   -- 서비스
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 맵 변수
   local lobbySpawn = workspace.Lobby.StartSpawn
   local arenaMap = workspace.Arena
   local spawnLocations = arenaMap.SpawnLocations
   
   -- 값
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")

2. 활성 플레이어 배열의 크기로 playersLeft 값을 설정하여 시작 플레이어 수를 표시합니다.

   그런 다음, sendPlayersToMatch() 에서 for 루프 아래에서 타이프: 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

타이머 표시

모듈 스크립트는 유사한 코드를 중앙화하는 데 사용된다는 점을 기억하십시오.타이머가 MatchManager에서 추적되므로 타이머 스크립트의 함수를 사용하여 TimeLeft 값을 업데이트합니다.디스플레이 관리자는 TimeLeft의 변경 사항을 수신하고 새 값과 일치하도록 업데이트합니다.

1. In MatchManager에서 ReplicatedStorage 서비스, DisplayValues 폴더 및 TimeLeft 값을 저장하기 위한 변수를 만듭니다.

   local MatchManager = {}
   
   -- 서비스
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- 모듈 스크립트
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local timer = require(moduleScripts:WaitForChild("Timer"))
   
   -- 이벤트
   local events = ServerStorage:WaitForChild("Events")
   local matchStart = events:WaitForChild("MatchStart")
   
   -- 값
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   local myTimer = timer.new()

2. startTimer() 함수를 찾으십시오. 타이머의 Finished 후, 아래의 전체를 복사하고 붙여넣으세요, 강조 표시된 동안.코드는 타이머가 여전히 활성인 한 루프를 실행하여 timeLeft 값을 업데이트합니다.

   while myTimer:isRunning() do
   	-- +1을 추가하면 타이머 표시가 0이 아닌 1로 끝나도록 보장합니다.
   	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   	-- 대기 시간을 설정하지 않으면 더 정확한 루프가 제공됩니다
   	task.wait()
   end

   추가되면 코드는 아래 샘플과 같아야 합니다.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- +1을 추가하면 타이머 표시가 0이 아닌 1로 끝나도록 보장합니다.
   		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
   		-- 대기 시간을 설정하지 않으면 더 정확한 루프가 제공됩니다
   		task.wait()
   	end
   end

3. 최소 플레이어로 게임을 실행하십시오. 상태 텍스트가 표시되는지 확인하십시오:

   • 시작 플레이어의 올바른 수량. 미래의 레슨에 추가 코드가 추가될 때까지 이 숫자는 변경되지 않습니다.
   • 1로 줄어들 때까지 매초마다 시간이 감소합니다.

완료된 스크립트

아래는 작업을 확인하기 위한 완료된 스크립트입니다.

게임 관리자 스크립트

-- 서비스
local ServerStorage = game:GetService("ServerStorage")
local Players = game:GetService("Players")

-- 모듈 스크립트
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

-- 이벤트
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 스크립트

local DisplayManager = {}

-- 서비스
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- 플레이어 GUI를 업데이트하는 데 사용되는 값 표시
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

-- 로컬 함수
local function updateRoundStatus()
	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
end

-- 모듈 기능
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

MatchManager 스크립트

local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- 모듈 스크립트
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- 이벤트
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")
local matchEnd = events:WaitForChild("MatchEnd")

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

local myTimer = timer.new()

-- 로컬 함수
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
		-- +1을 추가하면 타이머 표시가 0이 아닌 1로 끝나도록 보장합니다.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- 대기 시간을 설정하지 않으면 더 정확한 루프가 제공됩니다
		task.wait()
	end
end

-- 모듈 기능
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

상태 표시 스크립트

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