Diese Seite wurde von der Cloud Translation API übersetzt.

Unterstützung mehrerer Formfaktoren und Bildschirmgrößen

Android-Geräte gibt es in einer Vielzahl von Formfaktoren und Bildschirmgrößen. Zu den häufigsten Kategorien gehören:

Smartphones
Tablets
Fernseher und Set-Top-Boxen
Laptops mit Android Runtime for Chrome

Diese Vielfalt bedeutet, dass Ihr Spiel verschiedene Bildschirmauflösungen hat, oft mit unterschiedlichen Seitenverhältnissen. Beispiel:

Ein Smartphone im Querformat mit einem Seitenverhältnis von 19:9 (2.280 × 1.080)
Ein anderes Smartphone im Querformat mit einem Seitenverhältnis von 20:9 (3.200 × 1.400)
Einen 1080p-HD-Fernseher mit einem Seitenverhältnis von 16:9 (1.920 x 1.080)
Ein Tablet mit einem Seitenverhältnis von 4:3 (2.048 × 1.536)

Beim Design Ihres Spiels sollten diese Unterschiede berücksichtigt werden, damit die Darstellung unabhängig von der Bildschirmauflösung und dem Seitenverhältnis des Geräts richtig dargestellt wird.

Projektionsmodi einblenden

Ein Defold-Projekt hat eine konfigurierbare Basisauflösung. Diese Auflösung wird eingestellt in die Datei game.project mithilfe der Felder Breite und Höhe in der Kategorie Anzeige.

Anzeigeeinstellungen für das Projekt aufheben — **Abbildung 1.** Die Projekteinstellungen für **Display**

Das Standardverhalten von Defold ist, mit der Basisauflösung zu rendern und dann zu skalieren. der tatsächlichen Auflösung des Zielgeräts entspricht. „Entfalten“ bezieht sich auf Stretch-Projektion in diesen Modus. Die gestreckte Projektion behält das ursprüngliches Seitenverhältnis. Bei einigen Spielen kann diese Standardeinstellung visuell akzeptabel sein. Das standardmäßige Defold-Renderingskript enthält zwei zusätzliche Projektionsoptionen , bei denen das grundlegende Seitenverhältnis beibehalten wird: Fixierte Bildschirmprojektion und feste Projektion.

Das folgende Beispiel zeigt ein Beispielprojekt, das für eine Basisauflösung entwickelt wurde von 480 x 272, die im Defold-Editor angezeigt werden.

In diesem Beispiel gilt Folgendes:

Ein tilemap-Objekt wird verwendet, um einen Frame um die Ränder der Basisauflösung zu zeichnen.
Zwei Sprite-Objekte und ein Textobjekt befinden sich innerhalb der Grenzen der Basisauflösung.
Vier Sprite-Objekte befinden sich außerhalb der Grenzen der Basisauflösung, also oben, unten, links und rechts.

Beispiel für das Layout eines Projektobjekts — **Abbildung 2.** Das Beispiel eines Projektobjektlayouts

Bei einer Displayauflösung von 960 × 544, also genau der doppelten Basisauflösung wird das Projekt so angezeigt:

Stretch-Projektion

Die folgenden Beispiele zeigen die Ergebnisse, wenn die Größe des Fensters mit Standardeinstellungen geändert wird Streckprojektion, bei der das Seitenverhältnis nicht beibehalten wird:

Beispielprojekt, das mithilfe einer Streckprojektion horizontal zusammengedrückt wurde — **Abbildung 4.** Das Beispielprojekt wurde unter Verwendung der Streckprojektion horizontal zusammengedrückt

Beispielprojekt, das mithilfe einer Streckprojektion horizontal gestreckt wurde — **Abbildung 5.** Das Beispielprojekt wurde unter Verwendung der Streckprojektion horizontal gestreckt

Projekt mit fester Anpassung

Im Projektionsmodus mit fester Anpassung wird das Seitenverhältnis der Basisauflösung beibehalten. Da das Seitenverhältnis beibehalten wird, ist ein zusätzlicher Bildschirmbereich vorhanden, die von der skalierten Basisauflösung abgedeckt ist. Je nach Hauptachse des Aspekts Verhältnisunterschied befindet sich dieser zusätzliche Bereich entweder oben und unten oder links und rechts von der Basisauflösung. Projektion mit fester Anpassung ändert die Basis um diesen Bereich zu berücksichtigen. Diese Änderung führt zu zusätzlichen Bereiche der Spielszene außerhalb des gerenderten Basisauflösungsbereichs. Das resultierende Bild wird dann an die Anzeigeauflösung angepasst.

Die folgenden Beispiele veranschaulichen das Projektions-Rendering mit fester Passform für ein Display. mit einem anderen Seitenverhältnis als der Basisauflösung von 480x272:

Beispielprojekt mit einem breiteren Seitenverhältnis unter Verwendung der Projektion mit fester Anpassung — **Abbildung 6:** Im Beispielprojekt auf einem Display mit einem höheren Seitenverhältnis als dem Basisseitenverhältnis unter Verwendung von fester Passform

Beispielprojekt mit einem höheren Seitenverhältnis und einer Projektion mit fester Anpassung — **Abbildung 7.** Das Beispielprojekt auf einem Display mit einem breiteren Seitenverhältnis als dem Basisseitenverhältnis unter Verwendung von fixierter Projektion.

Feste Projektion

Im Modus Feste Projektion wird das Seitenverhältnis der Basisauflösung beibehalten und die Pixelgröße angepasst Die Basisauflösung um einen angegebenen Zoomfaktor Je nach Display Auflösung und den Zoomfaktor, eine Teilmenge oder Obermenge des Basisauflösungsbereichs angezeigt werden.

Die folgenden Beispiele zeigen den festen Projektionsmodus bei Verwendung eines Bildschirms. Auflösung von 644 x 408 mit 1-fachem bzw. 2-fachem Zoomfaktor:

Beispielprojekt bei 644 × 408 mit 1-fachem Zoom und fester Projektion — **Abbildung 8.** Das Beispielprojekt bei einer Displayauflösung von 644 × 408 mit fester Projektion und 1-fachem Zoomfaktor

Beispielprojekt bei 644 × 408 mit 2-fachem Zoom und fester Projektion — **Abbildung 9.** Das Beispielprojekt bei einer Displayauflösung von 644 × 408 unter Verwendung einer festen Projektion mit einem 2-fachen Zoomfaktor

Projektionsmodi ändern

Der aktive Projektionsmodus kann zur Laufzeit gewechselt werden. Senden Sie dazu den entsprechenden an den Renderer gesendet. Diese Nachrichten werden mit der standardmäßigen Defold-Nachricht gesendet. System. Alle Meldungen im Projektionsmodus enthalten Parameter, die den Nah- und den Umkreis definieren der Ebene Z.

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Renderingskripte erweitern

Das Entfalten des Renderingverhaltens wird durch eine spezielle Skriptdatei gesteuert, die als Rendering bezeichnet wird. . Wie bei anderen Defold Engine-Skripten wird das Rendering-Skript in der Lua- Programmiersprache. Ein standardmäßiges Renderingskript wird bei der Projekterstellung eingefügt, Sie können es aber auch durch ein benutzerdefiniertes Renderingskript ersetzen.

Die Modi „streckt“, „feste Anpassung“ und „feste Projektion“ sind Features der Standardeinstellung Render-Skript. Bei Verwendung eines dieser Modi generiert das Renderingskript ein 2D- Orthografische Projektionsmatrix zur Verwendung beim Rendern von Spielobjekten. Die Konfiguration dieser Matrix in Abhängigkeit vom Projektionsmodus, verwendet.

Sie können ein benutzerdefiniertes Rendering-Skript verwenden, um die Konfiguration des Projektionsmatrix. Funktionen, die vom Standardskript nicht unterstützt werden, z. B. Letterbox- oder Pillarbox-Bild für unterschiedliche Seitenverhältnisse, können auch mit benutzerdefinierten Render-Skripten.

Open-Source-Entwickler haben Renderingskript- und Kamerapakete erstellt, die mehr Funktionen als die Standard-Defold-Skripts. Zwei häufig verwendete Pakete sind RenderCam und Defold-Orthographie:

GUI-System öffnen

Defold enthält ein GUI-System, das auf dem Konzept der GUI-Szenendateien basiert. GUI Szenendateien enthalten Objekte, die als Knoten bezeichnet werden und mit denen einzelne UI-Elemente wie als Bilder oder Text.

GUI-Szenendateien können als Komponente zu einem Defold-Spielobjekt hinzugefügt werden. GUI-Szenen und die darin enthaltenen Knoten werden separat gerendert und funktionieren etwas anders normalen Spielobjekten. Aufgrund dieser Unterschiede können mehrere Bildschirmauflösungen mit GUI-Szenen erfordern zusätzliche Überlegungen GUI-Systemkoordinaten und GUI-Knoten-Pivots und -Ankern.

GUI-Systemkoordinaten

Normale Defold-Spielobjekte geben ihre Koordinaten im Weltraum an. Eine Kamera -Objekt übersetzt den Weltraum in den Bildschirmraum und zeigt die Spielobjekte an, im aktuellen virtuellen Sichtfeld der Kamera liegen. Das GUI-System verwendet eine eigene eine separate Kamera einrichten. Knoten, die zu einer GUI-Szene gehören, verwenden Bildschirmraumkoordinaten anstelle von Weltraumkoordinaten. Wenn die Bildschirmauflösung von der Projektbasisauflösung, die für das Layout der GUI-Knoten verwendet wird, kann dies zu Knoten führen unterschiedliche Ränder haben relativ zu den Bildschirmrändern oder den Rändern eines übergeordneten Knotens. Defold bietet mehrere Optionen zur Anpassung des GUI-Layouts an, um Displayauflösung.

Drehpunkt und Anker des GUI-Knotens

GUI-Knoten können mithilfe der X-Anker und Y-Anker.

Wenn ein Knoten einen übergeordneten Knoten hat, befindet sich der Anker an den Rändern des übergeordneten Knotens.
Wenn ein Knoten keinen übergeordneten Knoten hat, befindet sich der Anker am Bildschirmrand.

Im Folgenden sehen Sie eine Beispielszene mit zwei GUI-Knoten, dem Controller in der unteren linken und der rechten oberen Ecke. Beide Knoten haben X-Anchor und Y-Anker auf None festgelegt:

**Abbildung 10.** Eine Beispielszene mit GUI-Elementen

Wird die Anzeigegröße ohne Anker angepasst, bleiben die Controller-Symbole Position in Relation zur Basisauflösung:

Die in der Größe angepasste Beispielszene mit GUI-Elementen, für die keine Anker festgelegt sind — **Abbildung 11.** Die in der Größe angepasste Beispielszene mit GUI-Elementen, für die Anker auf `None` gesetzt sind

Wenn der Y-Anker des Knotens unten links auf Bottom und der Y-Anker des Knotens oben rechts auf Top gesetzt ist, verankern die GUI-Knoten an den entsprechenden Bildschirmrändern:

Die in der Größe angepasste Beispielszene mit GUI-Elementen, bei denen Anker auf Kanten festgelegt sind — **Abbildung 12.** Die in der Größe angepasste Beispielszene mit GUI-Elementen, für die Anker auf `Edges` festgelegt sind

Die Eigenschaft Pivot eines GUI-Knotens gibt den Punkt an den Grenzen des Knotens an. Rechteck, das der Bildschirmraum-Koordinate Position entspricht Property. Für GUI-Knoten wird standardmäßig die Einstellung Center verwendet, sodass die Position in der direkten Mitte des Begrenzungsrechtecks. Andere mögliche Pivot-Tabellen umfassen die vier Himmelsrichtungen und die vier Diagonalen. Die Die Eigenschaft Pivot kann die Angabe von Randabständen vereinfachen, wenn sie in in Verbindung mit den Eigenschaften X-Anker und Y-Anker.

Im folgenden Beispiel hat der GUI-Knoten des Controller-Symbols links unten ein Position von 0,0 und Pivot auf Center festgelegt.

Ein GUI-Knoten, bei dem Pivot auf „Center“ gesetzt ist — **Abbildung 13.** Ein GUI-Knoten, bei dem **Pivot** auf `Center` festgelegt ist

Wenn Sie Pivot in South West ändern, führt dies zu der folgenden Anpassung:

Ein GUI-Knoten mit Pivot auf Südwesten — **Abbildung 14.** Ein GUI-Knoten, bei dem **Pivot** auf `South West` festgelegt ist

Anpassungsmodi für GUI-Knoten

Die Größe von GUI-Knoten kann angepasst werden, wenn die Bildschirmauflösung von der Basisanzeige abweicht Projektauflösung. Mit der Eigenschaft Anpassungsmodus wird das Skalierungsverhalten gesteuert. des Knoteninhalts. Für den Anpassungsmodus gibt es drei Einstellungen: Fit, Zoom und Stretch

An Fenstergröße anpassen

Mit der Einstellung Fit wird das Seitenverhältnis des Knoteninhalts beibehalten. Der Inhalt ist Skaliert, um entweder der Breite oder Höhe der angepassten Grenzen des Knotens zu entsprechen Rechteck. Die gewählte Achse hat den kleineren Unterschied. Dadurch wird sichergestellt, Der Inhalt passt in das Begrenzungsrechteck mit seinem ursprünglichen Seitenverhältnis.

Zoom

Mit der Einstellung Zoom wird auch das Seitenverhältnis des Knoteninhalts beibehalten. Zum Beispiel Fit gesetzt ist, wird der Inhalt mit Zoom entweder auf die Breite oder Höhe von das Rechteck mit den angepassten Begrenzungen. Im Gegensatz zu Fit verwendet Zoom die Achse mit dem größerer Unterschied von der Originalgröße als Übereinstimmungsziel. Das bedeutet, dass kann der skalierte Inhalt das Bounds-Rechteck überlaufen.

Das folgende Beispiel zeigt zwei GUI-Knoten mit unterschiedlichen Adjust Mode. Einstellungen. Für das Controller-Symbol links unten ist der Einstellungsmodus Fit angegeben, während Auf dem Controller-Symbol oben rechts ist für Einstellmodus Zoom eingestellt.

Zwei GUI-Knoten mit unterschiedlichen Einstellungen für den Anpassungsmodus — **Abbildung 15.** Zwei GUI-Knoten mit unterschiedlichen Einstellungen für den **Adjust Mode**

Strecken

Mit der Einstellung Stretch wird der Knoteninhalt so skaliert, dass er genau mit dem Knoteninhalt übereinstimmt. die in der Größe angepassten Begrenzungen. Das ursprüngliche Seitenverhältnis wird dabei nicht beibehalten.

GUI-Layouts

Defold bietet eine alternative Methode zum Anpassen von GUI-Layouts an verschiedene Bildschirme Auflösungen: Layouts. Layouts können einer GUI-Szene hinzugefügt werden, um Attribute des Standard-GUI-Knotens. Ein Layout ist mit einem bestimmten Bildschirm verknüpft. Problembehebung. Wenn mehrere Layouts verfügbar sind, wählt Defold das Layout aus. die der tatsächlichen Bildschirmauflösung am ehesten entspricht. Die Standardposition, Größe, Maßstab oder Grafikressource, die von einem GUI-Knoten verwendet wird, Layout.