Tạo một GUI

Hiện tại, nhiều thông tin trò chơi đang nằm trong cửa sổ Thành phẩm, không thể nhìn thấy đối với 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 đồ họa (GUI) và mã nó.

Hiển thị thông tin với 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

Trước tiên, tạo một đối tượng Giao diện người dùng màn hình để giữ các thành phần văn bản khác nhau.Khi người chơi di chuyển máy ảnh, GUI màn hình vẫn ở cùng một vị trí trên màn hình của họ.

Để đảm bảo tất cả người chơi xem cùng một màn hình, hãy đặt GUI vào thư mục StarterGUI . Khi khởi động trò chơi, thư mục này sẽ được sao chép cho tất cả người chơi.

Trong thư mục StarterGUI, tạo một ScreenGUI mới. Sau đó trong ScreenGUI, thêm một Thẻ văn bản mới có tên là StatusText.
Để di chuyển nhãn, trong Trình khám phá, hãy chọn StatusText.Sau đó, trong cửa sổ xem trò chơi, kéo nhãn vào nơi bạn muốn.Số của bạn có thể khác với video.Nhãn cũng có thể được thay đổi kích cỡ bằng cách sử dụng điểm neo trên các góc.

Lập trình GUI

Để phản ánh các thay đổi trong trò chơi, các kịch bản sẽ cần cập nhật các thành phần GUI.Ví ví dụ / trường hợp, tình trạng tháitrò chơi, có phải là gián đoạn hay vòng hoạt động, sẽ được lưu trong StringValue và được cập nhật bằng các kịch bản địa phương.

So với các kịch bản và kịch bản mô-đun chạy các máy chủ Roblox, các kịch bản địa phương chạy trên thiết bị của người chơi.Chúng thường được sử dụng để mã hóa các thành phần GUI như bộ đếm thời gian hoặc nhập của người chơi, giống như các hành động chuột hoặc bàn phím.

Thiết lập kịch bản

Tập lệnh StatusDisplay sẽ đượ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.

Trong ReplicatedStorage , tạo một thư mục có tên DisplayValues.Trong thư mục đó, thêm một StringValue có tên là Status.Để kiểm tra giá trị sau này, hãy cho nó một giá trị tạm thời, như "Chào mừng bạn đến với trận chiến!".

Bởi vì các tập lệnh địa phương chỉ chạy trên thiết bị của người chơi, chúng không thể được lưu trong thư mục Server như ServerStorage.ReplicatedStorage là một thư mục có sẵn cả cho khách hàng (thiết bị) và máy chủ.
Trong StarterGUI > ScreenGUI > Status, thêm một kịch bản mới có tên StatusDisplay. Các kịch bản ảnh hưởng đến GUI thường được gán cho thành phần GUI đó.

Mở trạng thái hiển thị và xác định các biến sau đây cho việc theo dõi:

Dịch vụ ReplicatedStorage
Thư mục DisplayValues
Giá trị chuỗi trạng thái

Nhãn văn bản - 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 văn bản

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

Mã hóa một chức năng mới có tên là updateText(). Trong chức năng đó, đặt thuộc tính Text của textLabel đến status.Value .


local textLabel = script.Parent

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

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)

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


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

status.Changed:Connect(updateText)
updateText()

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

Tạo quản lý hiển thị

Trong khi trò chơi, nhãn văn bản sẽ cần nhận thông tin từ GameManager, MatchManager, và có thể là các kịch bản khác.Vì vậy, các kịch bản khác nhau này có thể cập nhật nhãn văn bản khi cần thiết, tạo một kịch bản mô-đun có tên DisplayManager.

Thiết lập kịch bản

Bởi vì DisplayManager cần giao tiếp với các kịch bản khác, nó sẽ là một kịch bản mô-đun.

Trong ServerStorage > ModuleScripts , tạo một kịch bản mới có tên DisplayManager.Đổi tên bảng mô-đun phù hợp với tên kịch bản.

Thêm biến địa phương cho các thứ theo dõi: Replicated Storage, thư mục DisplayValues, Status.


local DisplayManager = {}

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

-- Hiển thị các 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")

-- Chức năng địa phương

-- Chức năng mô-đun

return DisplayManager

Tạo một chức năng module mới có tên là updateStatus() cập nhật chuỗi trong giá trị Status. Các kịch bản khác sẽ có thể gọi chức năng này.


-- Chức năng địa phương

-- Chức năng mô-đun
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

Cập nhật tình trạng văn trạng thái

Với Display Manager được cài đặt, nó có thể được sử dụng trong các kịch bản khác để cập nhật nhãn GUI.Là tin nhắn đầu tiên trong GUI, hiển thị khởi đầu và kết thúc của khoảng lặng thông qua kịch bản GameManager.

Trong ServerScriptService > GameManager, tạo một biến có tên displayManager và yêu cầu mô-đun DisplayManager trong ServerStorage.


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

-- Tập lệnh 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"))

Là dòng đầu tiên sau câu lệnh while true, gọi displayManager > updateStatus() và truyền một thông điệp về việc chờ đợi 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

Sau khi kết thúc vòng lặp lặp lại cho khoảng nghỉ, gọi updateStatus() và truyền một chuỗi thông báo rằng trận đấu đang bắt đầu.Vì bạn sẽ kiểm tra với GUI, hãy xóa hai tuyên bố in để ghi lại khởi đầu và kết thúc của khoảng lặp.


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

Thử nghiệm trò chơi với và không có người chơi tối thiểu của bạn. Tin nhắn nên đọc như theo dõi:
- Không có người chơi tối thiểu: "Waiting for Players" .
- Với số người chơi tối thiểu: "Get ready" .

Mẹo khắc phục sự cố

Tại thời điểm này, nếu nhãn văn bản không hiển thị tin nhắn đầu tiên, hoặc vẫn hiển thị "Nhãn", hãy thử một trong những điều sau.

Hãy chắc chắn rằng trong kịch bản địa phương StatusDisplay rằng updateText() được gọi ở đáy của kịch bản.Điều này đảm bảo rằng người chơi nhận được tin nhắn mới nhất.
Kiểm tra xem giá trị chuỗi trạng thái có ở ReplicatedStorage không.Do bản chất độc đáo của mối quan hệ client-server, nếu nó ở trong ServerStorage, một kịch bản địa phương sẽ không thể tìm thấy nó.

Hiển thị tình trạng tháitrậ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 những con số này thay đổi, nhãn văn bản cũng sẽ thay đổi.

Thiết lập giá trị và chức năng

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

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

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


local DisplayManager = {}

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

-- Hiển thị các 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")

Tạo một chức năng địa phương có tên là updateMatchStatus(). Sau đó, đặt giá trị của 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")

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

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


-- Chức năng mô-đun
function DisplayManager.updateStatus(newStatus)
	status.Value = newStatus
end

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

return DisplayManager

Chưa thử nghiệm. Không có gì đã cập nhật các giá trị PlayersLeft hoặc TimeLeft, vì vậy tình trạng sẽ không thay đổi một khi vòng bắt đầu.

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

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

Trong PlayerManager, thêm biến địa phương cho dịch vụ ReplicatedStorage, thư mục DisplayValues và IntValue của người chơi bên trái.


local PlayerManager = {}

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

-- Biến bản đồ
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")

Hiển thị số lượng người chơi bắt đầu bằng cách đặt giá trị của playersLeft vào kích thước của mảng người chơi hoạt động.

Sau đó, trong sendPlayersToMatch() , dưới vòng lặp for, đánh máy: 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ị bộ đếm thời gian

Hãy nhớ rằng các kịch bản mô-đun được sử dụng để tập trung mã tương tự.Vì thời gian được theo dõi trong MatchManager, cập nhật giá trị TimeLeft bằng cách sử dụng các chức năng từ kịch bản Timer.Quản lý hiển thị sẽ lắng nghe các thay đổi đến TimeLeft và cập nhật để phù hợp với giá trị mới.

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


local MatchManager = {}

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

-- Tập lệnh 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()

Tìm chức năng startTimer() . Sau sự kiện Finished, sao chép và dán toàn bộ, được phát hành trong khi lặp dưới đây.Mã thực hiện một vòng lặp để cập nhật giá trị timeLeft cho đến khi hẹn giờ vẫn còn hoạt động.


while myTimer:isRunning() do
	-- Thêm +1 đảm bảo hiển thị thời gian kết thúc tại 1 thay vì 0.
	timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
	-- Bằng cách không đặt thời gian chờ đợi, 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 kết thúc tại 1 thay vì 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Bằng cách không đặt thời gian chờ đợi, nó cung cấp lặp lại chính xác hơn
		task.wait()
	end
end

Chạy trò chơi với số người chơi tối thiểu. Kiểm tra xem văn bản trạng thái hiển thị:
- Số lượng người chơi bắt đầu chính xác. Hãy nhớ, con số này sẽ không thay đổi cho đến khi thêm mã bổ sung trong bài học trong tương lai.
- Thời gian giảm dần mỗi giây cho đến khi dừng lại ở 1.

Hoàn thành các kịch bản

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

Tập lệnh GameManager


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

-- Tập lệnh 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ị các 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")

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

-- Chức năng mô-đun
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")

-- Tập lệnh 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()

-- 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 kết thúc tại 1 thay vì 0.
		timeLeft.Value = (myTimer:getTimeLeft() + 1) // 1
		-- Bằng cách không đặt thời gian chờ đợi, nó cung cấp lặp lại chính xác hơn
		task.wait()
	end
end

-- Chức năng mô-đun
function MatchManager.prepareGame()
	playerManager.sendPlayersToMatch()
	matchStart:Fire()
end

matchStart.Event:Connect(startTimer)

return MatchManager

Tập lệnh Hiển thị trạng thái


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

Trên trang này