Position und Größe von UI-Objekten

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

Kern Eigenschaften

Alle GuiObjects teilen sich eine grundlegende Menge von Eigenschaften zur Positionierung, Größe, Anker und Schicht innerhalb eines On-Screen oder In-Erfahrung Containers.

Position

Die Position-Eigenschaft ist ein UDim2 Koordinaten-Set, das 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, additive zu allen Offset Werten.
• Offset Werte repräsentieren, wie viele Pixel das Objekt auf der entsprechenden Achse verschoben werden soll, additive zu allen Scale Werten.

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

Größe

Die Size-Eigenschaft ist ein UDim2 Koordinaten-Set, das 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:

• Skala — Werte, die einen Prozentsatz der Größe des Containers entlang der entsprechenden Achse darstellen, additive zu sämtlichen Offset Werten.
• Offset — Werte, die die Pixel-Größe des Objekts entlang der entsprechenden Achse darstellen, additive zu sämtlichen Skalen Werten.

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

AnchorPoint

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

Die Werte von AnchorPoint 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 auf halber Strecke (50%) durch das Objekt sowohl horizontal als auch vertikal platziert, und alle Änderungen an seiner Position oder Größe bewegen und skalieren sich nach außen von diesem Punkt.

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

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

   

2. Geben Sie ein neues Vector2 Koordinaten-Set ein und drücken Sie Enter.

   Das Studio leitet das beabsichtigte Werte-Paar ab, wenn eine einzelne Zahl eingegeben wird. Zum Beispiel wird die Eingabe von einfach 0.5 in 0.5, 0.5 umgewandelt, um einen Mittelpunkt-Ankerpunkt zu erzeugen.

ZIndex

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

Für UI-Container wie ScreenGui rendert das Standardverhalten von ZIndexBehavior immer Kinder über deren Eltern, und der ZIndex jedes Kindes wird verwendet, um die Reihenfolge zu entscheiden, in der es über anderen 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 darzustellen, beispielsweise in einer horizontalen oder vertikalen Liste, einem Grid gleichmäßig großer Kacheln, einer Sequenz seiten und mehr. Layouts überschreiben normalerweise die Position/Größe von Objekten, die unter ihrer Kontrolle stehen.

Plattformübergreifende Faktoren

Roblox ist von Natur aus plattformübergreifend, da Spieler Erfahrungen auf ihrem Handy oder Tablet entdecken und beitreten können, und später an dem Punkt fortfahren können, an dem sie aufgehört haben, auf ihrem PC oder der Konsole. Sie sollten Ihre Roblox-Erfahrungen so gestalten, dass sie auf allen Plattformen zugänglich und erfreulich sind, die Sie unterstützen möchten, anstatt nur für eine Plattform zu optimieren und andere zu vernachlässigen.

Reservierte Zonen

Auf mobilen Geräten belegen die Standardsteuerungen einen Teil der unteren linken und unteren rechten Ecken des Bildschirms. Wenn Sie das UI einer Erfahrung gestalten, sollten Sie es vermeiden, wichtige Informationen oder virtuelle Schaltflächen 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 häufig verwendete Schaltflächen nicht außerhalb von leicht erreichbaren Zonen platzieren.

Schaltfläche bequem innerhalb der Reichweite des rechten Daumens des Spielers

Schaltfläche schwer zu erreichen, es sei denn, der Spieler streckt seine Hand oder seinen Daumen

Denken Sie daran, dass komfortable Daumen-Zonen zwischen Handys und Tablets variieren, da Tablets einen größeren Bildschirm haben. Eine Schaltfläche, die 40% unter der oberen Bildschirmkante platziert ist, ist auf einem Handy erreichbar, aber fast unerreichbar auf einem Tablet.

Schaltfläche 40% von der oberen Kante des Handys, innerhalb der Reichweite des Daumens des Spielers

Schaltfläche 40% von der oberen Kante des Tablets, schwer ohne ausstrecken zu erreichen

Ein zuverlässiger Ansatz für Handys und Tablets ist die relative Positionierung von benutzerdefinierten Schaltflächen in der Nähe häufig verwendeter Steuerelemente wie der Standard-Sprungtaste, und deren Platzierung innerhalb einfacher Erreichbarkeit.

Der folgende Code, der in einem clientseitigen Skript innerhalb von StarterPlayerScripts platziert wird, erfasst die Position der Sprungtaste und erstellt eine Platzhalter-Schaltfläche, 20 Pixel links davon.

Client Script - Benutzerdefinierte Schaltfläche in der Nähe der Sprungtaste
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 Schaltfläche links von der Sprungtaste positionieren
	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("Das Gerät ist nicht touch-fähig oder das Studio emuliert kein touch-fähiges Gerät!")
end

Kontextbasierte UI

Der Bildschirmplatz ist auf mobilen Geräten begrenzt, daher sollten Sie nur die wichtigsten Informationen während des aktiven Spielens anzeigen. Zum Beispiel, wenn Ihre Erfahrung eine spezielle Eingabeaktion zum Öffnen von Türen und Schatztruhen enthält, macht es keinen Sinn, ständig eine "Öffnen"-Schaltfläche 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.