사용자 인터페이스

사용자가 이 세계에 살고 있는 것처럼 우주 정거장에서 정보를 소비할 수 있는 상호 작용 맵 UI를 추가하고 싶었습니다.경험을 덮는 화면 대신 3D 공간 내에 맵을 빌드하기로 결정했습니다.이러한 유형의 디지털 시각화는 완전히 분리된 경험처럼 느껴지는 대신 세계와 더 많은 몰입을 허용합니다.

맵 디자인

맵 디자인:

외부 응용 프로그램에서 UI를 조롱하고 우리가 원하는 모습을 대충 잡아냈습니다.
맵의 개별 조각을 .png로 내보내 스튜디오에 가져왔습니다.

맵 생성

Studio 내에 맵을 생성하려면 Parts 및 SurfaceGuis를 사용했습니다.

상호 작용하지 않는 요소의 경우, 우리가 해야 할 일은 부품에 SurfaceGui 개체를 추가하는 것뿐입니다.
상호 작용 요소의 경우, 또한 3D 작업 공간의 적절한 부분에 연결된 속성이 포함된 내부에 있어야 합니다.이렇게 하면 버튼 이벤트를 추가할 수 있습니다.
병렬 효과를 달성하기 위해 세 개의 별도 인스턴스 ScreenGui 를 사용하여 세 가지 고유한 Parts 에 다른 X 값을 할당했습니다.
그런 다음 SurfaceGui.LightInfluence 속성으로 빛 효과를 추가했습니다.속성 값을 1보다 작게 설정하면 SurfaceGui.Brightness 속성이 활성화됩니다.밝기를 조정하여 이미지에서 방출되는 빛을 증가시킬 수 있습니다.
사용자가 맵 표시를 전환할 수 있도록 하려면 3D 모델에 연결된 ProximityPrompt를 사용했습니다.이는 사용자가 세계 요소와 상호작용할 수 있도록 하는 쉬운 방법입니다.

마지막으로 ReplicatedStorage 내에서 UITweenModule 모듈스크립트를 사용하여 TweenService 및 상태 결정을 위한 약간의 논리로 UI를 숨기고 표시했습니다.사용자가 클릭한 것을 추적하여 알파, 위치 및 크기와 같은 다양한 속성을 통해 요소를 숨기고 표시할 수 있었습니다.

UITweenModule 모듈 스크립트
local TweenService = game:GetService("TweenService")
local UITween = {}

-- 사라지는 이미지에 대해서
function UITween.fadePart(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --시간
		Enum.EasingStyle.Quad, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay --지연 시간
	)

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

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

	local tweenAlpha = TweenInfo.new(
		time, --시간
		Enum.EasingStyle.Quad, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay --지연 시간
	)

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

-- 사라지는 이미지에 대해서
function UITween.fadeBackground(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --시간
		Enum.EasingStyle.Quad, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay --지연 시간
	)

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

-- 사라지는 텍스트에 대해
function UITween.fadeText(object, amount, time, delay)

	local tweenAlpha = TweenInfo.new(
		time, --시간
		Enum.EasingStyle.Quad, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay --지연 시간
	)

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

-- 텍스트와 이미지 이동을 위해
function UITween.move(object, position, time, delay)

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

-- 크기 변경을 위해
function UITween.size(object, size, time, delay, override, callback)

	local tweenSize = TweenInfo.new(
		time, --시간
		Enum.EasingStyle.Quint, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay, --지연 시간
		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, --시간
		Enum.EasingStyle.Quint, --완화 스타일
		Enum.EasingDirection.Out, --완화 방향
		0, --반복 수 계산
		false, --참이면 되돌립니다
		delay, --지연 시간
		override,
		callback
	)

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

-- 게임 카메라 흐림 제거
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

-- 게임 카메라 흐림 제거
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

개체에 UI 트윈 적용
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- UI트윈 모듈 추가
local UITween = require(ReplicatedStorage.UITweenModule)

-- 플레이어 기능 및 UI 개체 찾기
local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

-- 트위닝에 사용되는 크기
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)

-- 예시 트위닝
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)

상호 작용 맵의 최종 결과입니다:

맵 디자인

맵 생성

이 페이지