사용자 인터페이스

사용자들이 이 세계에 살고 있는 것처럼 느끼는 우주 정거장의 정보를 소비할 수 있도록 상호 작용 가능한 지도 UI를 추가하기로 했습니다. 대신 경험을 중첩하는 화면이 아닌 3D 공간 내에서 맵을 구축하기로 결정했습니다. 이런 종류의 디지�

맵 디자인

맵을 설계하려면:

1. 외부 응용 프로그램에서 UI를 모방하고 그 모양을 원하는 대로 변경하는 방법에 대해 거친 생각을 했습니다.

   

2. 우리는 맵의 개별 조각을 .png 으로 내보냈고 Studio에 가져왔습니다.

   

맵 구축

Studio 내에서 맵을 구축하려면 Parts 및 SurfaceGuis 를 사용하십시오.

1. 비인터랙티브 요소의 경우, 우리는 부품에 SurfaceGui 개체를 추가하기만 하면 됩니다.

2. 상호 작용 요소의 경우 SurfaceGui 는 또한 3D 작업 공간의 적절한 부분에 연결된 StarterGui 속성을 가진 내 Adornee 컨테이너 내에 있어야 합니다. 이렇게 하면 버튼 이벤트를 추가할 수 있습니다.

3. 병렬 효과를 달성하기 위해 3개의 별도 ScreenGui 인스턴스를 사용했습니다. 3개의 고유한 Parts에 다른 X 값을 할당한 3개의 별도 1> Class.ScreenGui1> 인스턴스.

   

4. 그런 다음 SurfaceGui.LightInfluence 속성으로 글로우 효과를 추가했습니다. 속성 값을 1보다 작게 설정하면 SurfaceGui.Brightness 속성을 활성화합니다. 조명을 조정하면 이미지에서 반사되는 조명을 증가시킬 수 있습니다.

5. 사용자가 지도 표시를 전환하도록 하려면 3D 모델에 부착된 ProximityPrompt 를 사용했습니다. 이것은 세계 요소와 사용자 상호 작용을 쉽게 허용하는 방법입니다.

   

6. 마지막으로, ReplicatedStorage 내의 UITweenModuleModuleScript를 사용하여 UI를 숨기고 표시하는 애니메이션을 사용자가 클릭하는 것과 유사한 로직과 함께 결정합니다. 사용자가 클릭한 것을 추적하면 알파, 위치 및 크기와 같은 다양한 속성을 변경하여 요소를 숨기고 표시할 수 있습니다.

   

   UI 트윈 모듈 스크립트
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- 흐끊이는 이미지에 대해
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --시간
   		Enum.EasingStyle.Quad, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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, --EasingStyle
   		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)

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