Pozycjonowanie i rozmiar obiektów UI

Chyba że obiekty UI są kontrolowane przez strukturę układu lub modyfikator/ograniczenie rozmiaru, masz pełną kontrolę nad ich pozycją i rozmiarem. Możesz również ustawić porządek warstw Z‑indeksu, w którym obiekty się nakładają.

Właściwości podstawowe

Wszystkie GuiObjects dzielą zestaw podstawowych właściwości do pozycjonowania, zmiany rozmiaru, punktu kotwiczenia i warstwy w kontenerze na ekranie lub w grze.

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 wszelkich wartości Offset.
• Wartości Offset reprezentują, o ile pikseli należy przesunąć obiekt wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Scale.

Aby edytować pozycję wybranego GuiObject, kliknij pole Position w oknie Właściwości 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:

• Scale — 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ą rozmiar obiektu w pikselach wzdłuż odpowiadającej osi, dodawane do wszelkich wartości Scale.

Aby edytować rozmiar wybranego GuiObject, kliknij pole Size w oknie Właściwości 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 punkt kotwiczenia w lewym górnym rogu obiektu.

Wartości AnchorPoint są ułamkiem od 0 do 1, w odniesieniu do rozmiaru obiektu, co oznacza, że obiekt z wartościami AnchorPoint równymi (0.5, 0.5) umieszcza punkt kotwiczenia w połowie (50%) obiektu zarówno w poziomie, jak i w pionie, a wszelkie zmiany w jego pozycji lub rozmiarze przesuwają i skalują się od tego punktu.

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

1. W oknie Właściwości kliknij w pole AnchorPoint.

   

2. Wprowadź nową współrzędną Vector2 i naciśnij Enter.

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

ZIndex

Właściwość ZIndex definiuje porządek warstw, w którym GuiObjects renderują się i nakładają 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 nad ich rodzicami, a ZIndex każdego dziecka jest używane do określenia kolejności, w jakiej renderuje się nad innymi.

Aby edytować ZIndex obiektu, znajdź ZIndex w oknie Właściwości 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 jednorodnych kafelków o tym samym rozmiarze, 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 międzyplatformowy, ponieważ gracze mogą odkrywać i dołączać do gier na swoim telefonie lub tablecie, a następnie kontynuować tam, gdzie przerwali na swoim komputerze lub konsoli. Powinieneś projektować swoje gry Roblox, aby były dostępne i przyjemne na wszystkich platformach, które zdecydujesz się wspierać, zamiast optymalizować dla jednej platformy i zaniedbywać inne.

Zarezerwowane strefy

Na urządzeniach mobilnych domyślne kontrolki zajmują część dolnych lewych i dolnych prawych rogów ekranu. Kiedy projektujesz UI gry, 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ęganie 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 kciuka gracza

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

Pamiętaj, że wygodne 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 prawie 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 relatywne pozycjonowanie niestandardowych przycisków w pobliżu często używanych kontrolek, takich jak domyślny przycisk skoku, umieszczając je w łatwo dostępnym zasięgu.

Poniższy kod, umieszczony w skrypcie po stronie klienta w StarterPlayerScripts, pobiera pozycję przycisku skoku i tworzy placeholder przycisku 20 pikseli po jego lewej stronie.

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 po lewej stronie 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 dotykowe lub Studio nie emuluje urządzenia dotykowego!")
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 twoja gra zawiera specjalną akcję wejściową do otwierania drzwi i skarbów, nie ma sensu ciągłe wyświetlanie przycisku "otwórz" na ekranie. Zamiast tego użyj proximity prompt lub podobnej metody, aby akceptować wejście tylko wtedy, gdy postać zbliża się do drzwi lub skarbu.