Pozycjonowanie i rozmiar obiektów UI

Chyba że obiekty UI znajdują się pod kontrolą struktur układu lub modifikatora/ograniczenia rozmiaru, masz pełną kontrolę nad ich pozycją i rozmiarem. Możesz również ustawić porządek warstwowania Z‑index, według którego obiekty będą się na sobie nakładać.

Właściwości podstawowe

Wszystkie GuiObjects dzielą się zestawem podstawowych właściwości do pozycjonowania, zmiany rozmiaru, kotwicy i warstwy w kontenerze na ekranie lub w doświadczeniu.

Pozycja

Właściwość Position to zestaw współrzędnych UDim2, który pozycjonuje obiekt wzdłuż osi X i Y. UDim2 jest reprezentowany przez wartości Scale i Offset dla każdej osi:

• Wartości Scale reprezentują procent rozmiaru kontenera wzdłuż odpowiadającej osi, dodawane do wartości Offset.
• Wartości Offset reprezentują, o ile pikseli należy przesunąć obiekt wzdłuż odpowiadającej osi, dodawane do wartości Scale.

Aby edytować pozycję wybranego GuiObject, kliknij pole Position w oknie Properties i wprowadź nowy zestaw współrzędnych UDim2.

Rozmiar

Właściwość Size to zestaw współrzędnych UDim2, który zmienia rozmiar obiektu wzdłuż osi X i Y. UDim2 jest reprezentowany przez wartości Scale i Offset dla każdej osi:

• Skala — Wartości, które reprezentują procent rozmiaru kontenera wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Offset.
• Offset — Wartości, które reprezentują pikselowy rozmiar obiektu wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Skali.

Aby edytować rozmiar wybranego GuiObject, kliknij pole Size w oknie Properties i wprowadź nowy zestaw współrzędnych UDim2.

AnchorPoint

Właściwość AnchorPoint definiuje punkt początkowy, z którego obiekt zmienia pozycję i rozmiar. Domyślne wartości AnchorPoint to (0, 0), co umieszcza kotwicę w lewym górnym rogu obiektu.

Wartości AnchorPoint to ułamek od 0 do 1, w relacji do rozmiaru obiektu, co oznacza, że obiekt z wartościami AnchorPoint wynoszącymi (0.5, 0.5) umieszcza punkt kotwiczenia w połowie (50%) w obrębie obiektu zarówno poziomo, jak i pionowo, a wszelkie zmiany w jego pozycji lub rozmiarze będą się przemieszczać i skalować z tego punktu na zewnątrz.

Aby wyświetlić i edytować punkt kotwiczenia wybranego GuiObject:

1. W oknie Properties kliknij wewnątrz pola AnchorPoint.

   

2. Wprowadź nowy zestaw współrzędnych Vector2 i naciśnij Enter.

   Studio interpretuje zamierzony zestaw wartości, gdy wprowadzona jest pojedyncza liczba. Na przykład, wprowadzenie tylko 0.5 zostanie przekształcone na 0.5, 0.5 dla punktu kotwiczenia w centrum.

ZIndex

Właściwość ZIndex definiuje kolejność warstwy, w jakiej GuiObjects renderują i nakładają się na siebie. Jeśli chcesz stworzyć nowe warstwy renderowania, musisz ustawić właściwość ZIndex na różne dodatnie lub ujemne wartości całkowite dla każdego obiektu.

Dla kontenerów UI, takich jak ScreenGui, domyślne zachowanie ZIndexBehavior zawsze renderuje dzieci powyżej ich rodziców, a ZIndex każdego dziecka jest używane do decyzji, w jakiej kolejności zostanie ono wyrenderowane na innych.

Aby edytować ZIndex obiektu, zlokalizuj ZIndex w oknie Properties i wprowadź nową wartość całkowitą.

Struktury układu

Struktury układu pozwalają szybko organizować i wyświetlać GuiObjects, na przykład w poziomej lub pionowej liście, siatce równo wymiarowanych kafelków, w sekwencji stron i więcej. Układy zazwyczaj nadpisują lub wpływają na pozycję/rozmiar obiektów pod ich kontrolą.

Czynniki międzyplatformowe

Roblox jest z natury wieloplatformowy, ponieważ gracze mogą odkrywać i dołączać do doświadczeń na swoim telefonie lub tablecie, a następnie kontynuować, gdzie skończyli, na swoim PC lub konsoli. Powinieneś projektować swoje doświadczenia na Roblox, aby były dostępne i przyjemne na wszystkich platformach, które zdecydujesz się wspierać, zamiast optymalizować pod jedną platformę i zaniedbywać inne.

Zastrzeżone strefy

Na urządzeniach mobilnych domyślne sterowniki zajmują część lewego dolnego i prawego dolnego rogu ekranu. Kiedy projektujesz UI doświadczenia, unikaj umieszczania ważnych informacji lub wirtualnych przycisków w tych strefach.

Strefy kciuka

Większość graczy mobilnych używa dwóch kciuków — jednego na wirtualnym joysticku i jednego na przycisku skoku. W zależności od fizycznego rozmiaru urządzenia i rąk gracza, sięgnięcie zbyt daleko od dolnych rogów staje się niewygodne lub niemożliwe, więc powinieneś unikać umieszczania często używanych przycisków poza łatwo dostępnymi strefami.

Przycisk wygodnie w zasięgu prawego kciuka gracza

Przycisk trudny do osiągnięcia, chyba że gracz wyciągnie rękę lub kciuk

Pamiętaj, że komfortowe strefy kciuka różnią się między telefonami a tabletami, ponieważ tablety mają większy ekran. Przycisk umieszczony 40% poniżej górnej krawędzi ekranu jest osiągalny na telefonie, ale niemal nieosiągalny na tablecie.

Przycisk 40% od górnej krawędzi telefonu, w zasięgu kciuka gracza

Przycisk 40% od górnej krawędzi tabletu, trudny do osiągnięcia bez rozciągania

Niezawodnym podejściem zarówno na telefonach, jak i tabletach jest względne pozycjonowanie niestandardowych przycisków w pobliżu często używanych sterowników, takich jak domyślny przycisk skoku, umieszczając je w łatwo dostępnej odległości.

Poniższy kod, umieszczony w skrypcie klienckim w StarterPlayerScripts, pobiera pozycję przycisku skoku i tworzy miejsce na przycisk 20 pikseli na lewo od niego.

Skrypt kliencki - Niestandardowy przycisk w pobliżu przycisku skoku
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- Czekaj na pełne załadowanie przycisku skoku
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Umieść nowy niestandardowy przycisk na lewo od przycisku skoku
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("Urządzenie nie jest obsługiwane dotykowo lub Studio nie emuluje urządzenia obsługującego dotyk!")
end

UI oparte na kontekście

Przestrzeń ekranu jest ograniczona na urządzeniach mobilnych, więc powinieneś pokazywać tylko najważniejsze informacje podczas aktywnej rozgrywki. Na przykład, jeśli twoje doświadczenie zawiera specjalną akcję wejścia do otwierania drzwi i skarbów, nie ma sensu ciągłe wyświetlanie przycisku "otwórz" na ekranie. Zamiast tego użyj zaproszenia do interakcji lub podobnej metody, aby akceptować wejścia tylko wtedy, gdy postać zbliża się do drzwi lub skrzyni.