ระบบสาธารณูปโภค

เราต้องการเพิ่ม UI แผนที่โต้ตอบเพื่อให้ผู้ใช้สามารถกonsum ข้อมูลในสถานีอวกาศที่ดูและรู้สึกเหมือนอยู่ในโลกนี้ เราตัดสินใจที่จะสร้างแผนที่ภายใน 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. ในที่สุด, โดยใช้ UITweenModuleModuleScript ภายใน 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, --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 Tween กับวัตถุ
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- เพิ่มโมดูล UITwen
   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)

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