Studio / ROBLOX

Kartenproportionen in Roblox Studio: UIAspectRatioConstraint einrichten

Erhalte die Form des richtigen Elements, ohne ein quadratisches Symbol mit einer langen Beschreibung zu verbinden. Wähle das Ziel, setze das Seitenverhältnis und prüfe schmale Bereiche, Layouts und Übersetzungen.

Aktualisiert: 2026-10-07

Finde, was tatsächlich gestreckt wird #

Beginne mit einem Element: etwa einem quadratischen Gegenstandsbild, das beim Ändern der Panelgröße breit wird. Prüfe getrennt, ob der Bildbereich seine Form ändert oder sich nur andere Kartenelemente verschieben. Das sind unterschiedliche Aufgaben. Proportionen erhalten bedeutet, das Verhältnis von Breite zu Höhe zu halten, nicht überall dieselbe Pixelzahl.

Formuliere eine Erwartung: „Der Symbolbereich bleibt bei Änderungen des Elternobjekts quadratisch.“ Das ist prüfbar und verspricht keine Reparatur des ganzen Menüs. Hier verwenden wir eine vorgeschlagene Übungskarte; veröffentlichte Spiele und tatsächliche Studio-Größen wurden dafür nicht gemessen.

Wähle das Element mit festem Verhältnis #

Teile ItemCard im Beispiel in IconArea, Title und Description. Das Symbol kann ein Quadrat brauchen, während Text mehrere Zeilen benötigt. Eine quadratische Beschränkung der ganzen Karte erzeugt eine andere Gestaltungsaufgabe: Die lange Beschreibung muss weiterhin in diese Form passen.

Beginne mit IconArea. Die Namen sind unsere Beispiele; Roblox erstellt diese Struktur nicht automatisch. Lege einen eigenen Frame an oder verwende ein passendes GuiObject im Prototyp. Enthält es ein ImageLabel, prüfe dessen Platzierung getrennt: Ein quadratischer äußerer Container erklärt nicht alle Einstellungen seiner Bildkinder.

Füge den Constraint unter dem Ziel ein #

Finde das genaue Element in Explorer und füge UIAspectRatioConstraint als Kind hinzu. Laut Roblox betrifft dieser Constraint das übergeordnete GuiObject. Wähle den Constraint selbst und suche AspectRatio.

Prüfe vor der weiteren Einrichtung die Hierarchie: ItemCard → IconArea → UIAspectRatioConstraint, wenn IconArea das Ziel ist. Direkt unter ItemCard betrifft der Constraint die ganze Karte. Ähnlich benannte Elemente in anderen Panels sind leicht zu verwechseln. Prüfe deshalb das Elternobjekt, nicht nur den Eigenschaftsnamen.

Constraint betrifft sein Elternobjekt — Eigene Übungshierarchie: IconArea wird begrenzt; Text bleibt daneben.

Das Verhältnis richtig einstellen und lesen #

AspectRatio beschreibt Breite geteilt durch Höhe. Für ein Quadrat wähle 1, für doppelte Breite 2 und für halb so viel Breite wie Höhe 0.5. Eingetragen wird das Zahlenverhältnis, nicht die Zeichenfolge „1:1“ oder eine Pixelzahl.

Beginne mit einem Verhältnis und ändere es nicht bei jeder Bildschirmgröße, wenn die Form gleich bleiben soll. Nutze für ein quadratisches Bild einen eigenen quadratischen Inhalt und beobachte Streckung. Unsere Grafik mit drei Rechtecken erklärt Verhältnisse; sie zeigt keine gemessene Studio-Oberfläche.

Form und absolute Größe trennen #

Quadrate von 120×120 und 180×180 unterscheiden sich in der Größe, haben aber beide Verhältnis 1. Ein Rechteck von 240×120 hat Verhältnis 2, eines von 120×240 Verhältnis 0.5. Das sind gewählte Rechenbeispiele, keine Messwerte unseres Projekts. Sie helfen, wenn du ein Quadrat erwartest, aber nur die Breite vergleichst.

Ist die Form richtig, die Karte aber zu groß, verwende kein beliebiges Verhältnis nur zum Verkleinern. Prüfe zuerst Containergröße und Größenbegrenzung. UISizeConstraint und UIAspectRatioConstraint betreffen verwandte, aber verschiedene Aufgaben: Größengrenzen und Proportionen. Ihr gemeinsames Ergebnis musst du im Layout prüfen.

Übungsgrößen	Breite zu Höhe
120 × 120	1
180 × 180	1
240 × 120	2
120 × 240	0.5

Mit schmalem und breitem Elternbereich wiederholen #

Behalte Gegenstand und Text bei und vergleiche zwei verfügbare Elternbereiche: schmal und breit. Notiere Elterngröße, beobachtete Breite und Höhe des Ziels sowie das eingestellte Verhältnis. Für Gerätebildschirme hilft unsere separate Device-Simulator-Anleitung. Wechsle nicht zugleich das Profil und den Karteninhalt.

Prüfe auch die Position: Ein Symbol kann quadratisch bleiben und trotzdem den Ausgang verdecken oder den verfügbaren Bereich verlassen. Das widerspricht nicht der Rechnung, sondern zeigt ein anderes Layoutproblem. Wiederhole nach der Änderung dasselbe Größenpaar und denselben Gegenstand.

Layouts und andere Constraints beachten #

Bei Beteiligung an UIListLayout lässt sich die Elementgröße nicht nur aus Listeneinstellungen erklären. Die Dokumentation warnt, dass UIAspectRatioConstraint die Größensteuerung des Layouts überlagert. Notiere vorhandene Layouts und andere Constraints, bevor du mehrere Eigenschaften gleichzeitig änderst.

Vergleiche zur Untersuchung ein isoliertes Übungselement mit dem in der Liste. Nutze einen separaten Prototyp, bewahre die ursprüngliche Struktur und notiere eine geänderte Einstellung. Entferne nicht das Layout des echten Menüs, nur weil ein einzelnes Bild richtig aussieht. Die Form außerhalb der Liste prüft nicht die Platzierung darin.

Lange Namen und Übersetzungen getrennt prüfen #

Setze erst einen kurzen Titel und dann eine lange Zeichenfolge ein, die wirklich vorkommen kann. Prüfe Titel, Beschreibung und verfügbare Aktion. Ein Seitenverhältnis wählt keine Schriftgröße und garantiert nicht, dass jede Übersetzung passt. Roblox behandelt Textgrößenbegrenzung und automatische Größen getrennt von Proportionen.

Fehlt Platz, entscheide, was die Person lesen soll: volle Beschreibung, mehrere Zeilen oder ein separates Detailpanel. Mache Text nicht unlesbar, nur um das äußere Quadrat zu erhalten. In unserem Beispiel ist das Symbol quadratisch; Bildform und Textbereich können getrennt geplant werden.

Die Handlung statt nur das Bild prüfen #

Öffne die Karte, wähle einen Gegenstand und schließe das Panel mit der vorgesehenen Bedienung. Wiederhole nach Größenänderungen. Richtige Geometrie beweist weder Knopfbehandlung noch Auswahlzustand oder Touch-Weg. Das sind Prüfungen des Interface-Verhaltens.

Ein erfundener Fall: Das Symbol ist jetzt quadratisch, aber benachbarter Text verdeckt den Ausgang und verhindert seine Betätigung. Halte beide Ergebnisse fest: Proportion korrigiert, Ausgang noch zu prüfen. Erkläre nicht die ganze Karte anhand eines Bildes für fertig. Das Beispiel erzeugt keine tatsächliche Auswahl- oder Schließlogik.

Einen verständlichen Ergebnisbogen behalten #

Notiere Ziel, Elternobjekt, AspectRatio, verfügbaren Bereich, Karteninhalt und Layoutbeteiligung. Ergänze Erwartung und Beobachtung je Anordnung. Ist der Test nur geplant, kennzeichne das: Eine Grafik und eine Rechnung sind kein Studio-Durchlauf.

Unser Beispiel ist bereit, wenn die gewünschte Form zusammen mit lesbarem Text und erreichbarer Aktion unter den gewählten Bedingungen besteht. Das garantiert keine gleiche physische Größe oder alle Geräte und Übersetzungen. Die eigenen Grafiken erklären Verhältnis und Hierarchie statt Messwerten echter Spiele.

Prüfung	Aufzeichnung
Constraint-Ziel	Genaues Element und Elternobjekt
Layout	Liste und weitere Constraints
Lange Übersetzung	Derselbe Text bei zwei Größen
Handlung	Auswahl- und Schließweg

Originalquellen

Roblox Creator Hub — Size modifiers and constraints
Roblox Creator Hub — UIAspectRatioConstraint