Tạo một GUI

Hiện tại, một phần lớn của thông tin trò chơi đang ở Cửa sổ Thoát, không được hiển thị cho người chơi. Vì vậy, người chơi có thể được thông báo về những gì đang xảy ra trong trò chơi, bạn sẽ tạo một giao diện người dùng thông thường (GUI) và lập trình nó.

Hiển thị thông tin với một GUI

Đối với trò chơi này, một nhãn văn bản sẽ hiển thị tình trạng trò chơi hiện tại cũng như số lượng người chơi còn lại và thời gian.

Cài đặt GUI

Đầu tiên, tạo một Screen GUI đối tượng để giữ các thành phần chữ khác nhau. Khi người chơi di chuyển máy ảnh, screen GUI sẽ ở cùng một vị trí trên màn hình.

Để đảm bảo tất cả người chơi thấy cùng một hiển thị, hãy đặt GUI vào thư mục StarterGui . Khi bắt đầu trò chơi, thư mục này sẽ được sao chép cho tất cả người chơi.

1. Trong thư mục StarterGui, tạo một ScreenGUI mới. Sau đó trong ScreenGUI, thêm một TextLabel mới tên là StatusText.

   

2. Để di chuyển nhãn, trong Explorer, hãy chọn StatusText. Sau đó, trong view game, kéo nhãn nơi bạn muốn nó. Số của bạn có thể khác với video. Thẻ cũng có thể được thay đổi kích thước bằng cách sử dụng các điểm dựa trên góc.

Lập trình GUI

Để phản ánh các thay đổi trong trò chơi, các tập lệnh sẽ cần phải cập nhật các thành phần GUI. Ví ví dụ / trường hợp, trạng thái trò chơi, dù là một hiệp đấu hoạt động hay một hiệp đấu đang diễn ra, sẽ được lưu trong một giá trị chuỗi và được cập nhật bằng các tập lệnh địa phương.

Cài đặt Script

Cuộn sách StatusDisplaysẽ được sử dụng để cập nhật GUI của người chơi mỗi khi trạng thái trò chơi thay đổi.

1. Trong ReplicatedStorage , tạo một thư mục tên là DisplayValues. Trong thư mục đó, thêm một giá trị chuỗi tên là Status. Để kiểm tra giá trị sau đó, cho nó một giá trị tạm thời, như "Welcome to the Battle!".

   

   Vì các script local chỉ được thiết lập trên máy tính của người chơi, chúng không thể được lưu vào các thư mục Server như ServerStorage. ReplicatedStorage là một thư mục có sẵn cả cho client (thiết bị) và máy chủ.

2. Trong StarterGui > ScreenGUI > Status, thêm một mô-đun mới tên là StatusDisplay. Các mô-đun ảnh hưởng đến GUI thường được phụ huynh cho mô-đun đó.

   

3. Mở StatusDisplay và định nghĩa các biến sau đây cho theo dõi:

   • Dịch vụ lưu trữ ReplicatedStorage

   • Mục DisplayValues

   • Giá trị dòng chỉnh thể

   • TextLabel - sử dụng script.Parent .

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

Thay đổi nhãn chữ

Để thay đổi văn bản trong nhãn, hãy sử dụng một sự kiện Đã thay đổi để mỗi khi chuỗi Tình trạng được thay đổi bởi một script khác, thì văn bản trong nhãn sẽ được cập nhật.

1. Lập một chức năng mới có tên là updateText() . Trong chức năng đó, set Text property of textLabel to status.Value .

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

2. Kết nối chức năng với sự kiện đã thay đổi.

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

3. Vì vậy, người chơi thấy tình trạng mới nhất đến khi bắt đầu trò chơi, chạy updateText() ở cuối script.

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

4. Chạy trò chơi và xác nhận rằng bạn thấy giá trị tạm thời trong hiển thị.

   

Tạo Quản Lý Hiển Thị

Trong một trò chơi, nhãn chữ cần phải lấy thông tin từ GameManager, MatchManager và có thể là những người khác. Vì vậy, những người khác này có thể cập nhật nhãn chữ khi cần thiết, tạo một mô-đun tên là DisplayManager.

Cài đặt Script

Vì DisplayManager cần phải truyền đạt với các script khác, nó sẽ là một mô-đun script.

1. Trong ServerStorage > ModuleScripts , tạo một script modul mới tên là DisplayManager. Đổi tên bảng modul để phù hợp với tên script.

2. Thêm biến địa phương cho các điều theo dõi: Replicated Storage, DisplayValues夹, Status.

   local DisplayManager = {}
   
   -- Dịch Vụ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Hiển thị giá trị được sử dụng để cập nhật GUI Người chơi
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   
   -- Hàm chức năng địa phương
   
   -- Hàm chức năng
   
   return DisplayManager

3. Tạo một chức năng mới tên là updateStatus() để cập nhật giá trị trong trạng thái. Các script khác sẽ có thể gọi chức năng này.

   -- Hàm chức năng địa phương
   
   -- Hàm chức năng
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end

Cập nhật Tình trạng Văn bản

Với màn hình quản lý được cài đặt, nó có thể được sử dụng trong các script khác để cập nhật nhãn văn bản GUI. Là thông điện thứ nhất trong GUI, hiển thị khởi đầu và kết thúc của gián đoạn qua màn hình GameManager.

1. Trong ServerScriptService > GameManager, tạo một biến tên là displayManager và yêu cầu module DisplayManager ở ServerStorage.

   -- Dịch Vụ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local ServerStorage = game:GetService("ServerStorage")
   local Players = game:GetService("Players")
   
   -- Script Mô-đun
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local roundManager = require(moduleScripts:WaitForChild("RoundManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

2. Là dòng đầu tiên sau khi thực hiện while true do statement , call displayManager > updateStatus() và truyền một thông điệp về việc chờ người chơi.

   -- Sự kiện
   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. Sau khi kết thúc vòng lặp lặp lại cho giải laoim, gọi updateStatus() và truyền một chuỗi báo cáo cho match đang bắt đầu. Vì bạn sẽ đang kiểm tra với GUI, xóa hai dòng in cho ghi nhớ sự bắt đầu và kết thúc của giải laoim.

   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. Thử nghiệm trò chơi với và wo của bạn. Tin nhắn nên đọc như theo dõi:

   • Without the minimum players: "Waiting for Players" .
   • Với những người chơi tối thiểu: "Get ready" .

Mẹo dịch vụ

Tại thời điểm này, nếu nhãn chữ không hiển thị thông tin nhắnđầu tiên hoặc vẫn hiển thị "Label", hãy thử một trong những lựa chọn dưới đây.

• Hãy đảm bảo trong các tập lệnh local StatusDisplay rằng updateText() được gọi ở cuối cùng của tập lệnh. Điều này đảm bảo rằng người chơi nhận được thông tin nhắnmới nhất.
• Kiểm tra dữ liệu tình trạng được đặt trong ReplicatedStorage. Vì tính độc đáo của mối quan hệ client-server, nếu nó ở trong ServerStorage, một script local sẽ không thể tìm thấy nó.

Hiển thị Tình trạng trận đấu

Trong một tương thích, GUI sẽ hiển thị hai số: số lượng người chơi còn lại và thời gian. Khi các số này thay đổi, nhãn văn bản sẽ thay đổi cũng.

Tạo giá trị và chức năng

IntValues sẽ được sử dụng để lưu số lượng người chơi và thời gian còn lại.

1. Trong ReplicatedStorage > DisplayValues, tạo hai IntValues tên PlayersLeft và TimeLeft.

   

2. Trong DisplayManager, thêm biến để lưu giữ giá trị người chơi đã để và thời gian đã để.

   local DisplayManager = {}
   
   -- Dịch Vụ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Hiển thị giá trị được sử dụng để cập nhật GUI Người chơi
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")

3. Tạo một chức năng địa phương có tên là updateMatchStatus() . Sau đó, thiết lập giá trị trạng thái để hiển thị số lượng người chơi còn lại và thời gian còn lại.

   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local status = displayValues:WaitForChild("Status")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   -- Hàm chức năng địa phương
   local function updateRoundStatus()
   	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
   end

4. Đối với cả hai biến IntValue , kết nối updateRoundStatus() với sự kiện đã thay đổi.

   -- Hàm chức năng
   function DisplayManager.updateStatus(newStatus)
   	status.Value = newStatus
   end
   
   playersLeft.Changed:Connect(updateRoundStatus)
   timeLeft.Changed:Connect(updateRoundStatus)
   
   return DisplayManager

   Hãy chưa thử. Không có gì cập nhật giá trị PlayersLeft hoặc TimeLeft, vì vậy trạng thái sẽ không được thay đổi một lần mùa bắt đầu.

Hiển thị Người chơi

Tiếp theo, thêm mã để hiển thị số lượng người chơi ở đầu một trò chơi. Các bài học sau sẽ cập nhật giá trị PlayerLeft khi người chơi được loại bỏ khỏi trò chơi.

1. Trong PlayerManager, thêm biến đổi địa phương cho dịch vụ ReplicatedStorage, thư mục DisplayValues và PlayersLeft IntValue.

   local PlayerManager = {}
   
   -- Dịch Vụ
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Biến map
   local lobbySpawn = workspace.Lobby.StartSpawn
   local arenaMap = workspace.Arena
   local spawnLocations = arenaMap.SpawnLocations
   
   -- Giá trị
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local playersLeft = displayValues:WaitForChild("PlayersLeft")

2. Hiển thị số lượng người chơi bắt đầu bằng cách đặt giá trị của playersLeft lên kích thước của hàng đợi người chơi đang chơi.

   Sau đó, trong sendPlayersToMatch() , dưới for lặp, hệ thống kiểm tra, hãy kiểm tra: 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

Hiển thị đồng hồ bấm giờ

Hãy nhớ rằng các script module được sử dụng để tập trung các mã tương tự. Khi thời gian được theo dõi trong MatchManager, cập nhật giá trị TimeLeft bằng các hàm từ script Timer. Người quản lý hiển thị sẽ lắng nghe các thay đổi về TimeLeft và cập nhật để bù trùng với giá trị mới.

1. Trong MatchManager, tạo các biến để lưu ReplicatedStorage dịch vụ, thư mục DisplayValues và TimeLeft.

   local MatchManager = {}
   
   -- Dịch Vụ
   local ServerStorage = game:GetService("ServerStorage")
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- Script Mô-đun
   local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
   local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
   local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
   local timer = require(moduleScripts:WaitForChild("Timer"))
   
   -- Sự kiện
   local events = ServerStorage:WaitForChild("Events")
   local matchStart = events:WaitForChild("MatchStart")
   
   -- Giá trị
   local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
   local timeLeft = displayValues:WaitForChild("TimeLeft")
   
   local myTimer = timer.new()

2. Tìm chức năng startTimer() . Sau khi có sự kiện Finished của sự kiện timer, sao chép toàn bộ, được Highlight trong khi lặp dưới. Mã chạy một lần lượt để cập nhật giá trị Finished bằng cách kiểm soát thời gian cho đến khi timer v��

   while myTimer:isRunning() do
   	-- Thêm +1 đảm bảo hiển thị thời gian cuối cùng ở 1 thay vì 0.
   	timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
   	-- Bằng cách không thiết lập thời gian chờ, nó cung cấp lặp lại chính xác hơn
   	task.wait()
   end

   Khi được thêm vào, mã nên trông giống như mẫu bên dưới.

   local function startTimer()
   	print("Timer started")
   	myTimer:start(gameSettings.matchDuration)
   	myTimer.finished:Connect(timeUp)
   
   	while myTimer:isRunning() do
   		-- Thêm +1 đảm bảo hiển thị thời gian cuối cùng ở 1 thay vì 0.
   		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
   		-- Bằng cách không thiết lập thời gian chờ, nó cung cấp lặp lại chính xác hơn
   		task.wait()
   	end
   end

3. Chạy trò chơi với những người chơi tối thiểu. Kiểm tra rằng chỉ số textStatus hiển thị:

   • Số lượng người chơi khởi đầu chính xác. Nhớ rằng, con số này sẽ không thay đổi cho đến khi mã bổ sung được thêm vào một bài học tương lai.
   • Thời gian giảm mỗi giây cho đến khi nó dừng lại ở 1.

Các Kịch Bản Đã Hoàn Thành

Dưới đây là các script đã hoàn thành để kiểm tra lại công việc của bạn.

Script GameManager

-- Dịch Vụ
local ServerStorage = game:GetService("ServerStorage")
local Players = game:GetService("Players")

-- Script Mô-đun
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local matchManager = require(moduleScripts:WaitForChild("MatchManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local displayManager = require(moduleScripts:WaitForChild("DisplayManager"))

-- Sự kiện
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

Tập lệnh DisplayManager

local DisplayManager = {}

-- Dịch Vụ
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Hiển thị giá trị được sử dụng để cập nhật GUI Người chơi
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local status = displayValues:WaitForChild("Status")
local playersLeft = displayValues:WaitForChild("PlayersLeft")
local timeLeft = displayValues:WaitForChild("TimeLeft")

-- Hàm chức năng địa phương
local function updateRoundStatus()
	status.Value = "Players Left: " .. playersLeft.Value .. " / Time Left: " .. timeLeft.Value
end

-- Hàm chức năng
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Tập lệnh MatchManager

local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Script Mô-đun
local moduleScripts = ServerStorage:WaitForChild("ModuleScripts")
local playerManager = require(moduleScripts:WaitForChild("PlayerManager"))
local gameSettings = require(moduleScripts:WaitForChild("GameSettings"))
local timer = require(moduleScripts:WaitForChild("Timer"))

-- Sự kiện
local events = ServerStorage:WaitForChild("Events")
local matchStart = events:WaitForChild("MatchStart")
local matchEnd = events:WaitForChild("MatchEnd")

-- Giá trị
local displayValues = ReplicatedStorage:WaitForChild("DisplayValues")
local timeLeft = displayValues:WaitForChild("TimeLeft")

local myTimer = timer.new()

-- Hàm chức năng địa phương
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
		-- Thêm +1 đảm bảo hiển thị thời gian cuối cùng ở 1 thay vì 0.
		timeLeft.Value = (math.floor(myTimer:getTimeLeft() + 1))
		-- Bằng cách không thiết lập thời gian chờ, nó cung cấp lặp lại chính xác hơn
		task.wait()
	end
end

-- Hàm chức năng
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Script Hiển Thị Tình Trạng

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