واجهة المستخدم

لقد أردنا إضافة واجهة خريطة تفاعلية للسماح للمستخدمين بتناول المعلومات في محطة الفضاء التي بدت وكأنها تعيش في هذا العالم. قررنا بناء الخريطة داخل الفضاء ثلاثي الأبعاد بدلاً من أن تكون على شاشة تتداخل مع التجربة. هذا النوع من التصور الديجيتالي يسمح بقدر أكبر من الانغماس في العالم بدلاً من الشعور بأنها تجربة منفصلة تمامًا.

تصميم الخريطة

لتصميم الخريطة:

1. قمنا بإنشاء نموذج واجهة المستخدم في تطبيق خارجي وخرجنا بفكرة عامة عن كيفية رغبتنا في أن تبدو.

   

2. قمنا بتصدير القطع الفردية من الخريطة كـ .png واستيرادها إلى الاستوديو.

   

بناء الخريطة

تتطلب عملية بناء الخريطة داخل الاستوديو استخدام Parts و SurfaceGuis.

1. بالنسبة للعناصر غير التفاعلية، كل ما احتجنا فعله هو إضافة كائن SurfaceGui إلى الجزء.

2. بالنسبة للعناصر التفاعلية، يجب أيضًا أن يكون SurfaceGui داخل الحاوية StarterGui، مع ربط خاصية Adornee بالجزء المناسب في مساحة العمل ثلاثية الأبعاد. يؤدي ذلك إلى تمكينك من إضافة أحداث الأزرار.

3. لتحقيق تأثير البارالاكس، استخدمنا ثلاث حالات منفصلة من ScreenGui مرتبطة بثلاثة أجزاء فريدة ذات قيم X مختلفة.

   

4. ثم أضفنا تأثير التوهج باستخدام خاصية SurfaceGui.LightInfluence. إذا قمت بتعيين قيمة الخاصية لأقل من 1، فإن ذلك يعزز خاصية SurfaceGui.Brightness. من خلال تعديل السطوع، يمكنك زيادة التوهج المنبعث من الصورة.

5. للسماح للمستخدمين بالتبديل بين عرض الخريطة، استخدمنا ProximityPrompt الذي قمنا بتوصيله بنموذج ثلاثي الأبعاد. هذه طريقة سهلة للسماح بالتفاعل مع عناصر العالم.

   

6. أخيرًا، باستخدام وحدة UITweenModule ModuleScript داخل ReplicatedStorage، قمنا بتحريك إخفاء وعرض واجهة المستخدم باستخدام 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, -- أسلوب التخفيف
   		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

   تطبيق مؤثرات واجهة المستخدم على الكائنات
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- إضافة وحدة UITween
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- العثور على واجهات اللاعب وكائنات واجهة المستخدم
   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)

إليك النتيجة النهائية للخريطة التفاعلية: