Antarmuka pengguna

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Kami ingin menambahkan UI peta interaktif untuk membiarkan pengguna mengkonsumsi informasi di stasiun ruang angkasa yang terlihat dan terasa seperti tinggal di dunia ini.Kami memutuskan untuk membangun peta di dalam ruang 3D alih-alih di layar yang melapisi pengalaman.Visualisasi diegetik semacam ini memungkinkan lebih banyak imersi dengan dunia dibandingkan merasa seperti pengalaman yang sepenuhnya terpisah.

Desain peta

Untuk merancang peta:

  1. Kami mengejek UI di aplikasi eksternal dan datang dengan ide kasar tentang bagaimana kami ingin tampilannya.

    UI Mock

  2. Kami mengekspor bagian individu dari peta sebagai .png dan mengimpornya ke Studio.

    UI Elements Exported

Membangun peta

Membangun peta di dalam Studio melibatkan penggunaan Parts dan SurfaceGuis .

  1. Untuk elemen non-interaktif, yang perlu kita lakukan hanyalah menambahkan objek SurfaceGui ke bagian.

  2. Untuk elemen interaktif, SurfaceGui juga perlu berada di dalam kontainer StarterGui, dengan properti Adornee yang terhubung ke bagian yang sesuai di ruang kerja 3D.Melakukan hal itu memungkinkan Anda untuk menambahkan peristiwa tombol.

  3. Untuk mencapai efek paralaks, kami menggunakan tiga instansi terpisah ScreenGui yang ditugaskan ke tiga unik Parts dengan nilai X yang berbeda.

    Parallax Example

  4. Kami kemudian menambahkan efek bercahaya dengan properti SurfaceGui.LightInfluence.Jika Anda mengatur nilai properti ke apa pun kurang dari 1, ini mengaktifkan properti SurfaceGui.Brightness.Dengan menyesuaikan kecerahan, Anda dapat meningkatkan cahaya yang dipancarkan dari gambar.

  5. Untuk membiarkan pengguna menyalakan atau mematikan tampilan peta, kami menggunakan ProximityPrompt yang kami lampirkan ke model 3D.Ini adalah cara mudah untuk mengizinkan interaksi pengguna dengan elemen dunia.

    Proximity Prompt in Explorer

  6. Akhirnya, menggunakan Modul Skrip UITweenModule di dalam ReplicatedStorage, kami menganimasikan penyembunyian dan menampilkan UI dengan TweenService dan sedikit logika untuk menentukan status.Dengan melacak apa yang diklik pengguna, kita bisa menyembunyikan dan menampilkan elemen dengan menggeser berbagai properti seperti alfa, posisi, dan ukuran.

    PUI Tween Module in Explorer 
    Skrip Modul UITweenModule
    local TweenService = game:GetService("TweenService")

    local UITween = {}

    

    -- untuk gambar memudar

    function UITween.fadePart(object, amount, time, delay)

    

    	local tweenAlpha = TweenInfo.new(

    		time, --Waktu

    		Enum.EasingStyle.Quad, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay --Waktu penundaan

    	)

    

    	local tween = TweenService:Create(object, tweenAlpha, {Transparency = amount})

    	tween:Play()

    end

    

    function UITween.fade(object, amount, time, delay)

    

    	local tweenAlpha = TweenInfo.new(

    		time, --Waktu

    		Enum.EasingStyle.Quad, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay --Waktu penundaan

    	)

    

    	local tween = TweenService:Create(object, tweenAlpha, {ImageTransparency = amount})

    	tween:Play()

    end

    

    -- untuk gambar memudar

    function UITween.fadeBackground(object, amount, time, delay)

    

    	local tweenAlpha = TweenInfo.new(

    		time, --Waktu

    		Enum.EasingStyle.Quad, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay --Waktu penundaan

    	)

    

    	local tween = TweenService:Create(object, tweenAlpha, {BackgroundTransparency = amount})

    	tween:Play()

    end

    

    -- untuk teks memudar

    function UITween.fadeText(object, amount, time, delay)

    

    	local tweenAlpha = TweenInfo.new(

    		time, --Waktu

    		Enum.EasingStyle.Quad, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay --Waktu penundaan

    	)

    

    	local tween1 = TweenService:Create(object, tweenAlpha, {TextTransparency = amount})

    	tween1:Play()

    end

    

    -- untuk memindahkan teks dan gambar

    function UITween.move(object, position, time, delay)

    

    	task.wait(delay)

    	object:TweenPosition(position, Enum.EasingDirection.Out, Enum.EasingStyle.Quint, time)

    end

    

    -- untuk mengubah ukuran

    function UITween.size(object, size, time, delay, override, callback)

    

    	local tweenSize = TweenInfo.new(

    		time, --Waktu

    		Enum.EasingStyle.Quint, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay, --Waktu penundaan

    		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, --Waktu

    		Enum.EasingStyle.Quint, --Gaya Mudahkan

    		Enum.EasingDirection.Out, --Arah Mudahkan

    		0, --Ulangi hitungan

    		false, --Membalik jika benar

    		delay, --Waktu penundaan

    		override,

    		callback

    	)

    

    	local tween = TweenService:Create(object, tweenSize, {Rotation = rotation})

    	tween:Play()

    end

    

    -- untuk memburamkan kamera permainan

    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

    

    -- untuk memburamkan kamera permainan

    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
    Menerapkan UI Tween ke Objek
    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

    -- Tambahkan Modul UITween

    local UITween = require(ReplicatedStorage.UITweenModule)

    

    -- Temukan objek Guis dan UI pemain

    local playerGui = game:GetService('Players').LocalPlayer:WaitForChild('PlayerGui')

    local screenGuiMapUIFrame = playerGui:WaitForChild("ScreenGuiMapUIFrame").SurfaceGui

    local mapUIFrameStroke = screenGuiMapUIFrame.FrameStroke

    local mapUIFrameFill = screenGuiMapUIFrame.FrameFill

    

    -- Ukuran yang digunakan untuk tweening

    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)

    

    -- Contoh 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)

Inilah hasil akhir dari peta interaktif:

Sebelumnya