Giao diện người dùng

Chúng tôi muốn thêm một giao diện người dùng bản đồ tương tác để cho phép người dùng tiêu thụ thông tin trong trạm vũ trụ mà trông và cảm thấy như nó 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ột màn hình che lấp trải nghiệm.Loại hiển thị diegetic này cho phép thêm sự thâm nhập với thế giới so với cảm giác như nó là một trải nghiệm hoàn toàn riêng biệt.

Thiết kế bản đồ

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

Chúng tôi chế giễu giao diện người dùng trong một ứng dụng bên ngoài và đưa ra một ý tưởng thô sơ về cách chúng tôi muốn nó trông như thế nào.
Chúng tôi xuất các mảnh riêng lẻ của bản đồ thành .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 liên quan đến 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 ta cần làm là thêm một đối tượng SurfaceGui vào phần.
Đối với các thành phần tương tác, SurfaceGui cũng cần phải nằm bên trong thùng chứa StarterGui, với thuộc tính Adornee liên kết đến phần thích hợp trong không gian làm việc 3D.Làm như vậy cho phép bạn thêm sự kiện nút.
Để đạt được hiệu ứng parallax, chúng tôi đã sử dụng ba ví dụ riêng biệt ScreenGui được gán cho ba đối tượng độc đáo Parts với các giá trị X khác nhau.
Sau đó, chúng tôi thêm một hiệu ứng phát sáng với thuộc tính SurfaceGui.LightInfluence.Nếu bạn đặt giá trị tính năng thành bất cứ thứ gì nhỏ hơn 1, nó bật tính năng SurfaceGui.Brightness .Bằng cách điều chỉnh độ sáng, bạn có thể tăng độ phát sáng từ hình ảnh.
Để cho phép người dùng bật/tắt hiển thị bản đồ, chúng tôi đã sử dụng một ProximityPrompt mà chúng tôi gắn vào một mô hình 3D.Đây là một cách dễ dàng để cho phép người dùng tương tác với các yếu tố thế giới.

Cuối cùng, sử dụng một ModuleScript UITweenModule bên trong ReplicatedStorage, chúng tôi đã hoạt hình việc giấu và hiển thị giao diện người dùng 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 yếu tố bằng cách tween các thuộc tính khác nhau như alpha, vị trí và kích thước.

UITweenModule ModuleScript Của
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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay --Thời gian trì hoãn
	)

	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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay --Thời gian trì hoãn
	)

	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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay --Thời gian trì hoãn
	)

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

-- cho văn bản biến mất
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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay --Thời gian trì hoãn
	)

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

-- để 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 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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay, --Thời gian trì hoãn
		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ễ dàng
		0, --Lặp lại số lần
		false, --Quay ngược nếu đúng
		delay, --Thời gian trì hoãn
		override,
		callback
	)

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

-- để mờ nhạt máy ảnh 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

-- để mờ nhạt máy ảnh 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

Áp dụng UI Tween cho đối tượng
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Thêm mô-đun UITween
local UITween = require(ReplicatedStorage.UITweenModule)

-- Tìm các đối tượng Guis và UI người chơi
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 cho 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)

-- Ví dụ Tweening
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:

Thiết kế bản đồ

Xây dựng bản đồ

Trên trang này