Positionierung und Skalierung von UI-Objekten | Dokumentation

Es sei denn, UI-Objekte sind unter der Kontrolle einer 布局结构 oder eines Size Modifier/Constraints, hast du volle Kontrolle über ihre Position und 2>Größe2>. Du kannst auch den Z-Index 5>Layering5> Orden in der die Objekte überlappen.

Kern-Eigenschaften

Alle GuiObjects teilen ein Kernset von Eigenschaften zu Position , Größe , 1>Anker1> und 4>Schicht4> in einem On-Screen- oder In-Experience-Container.

Position

Die Position Eigenschaft ist ein UDim2 Koordinatensatz, der das Objekt entlang der X und 2>Y2> Achsen positioniert. Ein 5>Datatype.UDim25> wird durch sowohl

Skala — Werte, die einen Prozentsatz der Containergröße entlang der entsprechenden Achse repräsentieren, fügen Sie dem entsprechenden Offset-Wert hinzu.
Offset — Werte, die darstellen, wie viele Pixel zum Verschieben des Objekts auf der entsprechenden Achse, additiv von jeder Skala -Werte.

Um die Position eines ausgewählten GuiObject zu bearbeiten, klicken Sie auf das Feld Position in dem Eigenschaften-Fenster und geben Sie ein neues 1> Datatype.UDim21> festlegenein.

Klammern und Leerstellen sind optional beim Eingeben eines UDim2 in Studio — Sie können einfach die vier Werte, die durch Kommas getrennt sind, eingeben, z. B. 0.25,40,0.1,20 , und Studio wird den beabsichtigten Wert festlegen.

Studio übernimmt auch die beabsichtigte Werteigenschaft, wenn eine einzige Zahl einge

Größe

Die Size Eigenschaft ist ein UDim2 -Koordinatensatz, der das Objekt entlang der X und 2>Y2> Achsen skaliert. Ein 5>Datatype.UDim25> wird durch sowohl

Skala — Werte, die einen Prozentsatz der Containergröße entlang der entsprechenden Achse repräsentieren, fügen sich additiv zu jedem Versatz -Wert hinzu.
Offset — Werte, die die Pixelgröße des Objekts entlang der entsprechenden Achse repräsentieren, additiv zu jedem Skalierungswert -Wert.

Um die Größe eines ausgewählten GuiObject zu bearbeiten, klicken Sie auf das Feld Größe in dem Eigenschaften-Fenster und geben Sie ein neues 1> Datatype.UDim21> festlegenein.

Klammern und Leerstellen sind optional beim Eingeben eines UDim2 in Studio — Sie können einfach die vier Werte, die durch Kommas getrennt sind, eingeben, z. B. 0.75,0,0.25,0 , und Studio wird den beabsichtigten Wert festlegen.

Studio übernimmt auch die beabsichtigte Werteigenschaft, wenn eine einzige Zahl einge

Ankerpunkt

Die AnchorPoint Eigenschaft definiert den Herkunftspunkt, von dem das Objekt seine Position und Größe ändert. Die Standardwerte Class.GuiObject.AnchorPoint sind 2>3>Class.GuiObject.AnchorPoint3>, die den Anker in der oberen linken Ecke des Objekts

AnchorPoint Werte sind ein Fraction von 0

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

In dem Eigenschaften-Fenster klicken Sie in das Ankerpunkt -Feld.
Geben Sie eine neue Vector2 Koordinat ein und drücken Sie Enter .

Studio infерiert das beabsichtigte Wertpaar, wenn eine einzige Zahl eingegeben wird. Zum Beispiel wird die Eingabe einfach 0.5 in 0.5, 0.5 umgewandelt, um einen Zentrumankerpunkt zu konvertieren.

Z-Index

Die ZIndex Eigenschaft definiert die Schichtordnung, in der GuiObjects rendern und überlappen. Wenn Sie neue Render-Schichten erstellen möchten, müssen Sie die ZIndex Eigenschaft für jedes Objekt auf verschiedene positive oder negative Zahlenwerte für jedes Objekt einstellen.

Für UI-Container wie ScreenGui , der Standard ZIndexBehavior rendert immer Kinder über ihren Eltern und jedes Kind's ZIndex wird verwendet, um die Reihenfolge zu entscheiden, in der es über andere rendert.

Um ein Objekt의 ZIndex zu bearbeiten, finden Sie ZIndex im Fenster Eigenschaften und geben Sie einen neuen Zählerwert ein.

Entwurfsstrukturen

Mit Layern kannst du Strukturen schnell organisieren und anzeigen GuiObjects , z. B. in einer horizontalen oder vertikalen Liste , einem Gitter von gleich großen Kacheln, einer 1> Seitenfolge1> und mehr. Layern überschreiben oder beeinflussen in der Regel die Position 4> /4> und die Größe

Layouter	Beschreibung
Liste	UIListLayout Positionen innerhalb von vertikalen oder horizontalen Zeilen innerhalb ihres Vorgängercontainers in horizontale Zeilen oder vertikale Spalten.
Raster	UIGridLayout Positionen innerhalb eines Gitterblocks von gleich großen Einheiten innerhalb ihres Vorgängercontainers.
Tabelle	UITableLayout Positionen der Schwester GuiObjects und deren Kinder in Tabelle format.
Seite	UIPageLayout organisiert seinen Schwester GuiObjects in einzigartige Seiten, die Sie über Scriptingauf das nächste Level übergehen können.

Cross-Platform-Faktoren

Roblox ist intrinsisch 跨平台 , da Spieler Erlebnisse auf einem PC oder einer Konsole entdecken und beitreten können, dann später ihr Telefon abholen und fortfahren, wo sie aushaben. Du solltest deine Roblox-Erlebnisse so gestalten, dass sie auf allen Plattformen, auf denen du Support, zugänglich und angenehm sind, anstatt optimiert für eine Plattform und vernachlässigt andere.

Reservierte Zonen

Auf mobilen Geräten belegen die Standardsteuerelemente einen Teil der unteren linken und unteren rechten Ecken des Bildschirms. Wenn Sie die UI eines Erlebnisses entwerfen, vermeiden Sie, wichtige Informationen oder virtuelle Schaltflächen in diesen Bereichen zu platzieren.

Wenn deine Erfahrung die Standard-Steuereinstellung von DevTouchMovementMode.UserChoice verwendet, können Spieler auf mobilen Geräten ihre Eingaben aus Dynamic Thumbstick , Classic Thumbstick oder 1> Tap to Move1> auswählen, wodurch die auf-Display-Steuerelemente und die reservierten Zonen le

Daumen-Zonen

Die meisten mobilen Spieler verwenden zwei Daumen - einer auf dem virtuellen Daumenstick und einer auf der Sprungschaltfläche. Abhängig von der physischen Größe des Geräts und der Hände des Spieler:inwird es unangenehm oder unmöglich, wenn Sie zu weit von den Ecken zu fern sind, also sollten Sie häufig verwendete Schaltflächen außerhalb leicht zugänglicher Zonen platzieren.

Knopf bequem in Reichweite des rechten Daumen des Spieler:in

Knopf schwer zu erreichen, wenn Spieler nicht den Hand oder den Daumen Streckt

Denken Sie daran, dass die angenehmen Daumenzonen zwischen Telefonen und Tablets unterschiedlich sind, da Tablets einen größeren Bildschirm haben. Ein Button, der 40% unter dem Bildschirmen befindet, ist auf einem Telefon leicht zu erreichen, aber fast unmöglich auf einem Tablet.

Button 40% von der oberen Kante des Telefons, innerhalb der Reichweite des Spieler:in

Knopf 40% von der oberen Kante des Tablets, schwer zu erreichen, ohne sich zu beugen

Ein zuverlässiger Ansatz auf beiden Telefonen und Tablets ist die relative Positionierung von benutzerdefinierten Schaltflächen in der Nähe häufig verwendeter Steuerelemente wie dem Standard-Sprung-Button, indem sie in Reichweite platziert werden.

Der folgende Codes, der in einem Client-seitigen Skript innerhalb von StarterPlayerScripts platziert ist, ruft die Position des Sprungknopfes ab und erstellt einen Platzhalter button 20 Pixel links.

Client-Skript - Benutzerdefinierte Schaltfläche in der Nähe des Sprungknopfes
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Warte, bis der Sprung-Button 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)

	-- Platieren Sie einen neuen benutzerdefinierten Knopf links vom Sprungknopf
	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

Kontextbasierte Benutzeroberfläche

Der Bildschirmplatz ist auf mobilen Geräten begrenzt, so solltest du nur die wichtigsten Informationen während der aktiven Gameplayanzeigen. Zum Beispiel, wenn deine Erfahrung einen speziellen Eingabevorgang enthält, um Türen und Schatztruhen zu öffnen, ist es nicht sinnvoll, die Schaltfläche "öffnen" auf dem Bildschirm immer anzuzeigen. Stattdessen verwende eine Nähe-Eingabe-Methode oder ähnliche Methode