Pozycja i rozmiar obiektów UI

Chyba że obiekty interfejsu są pod kontrolą struktury układu lub modyfikatora/ograniczenia rozmiaru , masz pełną kontrolę nad ich pozycją i rozmiarem .Możesz także ustawić kolejność Z‑indexu nadrzędności, w której obiekty się pokrywają.

Podstawowe właściwości

Wszystkie GuiObjects dzielą wspólny zestaw właściwości do pozycji , rozmiaru , kotwicy i warstwy wewnątrz kontenera na ekranie lub w doświadczeniu.

Pozycja

Właściwość Position jest zestawem koordynatów UDim2, który pozycjonuje obiekt wzdłuż osi X i Y .A UDim2 jest reprezentowany przez obie wartości Scale i Offset dla każdej osi:

• Scale wartości reprezentują procent wielkości pojemnika wzdłuż odpowiedniego osi, dodatkowe do każdej Offset wartości.
• Offset wartości reprezentują ilość pikseli do przesunięcia obiektu na odpowiednim osi, dodatku dowolnych Scale wartości.

Aby edytować pozycję wybranego GuiObject , kliknij pole Pozycja w oknie Właściwości i wprowadź nowy ustawiaćkoordynatów UDim2.

Rozmiar

Właściwość Size jest zestawem koordynatów UDim2, który rozmiara obiektu wzdłuż osi X i Y .A UDim2 jest reprezentowany przez obie wartości Scale i Offset dla każdej osi:

• Skala — Wartości, które reprezentują procent wielkości pojemnika wzdłuż odpowiedniej osi, dodatkowe do wszystkich wartości odległości .
• Odległość — Wartości, które reprezentują rozmiar piksela obiektu wzdłuż odpowiedniej osi, dodatkowe do wszystkich wartości skali .

Aby edytować rozmiar wybranego GuiObject , kliknij pole Rozmiar w oknie Właściwości i wprowadź nowy ustawiaćkoordynatów UDim2.

Punkt zakotwiczenia

Właściwość AnchorPoint określa punkt pochodzenia z którego obiekt zmienia pozycję i rozmiar.Domyślne wartości są które umieszczają anchor w lewym górnym rogu obiektu.

wartości są frakcją z do w stosunku do rozmiaru obiektu, co oznacza, że obiekt z wartościami miejscami punktu zakotwiczenia znajduje się w połowie drogi (50%) poprzez obiekt zarówno poziomo, jak i pionowo, a wszelkie zmiany jego pozycji lub rozmiaru również przenoszą się i skalują z tej pozycji.

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

1. W oknie Właściwości, kliknij w polu Punkt odniesienia .

   

2. Wprowadź nową Vector2 koordynatę i naciśnij Enter.

   Studio interpretuje zaplanowaną parę wartości, gdy wprowadzono pojedynczą liczbę.Na przykład, wpisanie po prostu będzie zamienione na dla punktu odpoczynku w środku.

ZIndex

Właściwość ZIndex określa kolejność warstw, w której GuiObjects renderują się i pokrywają się ze sobą.Jeśli chcesz utworzyć nowe warstwy renderowania, musisz ustawić właściwość ZIndex na różne pozytywne lub ujemne wartości liczbowe dla każdego obiektu.

Dla kontenerów interfejsu użytkownika takich jak ScreenGui , domyślny ZIndexBehavior zawsze renderuje dzieci powyżej ich rodziców, a każde dziecko ZIndex jest używane do decyzji kolejności, w której jest renderowane nad innymi.

Aby edytować ZIndex, znajdź ZIndex w oknie Właściwości i wprowadź nową wartość liczbową.

Struktury układu

Struktury układu pozwalają szybko zorganizować i wyświetlać na przykład w poziomym lub pionowym liście , w siatce równych rozmiarów płytek, w kolejności stron i więcej.Układy zazwyczaj zastępują lub wpływają na pozycję lub rozmiar obiektów pod ich kontrolą.

Czynniki cross-platformowe

Roblox jest z natury wieloplatformowy , ponieważ gracze mogą odkrywać i dołączać do doświadczeń na komputerze lub konsole, a następnie podnieść telefon i kontynuować tam, gdzie skończyli.Powinieneś zaprojektować swoje doświadczenia Roblox tak, aby były dostępne i przyjemne na wszystkich platformach , które wybrałeś do wsparcia, zamiast optymalizować dla jednej platformy i ignorować inne.

Zarezerwowane strefy

Na urządzeniach mobilnych domyślne kontrolki zajmują część lewego i prawego dolnego narożnika ekranu.Projektując interfejs użytkownika do doświadczenia, unikaj umieszczania ważnych informacji lub wirtualnych przycisków w tych strefach.

Strefy kciuków

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

Przycisk wygodnie w zasięgu prawej dłoni gracza

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

Pamiętaj, że komfortowe strefy kciuków różnią się między telefonami i tabletami, ponieważ tablety mają większy ekran.Przycisk umieszczony 40% poniżej górnego krawędza ekranu jest dostępny na telefonie, ale prawie niedostępny na tablecie.

Przycisk 40% z górnego krawędza telefonu, w zasięgu kciuk gracza

Przycisk 40% z górnego krawędza tabletu, trudno dotrzeć bez rozciągania

Niezawodnym podejściem na obu telefonach i tabletach jest względne pozycjonowanie niestandardowych przycisków w pobliżu często używanych kontroli, takich jak domyślny przycisk skoku, umieszczanie ich w zasięgu ręki.

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

Skrypt klienta - 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
	-- Poczekaj, aż przycisk skoku zostanie w pełni załadowany
	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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

Interfejs oparty na kontekście

Przestrzeń ekranu jest ograniczona na urządzeniach mobilnych, więc powinieneś wyświetlać tylko najważniejsze informacje podczas aktywnej rozgrywka.Na przykład, jeśli twoje doświadczenie obejmuje specjalną akcję wejściową do otwierania drzwi i skarbców, nie ma sensu stale pokazywać przycisku "otwarty" na ekranie.Zamiast tego użyj powiadomienia zbliżeniowego lub podobnej metody, aby akceptować wpis tylko wtedy, gdy postać zbliża się do drzwi lub skrzyni.