ส่วนติดต่อผู้ใช้

เราต้องการเพิ่ม UI แผนที่แบบโต้ตอบเพื่อให้ผู้ใช้สามารถบริโภคข้อมูลในสถานีอวกาศที่ดูและรู้สึกเหมือนมันมีชีวิตอยู่ในโลกนี้ เราตัดสินใจที่จะสร้างแผนที่ภายในพื้นที่ 3D แทนการแสดงบนหน้าจอที่ปกคลุมประสบการณ์ การแสดงผลที่เป็นภาพแบบนี้ช่วยให้มีความเข้าใจและ immersive กับโลกมากขึ้น แทนที่จะรู้สึกเหมือนมันเป็นประสบการณ์ที่แยกต่างหาก

ออกแบบแผนที่

ในการออกแบบแผนที่:

1. เราได้จำลอง UI ในแอปพลิเคชันภายนอกและคิดขึ้นแนวคิดเบื้องต้นเกี่ยวกับสิ่งที่เราต้องการให้มันดูเป็นอย่างไร

   

2. เราได้ส่งออกชิ้นส่วนเฉพาะของแผนที่เป็น .png และนำเข้าสู่ Studio

   

สร้างแผนที่

การสร้างแผนที่ภายใน Studio เกี่ยวข้องกับการใช้ Parts และ SurfaceGuis.

1. สำหรับองค์ประกอบที่ไม่โต้ตอบ เราสามารถแค่เพิ่มวัตถุ SurfaceGui ลงในส่วน

2. สำหรับองค์ประกอบที่โต้ตอบ SurfaceGui ยังต้องอยู่ภายในภาชนะ StarterGui โดยที่คุณสมบัติ Adornee เชื่อมโยงกับชิ้นส่วนที่เหมาะสมในพื้นที่ 3D ทำให้คุณสามารถเพิ่มเหตุการณ์ปุ่ม

3. เพื่อให้ได้เอฟเฟกต์พาราลแลกซ์ เราได้ใช้ ScreenGui สามชุดที่กำหนดให้กับ Parts สามตัวที่มีค่า X ที่แตกต่างกัน

   

4. จากนั้นเราก็ได้เพิ่มเอฟเฟกต์การเรืองแสงด้วยคุณสมบัติ SurfaceGui.LightInfluence หากคุณตั้งค่าค่าของคุณสมบัติน้อยกว่า 1 มันจะเปิดใช้งานคุณสมบัติ SurfaceGui.Brightness โดยการปรับความสว่าง คุณสามารถเพิ่มการเรืองแสงที่ออกมาจากภาพ

5. เพื่อให้ผู้ใช้สามารถสลับการแสดงแผนที่ เราได้ใช้ ProximityPrompt ที่เราเชื่อมโยงไปยังโมเดล 3D นี่เป็นวิธีที่ง่ายในการอนุญาตให้ผู้ใช้มีปฏิสัมพันธ์กับองค์ประกอบในโลก

   

6. สุดท้าย โดยการใช้ UITweenModule ModuleScript ภายใน ReplicatedStorage เราได้สร้างอนิเมชันสำหรับการซ่อนและแสดง UI โดยใช้ TweenService และตรรกะเล็กน้อยในการกำหนดสถานะ โดยการติดตามสิ่งที่ผู้ใช้คลิก เราสามารถซ่อนและแสดงองค์ประกอบโดยการเปลี่ยนคุณสมบัติต่างๆ เช่น อัลฟา ตำแหน่ง และขนาด

   

   UITweenModule ModuleScript
   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, --EasingDirection
   		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, --EasingDirection
   		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, --EasingDirection
   		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, --EasingDirection
   		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, --EasingDirection
   		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, --EasingDirection
   		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 Tween กับวัตถุ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- เพิ่ม UITween Module
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- หา Guis ของผู้เล่นและวัตถุ UI
   local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
   local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
   local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
   local mapUIFrameFill = screenGuiMapUIFrame.FrameFill
   
   -- ขนาดที่ใช้ในการ tween
   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)
   
   -- ตัวอย่างการ Tween
   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)

นี่คือผลลัพธ์สุดท้ายของแผนที่แบบโต้ตอบ: