Kullanıcı arayüzü

Kullanıcıların bu dünyada var olan bir şeyi deneyimlemiş gibi bilgi tüketmelerini sağlamak için etkileşimli bir harita arayüzü eklemek istedik. Haritayı 3D alanın içine inşa etmeye karar verdik. Bu tür bir anlatımsal görselleştirme, dünyayla daha fazla etkileşim sağlar ve itici bir deneyim hissettirmemektedir.

Haritayı tasarlayın

Haritayı tasarlamak için:

1. Harita arayüzünü bir dış uygulamada oluşturduk ve nasıl görünmesini istediğimiz konusunda kaba bir fikir geliştirdik.

   

2. Haritanın bireysel parçalarını .png olarak dışa aktardık ve bunları Stüdyo'ya aktardık.

   

Haritayı inşa edin

Stüdyo içinde haritayı inşa etmek, Parts ve SurfaceGuis kullanmayı içeriyordu.

1. Etkileşimli olmayan öğeler için tek yapmamız gereken bir SurfaceGui nesnesini parçaya eklemekti.

2. Etkileşimli öğeler için SurfaceGui nesnesinin StarterGui konteynerinde olması ve Adornee özelliğinin 3D çalışma alanındaki ilgili parçaya bağlı olması gerekir. Bu, buton olaylarını eklemenizi sağlar.

3. Paralaks etkisi elde etmek için farklı X değerlerine sahip üç ayrı ScreenGui örneği kullandık.

   

4. Ardından, SurfaceGui.LightInfluence özelliği ile bir parıltı efekti ekledik. Özellik değerini 1'den daha düşük bir değere ayarlarsanız, SurfaceGui.Brightness özelliğini etkinleştirirsiniz. Parlaklığı ayarlayarak, görüntüden yayılan parıltıyı artırabilirsiniz.

5. Kullanıcıların haritanın görüntülenmesini açıp kapatmalarına izin vermek için bir 3D modele bağladığımız bir ProximityPrompt kullandık. Bu, kullanıcıların dünya öğeleriyle etkileşimde bulunmalarını sağlamak için kolay bir yoldur.

   

6. Son olarak, ReplicatedStorage içinde bir UITweenModule ModuleScript kullanarak, TweenService ile kullanıcı arayüzünü gizleme ve gösterme animasyonu yaptık ve durumu belirlemek için biraz mantık ekledik. Kullanıcının tıkladığı şeyleri takip ederek, çeşitli özellikleri tweening ile gizleyip gösterebildik; bunlar arasında alfa, konum ve boyut bulunmaktadır.

   

   UITweenModule ModuleScript
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- görüntülerin solması için
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zaman
   		Enum.EasingStyle.Quad, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay --Gecikme süresi
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})
   	tween:Play()
   end
   
   function UITween.fade(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zaman
   		Enum.EasingStyle.Quad, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay --Gecikme süresi
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
   	tween:Play()
   end
   
   -- arka planın solması için
   function UITween.fadeBackground(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zaman
   		Enum.EasingStyle.Quad, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay --Gecikme süresi
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
   	tween:Play()
   end
   
   -- metni solması için
   function UITween.fadeText(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Zaman
   		Enum.EasingStyle.Quad, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay --Gecikme süresi
   	)
   
   	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})
   	tween1:Play()
   end
   
   -- metin ve görüntüleri hareket ettirmek için
   function UITween.move(object, position, time, delay)
   
   	task.wait(delay)
   	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)
   end
   
   -- boyutu değiştirmek için
   function UITween.size(object, size, time, delay, override, callback)
   
   	local tweenSize = TweenInfo.new(
   		time, --Zaman
   		Enum.EasingStyle.Quint, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay, --Gecikme süresi
   		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, --Zaman
   		Enum.EasingStyle.Quint, --EasingStyle
   		Enum.EasingDirection.Out, --EasingDirection
   		0, --Tekrar sayısı
   		false, --Eğer doğruysa tersine çevirir
   		delay, --Gecikme süresi
   		override,
   		callback
   	)
   
   	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
   	tween:Play()
   end
   
   -- oyun kamerasını bulanıklaştırmak için
   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
   
   -- oyun kamerasını açmak için
   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

   Nesnelere UI Tween Uygulamak
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- UITween Modülünü ekleyin
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- Oyuncu Guis ve UI nesnelerini bul
   local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')
   local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui
   local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke
   local mapUIFrameFill = screenGuiMapUIFrame.FrameFill
   
   -- tweening için kullanılan boyutlar
   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)
   
   -- Örnek Tweening
   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)

İşte etkileşimli haritanın sonucu: