Position und Größe von UI-Objekten

Es sei denn, UI-Objekte stehen unter der Kontrolle einer Layoutstruktur oder einer Größenmodifikation/Beschränkung, du hast volle Kontrolle über ihre Position und Größe.Du kannst auch den Z-Index Überlappungsordnung festlegen, in der Objekte übereinanderliegen.

Kerneigenschaften

Alle GuiObjects teilen ein Kernset von Eigenschaften auf Position, Größe, Anker und Layer innerhalb eines On‑Screen- oder In‑Experience-Containers.

Stelle

Die Eigenschaft Position ist ein UDim2 Koordinatensatz, der das Objekt entlang der Achsen X und Y positioniert.Ein UDim2 wird durch die Werte Scale und Offset für jede Achse repräsentiert:

• 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 sich auf die entsprechende achse verschieben, additiv zu allen Scale.

Um die Position eines ausgewählten GuiObject zu bearbeiten, klicke auf das Feld Position im Eigenschaften-Fenster und gib ein neues UDim2 festlegenein.

Größe

Die Eigenschaft Size ist ein UDim2 Koordinatensatz, der das Objekt entlang der Achsen X und Y vergrößert.Ein UDim2 wird durch die Werte Scale und Offset für jede Achse repräsentiert:

• Skala — Werte, die einen Prozentsatz der Größe des Containers entlang der entsprechenden Achse darstellen, additiv zu allen Versatzwerten .
• Versatz — Werte, die die Größe des Objekts Pixel an der entsprechenden Achse darstellen, additiv zu allen Skalierungs -Werten.

Um die Größe eines ausgewählten GuiObject zu bearbeiten, klicke auf das Feld Größe im Eigenschaften-Fenster und gib ein neues UDim2 festlegenein.

Ankerpunkt

Die Eigenschaft AnchorPoint definiert den Ursprungspunkt , von dem das Objekt ändert Position und Größe.Die Standard-AnchorPoint Werte sind (0, 0), die den Anker in der oberen linken Ecke des Objekts platziert.

AnchorPoint werte sind eine fraktion von 0 bis 1 , bezogen auf die größe des objekts, was bedeutet, dass ein objekt mit AnchorPoint werten von (0.5, 0.5) den ankerpunkt auf halbem weg (50%) durch das objekt sowohl horizontal als auch vertikal platziert, und alle änderungen an seiner position oder größe bewegen sich und skalieren von diesem punkt aus.

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

1. Klicke im Eigenschaften-Fenster auf das Feld Ankerpunkt .

   

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

   Studio interpretiert das beabsichtigte Wertpaar, wenn eine einzige Zahl eingegeben wird.Zum Beispiel wird das Eingeben von einfach 0.5 zu 0.5, 0.5 für einen mittleren Ankerpunkt konvertiert.

ZIndex

Die Eigenschaft ZIndex definiert die Schicht顺序, in der GuiObjects sich gegenseitig rendern und überlappen.Wenn du neue Renderingschichten erstellen möchtest, musst du die Eigenschaft ZIndex auf verschiedene positive oder negative Ganzzahlenwerte für jedes Objekt einstellen.

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

Um die ZIndex eines Objekts zu bearbeiten, suche ZIndex im Eigenschaften-Fenster und gib einen neuen Ganzzahlenwert ein.

Bauformenstrukturen

Layoutstrukturen ermöglichen es Ihnen, schnell zu organisieren und anzuzeigen GuiObjects, zum Beispiel in eine horizontale oder vertikale Liste, ein Netzwerk mit gleich großen Kacheln, eine Sequenzseite und mehr.Layouts überschreiben oder beeinflussen in der Regel die Position / Größe von Objekten unter ihrer Kontrolle.

Cross-Plattform-Faktoren

Roblox ist von Natur aus übergangskompatibel , da Spieler Erlebnisse auf einem PC oder einer Konsole entdecken und beitreten können, dann ihr Telefon abholen und dort weitermachen, wo sie aufgehört haben.Du solltest deine Roblox-Erlebnisse so gestalten, dass sie auf allen Plattformen , die du Supportmöchtest, zugänglich und angenehm sind, anstatt für eine Plattform zu optimieren und andere zu vernachlässigen.

Reservierte Bereiche

Auf mobilen Geräten occupieren die Standardsteuerelemente einen Teil der unteren linken und rechten Ecken des Bildschirms.Wenn du die UI eines Erlebnisses entwirfst, vermeide es, wichtige Informationen oder virtuelle Schaltflächen in diesen Zonen zu platzieren.

Daumenzonen

Die meisten mobilen Spieler verwenden zwei Daumen - einen auf dem virtuellen Daumenstick und einen auf dem Sprung-Button.Abhängig von der physischen Größe des Geräts und den Händen des Spieler:inwird das Erreichen zu weit von den unteren Ecken unangenehm oder unmöglich, also solltest du vermeiden, häufig verwendete Schaltflächen außerhalb von leicht zugänglichen Bereichen zu platzieren.

Taste bequem in der Nähe des rechten Daumens des Spieler:in

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

Denken Sie daran, dass sich komfortable Daumenzonen zwischen Telefonen und Tablets unterscheiden, weil Tablets ein größeres Display haben.Eine Schaltfläche, die 40% unter dem oberen Rand des Bildschirms platziert ist, ist auf einem Telefon erreichbar, aber fast unerreichbar auf einem Tablet.

Taste 40% von der oberen Kante des Telefons, in Reichweite des Daumens des Spieler:in

Taste 40% vom oberen Rand des Tablets, schwer zu erreichen ohne Streckung

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 der Standard-Sprungschaltfläche, die sie in leichter Reichweite platziert.

Der folgende Codes, platziert in einem Client-Skript innerhalb von StarterPlayerScripts , holt die Position des Sprungknopfes ab und erstellt einen Platzhalter -Button 20 Pixel links davon.

Client-Skript - Benutzerdefinierter Button 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)

	-- Platziere einen neuen benutzerdefinierten Button links vom Sprung-Button
	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 UI

Der Bildschirmplatz ist auf mobilen Geräten begrenzt, sodass du während des aktiven Gameplaynur die wichtigsten Informationen anzeigen solltest.Wenn deine Erfahrung beispielsweise eine spezielle Eingangsaktion enthält, um Türen und Schatztruhen zu öffnen, ist es nicht sinnvoll, ständig einen "offenen" Knopf auf dem Bildschirm anzuzeigen.Verwende stattdessen einen Näherungsaufforderung oder eine ähnliche Methode, um Eingaben nur dann zu akzeptieren, wenn der Charakter eine Tür oder eine Truhe erreicht.