Position und Größe von UI-Objekten

Es sei denn, UI-Objekte stehen unter der Kontrolle einer Layout-Struktur oder eines Größenmodifikators/-einschränkungen, haben Sie die volle Kontrolle über ihre Position und Größe. Sie können auch die Z-Index Schichtung festlegen, in welcher Objekte sich überlappen.

Kern-Eigenschaften

Alle GuiObjects teilen sich eine Kernreihe von Eigenschaften, um sie innerhalb eines On-Screen- oder In-Game-Containers zu positionieren, größenzuordnen, anzupassen und zu schichten.

Position

Die Position-Eigenschaft ist ein UDim2-Koordinatensatz, der das Objekt entlang der X- und Y-Achsen positioniert. Ein UDim2 wird durch sowohl Scale als auch Offset Werte für jede Achse dargestellt:

• Scale-Werte repräsentieren einen Prozentsatz der Größe des Containers entlang der entsprechenden Achse, additiv zu allen Offset-Werten.
• Offset-Werte repräsentieren, wie viele Pixel das Objekt auf der entsprechenden Achse verschoben werden soll, additiv zu allen Scale-Werten.

Um die Position eines ausgewählten GuiObject zu bearbeiten, klicken Sie auf das Position-Feld im Eigenschaften-Fenster und geben Sie einen neuen UDim2-Koordinatensatz ein.

Größe

Die Size-Eigenschaft ist ein UDim2-Koordinatensatz, der das Objekt entlang der X- und Y-Achsen in der Größe anpasst. Ein UDim2 wird durch sowohl Scale als auch Offset Werte für jede Achse dargestellt:

• Skalierung — Werte, die einen Prozentsatz der Größe des Containers entlang der entsprechenden Achse repräsentieren, additiv zu allen Offset-Werten.
• Offset — Werte, die die Pixel-Größe des Objekts entlang der entsprechenden Achse repräsentieren, additiv zu allen Skalierungs-Werten.

Um die Größe eines ausgewählten GuiObject zu bearbeiten, klicken Sie auf das Größe-Feld im Eigenschaften-Fenster und geben Sie einen neuen UDim2-Koordinatensatz ein.

AnchorPoint

Die AnchorPoint-Eigenschaft definiert den Ursprungspunkt, von dem aus das Objekt seine Position und Größe ändert. Die Standardwerte für AnchorPoint sind (0, 0), was den Anker in die obere linke Ecke des Objekts platziert.

AnchorPoint-Werte sind ein Bruchteil von 0 bis 1, relativ zur Größe des Objekts, was bedeutet, dass ein Objekt mit AnchorPoint-Werten von (0.5, 0.5) den Ankerpunkt in der Mitte (50%) des Objekts sowohl horizontal als auch vertikal platziert, und alle Änderungen an seiner Position oder Größe bewegen und skalieren sich von diesem Punkt aus.

Um den Ankerpunkt eines ausgewählten GuiObject anzuzeigen und zu bearbeiten:

1. Klicken Sie im Eigenschaften-Fenster in das AnchorPoint-Feld.

   

2. Geben Sie eine neue Vector2-Koordinate ein und drücken Sie Enter.

   Studio leitet das beabsichtigte Wertpaar ab, wenn eine einzelne Zahl eingegeben wird. Zum Beispiel wird die Eingabe von 0.5 in 0.5, 0.5 umgewandelt, um einen zentralen Ankerpunkt zu erhalten.

ZIndex

Die ZIndex-Eigenschaft definiert die Schichtreihenfolge, in der GuiObjects gerendert und sich überlappen. Wenn Sie neue Rendering-Schichten erstellen möchten, müssen Sie die ZIndex-Eigenschaft für jedes Objekt auf unterschiedliche positive oder negative Ganzzahlen setzen.

Für UI-Container wie ScreenGui rendert das Standardverhalten von ZIndexBehavior immer Kinder über ihren Eltern, und der ZIndex jedes Kindes wird verwendet, um die Reihenfolge zu bestimmen, in der es über andere gerendert wird.

Um den ZIndex eines Objekts zu bearbeiten, suchen Sie ZIndex im Eigenschaften-Fenster und geben Sie einen neuen Ganzzahlwert ein.

Layout-Strukturen

Layout-Strukturen ermöglichen es Ihnen, GuiObjects schnell zu organisieren und anzuzeigen, zum Beispiel in einer horizontalen oder vertikalen Liste, einem Raster aus gleich großen Kacheln, einer Sequenz von Seiten und mehr. Layouts überschreiben oder beeinflussen typischerweise die Position/Größe von Objekten, die unter ihrer Kontrolle stehen.

Plattformübergreifende Faktoren

Roblox ist von Natur aus plattformübergreifend, da Spieler Spiele auf ihrem Telefon oder Tablet entdecken und beitreten können, um später dort fortzufahren, wo sie auf ihrem PC oder ihrer Konsole aufgehört haben. Sie sollten Ihre Roblox-Spiele so gestalten, dass sie auf allen Plattformen, die Sie unterstützen möchten, zugänglich und angenehm sind, anstatt für eine Plattform zu optimieren und andere zu vernachlässigen.

Reservierte Zonen

Auf mobilen Geräten nehmen die Standardsteuerungen einen Teil der unteren linken und unteren rechten Ecken des Bildschirms ein. Wenn Sie die UI eines Spiels gestalten, vermeiden Sie es, wichtige Informationen oder virtuelle Tasten in diesen Zonen zu platzieren.

Daumen-Zonen

Die meisten mobilen Spieler verwenden zwei Daumen — einen auf dem virtuellen Daumenstick und einen auf der Sprungtaste. Je nach physischer Größe des Geräts und der Hände des Spielers wird es unangenehm oder unmöglich, zu weit von den unteren Ecken zu erreichen, daher sollten Sie vermeiden, häufig verwendete Tasten außerhalb von leicht erreichbaren Zonen zu platzieren.

Taste bequem innerhalb der Reichweite des rechten Daumens des Spielers

Taste schwer zu erreichen, es sei denn, der Spieler streckt die Hand oder den Daumen

Denken Sie daran, dass bequeme Daumen-Zonen zwischen Telefonen und Tablets unterschiedlich sind, da Tablets einen größeren Bildschirm haben. Eine Taste, die 40% unter der oberen Kante des Bildschirms platziert ist, ist auf einem Telefon erreichbar, aber auf einem Tablet fast unerreichbar.

Taste 40% von der oberen Kante des Telefons, innerhalb der Reichweite des Daumens des Spielers

Taste 40% von der oberen Kante des Tablets, schwer zu erreichen ohne Strecken

Ein zuverlässiger Ansatz auf sowohl Telefonen als auch Tablets ist die relative Positionierung von benutzerdefinierten Tasten in der Nähe häufig verwendeter Steuerungen wie der Standard-Sprungtaste, um sie innerhalb der Reichweite zu platzieren.

Der folgende Code, der in einem clientseitigen Skript innerhalb von StarterPlayerScripts platziert ist, ruft die Position der Sprungtaste ab und erstellt eine Platzhalter-Taste 20 Pixel links davon.

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Warten, bis die Sprungtaste vollständig geladen ist
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Neue benutzerdefinierte Taste links von der Sprungtaste platzieren
	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("Gerät ist nicht touch-fähig oder Studio emuliert kein touch-fähiges Gerät!")
end

Kontextbasierte UI

Der Bildschirmplatz ist auf mobilen Geräten begrenzt, daher sollten Sie während des aktiven Spiels nur die wichtigsten Informationen anzeigen. Wenn Ihr Spiel beispielsweise eine spezielle Eingabeaktion zum Öffnen von Türen und Schatztruhen enthält, macht es keinen Sinn, ständig eine "Öffnen"-Taste auf dem Bildschirm anzuzeigen. Verwenden Sie stattdessen einen Proximitäts-Prompt oder eine ähnliche Methode, um Eingaben nur zu akzeptieren, wenn der Charakter sich einer Tür oder Truhe nähert.