Giao Diện Người Dùng | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Chúng tôi đã muốn thêm một UI bản đồ tương tác để cho phép người dùng tiêu thụ thông tin trong trạm vũ trụ trông và cảm thấy như thể nó đang sống trong thế giới này. Chúng tôi quyết định xây dựng bản đồ bên trong không gian 3D thay vì trên màn hình n

Thiết kế Bản đồ

Để thiết kế bản đồ:

Chúng tôi mô phỏng UI trong một ứng dụng bên ngoài và đưa ra một ý tưởng rough về cách chúng tôi muốn nó nhìn.
Chúng tôi xuất các bộ phận của bản đồ một cách .png và nhập chúng vào Studio.

Xây dựng bản đồ

Xây dựng bản đồ bên trong Studio bằng cách sử dụng Parts và SurfaceGuis .

Đối với các thành phần không tương tác, tất cả những gì chúng tôi cần làm là thêm một SurfaceGui đối tượng vào bộ phận.
Đối với các thành phần tương tác, SurfaceGui cũng cần phải nằm trong container StarterGui, với đặt tính Adornee liên kết với phần tương ứng phù hợp trong 3D workspace. Thực hiện như vậy cho phép bạn thêm sự kiểm soát các sự kiểm so
Để đạt được hiệu ứng parallax, chúng tôi đã sử dụng ba ScreenGui instances được gán cho ba Parts độc đáo với các giá trị X khác nhau.
Chúng tôi sau đó thêm một hiệu ứng phát sáng với SurfaceGui.LightInfluence 속性. Nếu bạn đặt giá trị thuộc tính về bất kỳ giá trị nào dưới 1, nó sẽ bật một SurfaceGui.Brightness 속性. Bằng cách điều chỉnh độ sáng, bạn có th
Để cho phép người dùng đổi hiển thị của bản đồ, chúng tôi đã sử dụng một ProximityPrompt mà chúng tôi kết hợp với một mô hình 3D. Đây là cách dễ dàng để cho phép người dùng tương tác với các thành phần trên thế giới.

Cuối cùng, bằng cách sử dụng UITweenModuleModuleScript bên trong ReplicatedStorage, chúng tôi đã hoạt hóa việc ẩn và hiển thị UI với TweenService và một chút logic để xác định trạng thái. Bằng cách theo dõi những gì người dùng nhấp vào, chúng tôi có thể ẩn và hiển thị các thành phần bằng cách tăng trưởng các

UITweetModule Script
local TweenService = game:GetService("TweenService")
local UITween = {}

-- cho hình ảnh mờ dần
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quad, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay --Thời gian trễ
	)

	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
	tween:Play()
end

function UITween.fade(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quad, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay --Thời gian trễ
	)

	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
	tween:Play()
end

-- cho hình ảnh mờ dần
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quad, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay --Thời gian trễ
	)

	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
	tween:Play()
end

-- cho văn bản mờ dần
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quad, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay --Thời gian trễ
	)

	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
	tween1:Play()
end

-- cho việc di chuyển văn bản và hình ảnh
function UITween.move(object, position, time, delay)

	task.wait(delay)
	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
end

-- để thay đổi kích thước
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quint, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay, --Thời gian trễ
		override,
		callback
	)

	local tween = TweenService:Create(object, tweenSize, {Size = size})
	tween:Play()
end

function UITween.rotate(object, rotation, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --Thời gian
		Enum.EasingStyle.Quint, --Kiểu dễ dàng
		Enum.EasingDirection.Out, --Hướng dẫn chỉ định
		0, --Đếm lại
		false, --Quay lại nếu đúng
		delay, --Thời gian trễ
		override,
		callback
	)

	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
	tween:Play()
end

-- để làm mờ máy quay trò chơi
function UITween.blur(object, amount, time)

	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
	local tween = TweenService:Create(object, tweenInfo, {Size = amount})
	tween:Play()
end

-- để làm mờ máy quay trò chơi
function UITween.turnOn(object, amount, time)

	local tweenInfo = TweenInfo.new(time, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0)
	local tween = TweenService:Create(object, tweenInfo, {Brightness = amount})
	tween:Play()
end

return UITween

Xem xét tác dụng UI Tween đến Objec
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Thêm Modul UITwen
local UITween = require(ReplicatedStorage.UITweenModule)

-- Tìm các thành phần người dùng và giao diện người dùng
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- Kích thước được sử dụng để tweening
local frameSizeStart = UDim2.new(0, 0, 0, 0)
local frameSizeMid = UDim2.new(1, 0, 0.05, 0)
local frameSizeEnd = UDim2.new(1, 0, 1, 0)

-- Tăng trưởng ví dụ
UITween.fade(mapUIFrameStroke, 0, 2, 0)
UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
UITween.fade(mapUIFrameFill, 0, 2, 0.5)
UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)
task.wait(0.25)
UITween.size(mapUIFrameStroke, frameSizeMid, 0.4, 0)
UITween.size(mapUIFrameFill, frameSizeMid, 0.4, 0.25)
task.wait(0.25)
UITween.size(mapUIFrameStroke, frameSizeEnd, 0.4, 0)
UITween.size(mapUIFrameFill, frameSizeEnd, 0.4, 0.25)

Đây là kết quả cuối cùng của bản đồ tương tác: