Kullanıcı arayüzü

Kullanıcıların bu dünyada yaşadığı gibi uzay istasyonunda bilgi tüketmesine izin veren etkileşimli bir harita arayüzü eklemek istedik.Deneyimi üzerine yayılan bir ekranda yerine 3B uzayın içinde haritayı oluşturmaya karar verdik.Bu tür bir diegetik görselleştirme, dünya ile daha fazla etkileşime izin verir, böylece kendini tamamen ayrı bir deneyim olarak hissetmek yerine.

Haritayı tasarla

Haritayı tasarlamak için:

1. Dışarıdan bir uygulamada UI'yi alay ettik ve nasıl görünmesini istediğimize dair kaba bir fikir bulduk.

   

2. Haritanın bireysel parçalarını .png olarak ihraç ettik ve bunları Studio'ya aktardık.

   

Haritayı oluştur

Stüdyo içinde harita oluşturmak, Parts ve SurfaceGuis kullanarak yapıldı.

1. Etkileşimli olmayan elemanlar için, tek yapmamız gereken parçaya bir SurfaceGui nesne eklemek.

2. Etkileşimli elemanlar için, ayrıca 3B çalışma alanındaki uygun parçaya bağlı özelliği ile içinde olması gerekir.Böyle yapmak, düğme olayları eklemenize izin verir.

3. Bir paralaks etkisi elde etmek için, üç ayrı ScreenGui örneği üç eşsiz Parts ile farklı X değerleri verilen üç farklı kullanıma verdik.

   

4. Sonra SurfaceGui.LightInfluence özelliği ile bir parıltı efekti ekledik.Özellik değerini 1'den daha az bir şeye ayarlarsanız, SurfaceGui.Brightness özelliğini etkinleştirir.Parlaklığı ayarlayarak, görüntüden yayılan parlamayı artırabilirsiniz.

5. Kullanıcıların haritanın görüntülenmesini değiştirmesine izin vermek için, bir 3B modeline bağlı bir ProximityPrompt kullandık.Bu, kullanıcının dünya öğeleriyle etkileşimine izin vermenin kolay bir yoludur.

   

6. Son olarak, ReplicatedStorage içinde bir UITweenModule ModülScript kullanarak, arayüzü TweenService ve devletin belirlenmesi için biraz mantık ile gizledik ve gösterdik.Kullanıcının neye tıkladığını izleyerek, alfa, konum ve boyut gibi çeşitli özellikler aracılığıyla elemanları gizleyip gösterebiliriz.

   

   UITweenModule ModülScriptu
   local TweenService = game:GetService("TweenService")
   local UITween = {}
   
   -- solgun görüntüler için
   function UITween.fadePart(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Süre
   		Enum.EasingStyle.Quad, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		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, --Süre
   		Enum.EasingStyle.Quad, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		delay --Gecikme süresi
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})
   	tween:Play()
   end
   
   -- solgun görüntüler için
   function UITween.fadeBackground(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Süre
   		Enum.EasingStyle.Quad, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		delay --Gecikme süresi
   	)
   
   	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})
   	tween:Play()
   end
   
   -- solgun metin için
   function UITween.fadeText(object, amount, time, delay)
   
   	local tweenAlpha = TweenInfo.new(
   		time, --Süre
   		Enum.EasingStyle.Quad, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		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, --Süre
   		Enum.EasingStyle.Quint, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		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, --Süre
   		Enum.EasingStyle.Quint, --Kolaylaştırma Stili
   		Enum.EasingDirection.Out, --Kolaylaştırma Yönü
   		0, --Tekrarlama sayısı
   		false, --Doğruysa tersine döner
   		delay, --Gecikme süresi
   		override,
   		callback
   	)
   
   	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})
   	tween:Play()
   end
   
   -- oyun kamerasını bulanmak 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ı bulanmak 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

   Nesneler için UI Tween'i uygulama
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   
   -- UITween Modülü Ekle
   local UITween = require(ReplicatedStorage.UITweenModule)
   
   -- Oyuncu Guileri 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
   
   -- Gençleştirme 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 Geçiş
   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 sonuçları: