# Das Hochformat soll die wichtigste Spielentscheidung unterstützen

> Gestalten Sie ein Spiel im Hochformat mit einem klaren Spielfeld, einem lesbaren Status und wechselnden Telefonansichtsfenstern, bevor Sie Inhalte oder Querformatunterstützung hinzufügen.

- URL: https://oneshotgems.ai/de/topics/portrait-mobile-game-design
- Kategorie: Für Spieleentwickler
- Typ: Ratgeber
- Aktualisiert: 5. Oktober 2026

Ein Spiel im Hochformat ist keine Querformat-Szene, die in ein hohes Rechteck gepresst wird. Entscheiden Sie, was Spielende in den nächsten Sekunden erkennen und tun müssen. Ordnen Sie die Ansicht so an, dass diese Dinge gleichzeitig sichtbar bleiben. Erproben Sie eine Spielsituation im schmalsten unterstützten Anzeigebereich, bevor Sie ein langes Level erstellen.

## Reservieren Sie ein lesbares Spielfeld

Skizzieren Sie drei Bereiche: das aktive Spiel, dauerhafte Statusanzeigen und vorübergehende Hinweise. Reservieren Sie die Mitte zuerst für die Spielmechanik. Punkte, Leben und Pauseninformationen sollten auf einen Blick erkennbar sein, ohne Gefahren oder Ziele zu verdecken. Bei einem vertikalen Plattformspiel bleibt die nächste Landefläche oberhalb der Figur sichtbar. Bei einem Worträtsel benötigen Hinweis und aktive Buchstabenreihe genügend Breite, ohne von Overlays eingeengt zu werden.

Verwenden Sie die Breite des Ansichtsfensters anstelle einer geschätzten Auflösung des Mobilteils. MDN erklärt, wie das Viewport-Metaelement einen mobilen Browser anweist, die Gerätebreite für sein Seitenlayout zu verwenden. Überprüfen Sie das Spielfeld separat: Eine korrekt konfigurierte Seite kann immer noch eine Leinwand oder ein Panel enthalten, das eine feste Größe annimmt.

## Wählen Sie, wie sich das Spiel anpasst

Entscheiden Sie, ob sich die Spielwelt neu anordnet, eine Kamera der Aktion folgt oder ungenutzter Platz als Rand bleibt. Eine neue Anordnung eignet sich, wenn die Regeln mehr oder weniger Spalten erlauben. Eine Kamera eignet sich für eine Welt, die größer als der Bildschirm ist. Randbalken erhalten das vorgesehene Spielfeld, wenn sein Seitenverhältnis fest bleiben soll. Verzerren Sie keine Figuren und verschieben Sie keine Ziele, nur um jeden Pixel auszufüllen.

Prüfen Sie Systemoberflächen und Displayausschnitte, bevor Sie Bedienelemente am Rand verankern. Apples Layout-Richtlinien beschreiben sichere Bereiche und empfehlen, wichtige Inhalte nicht von Hardwareausschnitten verdecken zu lassen. Testen Sie für Android Smartphone- und Tablet-Seitenverhältnisse getrennt, wenn Sie beide unterstützen. Auch ein reines Hochformatspiel braucht ein klares Verhalten beim Drehen des Geräts, damit keine abgeschnittene halbe Szene entsteht.

## Überprüfen Sie eine komplette Runde

Führen Sie das Tutorial, einen geschäftigen Moment und den Endbildschirm mit einer schmalen Telefonbreite und einer größeren Gerätebreite aus. Fragen Sie an jedem Punkt, ob der Spieler das Ziel, die unmittelbare Bedrohung und den aktuellen Status gleichzeitig sehen kann. Korrigieren Sie Clipping und Hierarchie, bevor Sie Stufen hinzufügen.

## Fragen

**Sollte ein Hochformatspiel auch das Querformat unterstützen?** Nur wenn das Spieldesign davon profitiert. Eine Entscheidung nur für das Hochformat ist gültig, bietet jedoch ein nutzbares Layout, wenn sich das Gerät dreht, anstatt sich auf eine bestimmte Ausrichtungssperre zu verlassen.

**Sollte das HUD immer oben bleiben?** Nein. Platzieren Sie Informationen so, dass sie sichtbar bleiben, ohne mit der eigentlichen Spielmechanik zu konkurrieren. Testen Sie während des Spiels, bei Overlays und auf dem Endbildschirm, denn die beste Position hängt vom Spielfeld ab.

## Folge deiner Neugier

- [Entwicklung mobiler Spiele: Wählen Sie zuerst Ihr Ziel](https://oneshotgems.ai/de/topics/mobile-game-development): Planen Sie ein Spiel für Telefone, vergleichen Sie Browser- und native Builds und wählen Sie einen praktischen ersten Arbeitsablauf, bevor Sie mobilspezifische Systeme hinzufügen.
- [Responsive Layouts für Browserspiele erstellen](https://oneshotgems.ai/de/topics/responsive-game-layouts): Passen Sie eine Spieloberfläche an ihren Container an, ohne den Simulationsstatus an die Bildschirmabmessungen zu binden, und testen Sie das Layout in wechselnden Ansichtsfenstern.
- [Orientierungswechsel in Browserspielen behandeln](https://oneshotgems.ai/de/topics/game-orientation-changes): Halten Sie das Spiel lesbar, wenn sich ein Gerät dreht, indem Sie das Layout und die Eingabezuordnung neu berechnen, ohne die Ausrichtung als Neustart des Spiels zu behandeln.
- [Entwerfen Sie Spiel-Feedback, das jede Aktion erklärt](https://oneshotgems.ai/de/topics/game-feedback-design): Lassen Sie das Spiel-Feedback zeigen, was sich geändert hat, warum es sich geändert hat und was der Spieler als Nächstes tun kann, ohne den Spielbereich abzudecken.

## Weiterlesen

- [MDN-Ansichtsfenster-Metaelement](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Richtlinien für die Benutzeroberfläche von Apple: Layout](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Richtlinien für das Design von Android-Spielen](https://developer.android.com/games/design/overview?hl=en)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/portrait-mobile-game-design