อินเทอร์เฟซผู้ใช้

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

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

เพื่อออกแบบแผนที่:

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 ภายใน ReplicatedStorage เราได้แอนิเมชั่นการซ่อนและแสดง UI ด้วย TweenService และเล็กน้อยของโลจิสติกสำหรับการกำหนดสถานะโดยติดตามสิ่งที่ผู้ใช้คลิกเราสามารถซ่อนและแสดงองค์ประกอบโดยการสลับตัวแปรต่างๆ เช่นอัลฟาตำแหน่งและขนาด

   

   สคริปต์โมดูล 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 Tween กับวัตถุ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- เพิ่มโมดูล UITween
   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
   
   -- ขนาดที่ใช้สําหรับทวีน
   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)

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