# Auf Drehungen reagieren und Eingaben präzise halten

> 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.

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

Beim Drehen des Smartphones ändern sich die verfügbare Breite und Höhe. Dadurch sollten jedoch weder die aktuelle Eingabe unbemerkt ungültig noch die Simulation zurückgesetzt werden. Lege fest, ob dein Spiel Hoch- und Querformat unterstützt, und plane eine klare Ausweichlösung für die Ausrichtung mit weniger Platz. Aktualisiere Darstellung und Steuerung als eine koordinierte Änderung.

## Eine Layoutstrategie wählen

Ein responsives Spiel kann das Spielfeld neu anordnen, einen stabilen virtuellen Bereich mit Randflächen beibehalten oder deutlich zum Drehen des Geräts auffordern. Entscheide nach der Spielmechanik: Ein Rennspiel mit breiten Bahnen braucht möglicherweise Platz im Querformat, während ein vertikales Stapelspiel im Hochformat lesbar bleibt. Ziehe nicht die ganze Szene auseinander, um sie einzupassen; dadurch ändern sich Objektproportionen und Trefferbereiche können ungenau werden.

Verwende CSS-Media-Queries für Layoutentscheidungen, die von der Ausrichtung des Viewports abhängen. Reagiere nur dann auf Änderungen von ScreenOrientation, wenn das Skript diesen Zustand benötigt; verlasse dich nicht auf das veraltete Ereignis window.orientationchange. Eine Orientierungssperre sollte einen bewussten Grund und eine Ausweichlösung haben, statt als Abkürzung für ein ungeprüftes Layout zu dienen.

## Koordinatentransformation neu berechnen

Miss nach dem Drehen den aktuellen Spielcontainer und berechne seine Darstellungstransformation neu. Aktualisiere die Umrechnung von Zeiger- in Weltkoordinaten, bevor du eine weitere Aktion annimmst. Läuft gerade ein Ziehvorgang, führe ihn mit der neuen Transformation fort oder brich ihn sauber ab. Alte Zeigerkoordinaten mit der neuen Canvas-Größe zu mischen kann ein Objekt durch die Szene teleportieren.

Teste das Drehen vor einer Partie, während eines Ziehvorgangs und bei geöffneten Menüs. Prüfe, ob die Größenänderung keine neue Sitzung startet und alle Bedienelemente erreichbar bleiben. MDN beschreibt Änderungsereignisse und die Orientierungssperre von ScreenOrientation; nutze sie bei Bedarf und prüfe, ob das Gerät die Sperre tatsächlich zulässt.

## Fragen

**Sollte ein Browserspiel das Querformat erzwingen?** Nur wenn es einen guten Grund und eine klare Ausweichlösung gibt. Ein responsives Layout oder ein deutlicher Hinweis zum Drehen des Geräts kann besser sein als eine Bildschirmsperre.

**Löst eine Drehung immer ein Größenänderungsereignis aus?** Das Verhalten von Viewport und Ausrichtung unterscheidet sich je nach Browser und Gerät. Teste die Ereignisse, von denen dein Code abhängt, und miss nach der Änderung den tatsächlichen Spielcontainer erneut.

## Folge deiner Neugier

- [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.
- [Browserspiel-Eingaben auf verschiedenen Geräten testen](https://oneshotgems.ai/de/topics/testing-game-input-devices): Erstellen Sie eine kleine Eingabetestmatrix, die echtes Berührungs-, Maus-, Tastatur- und Orientierungsverhalten abdeckt, anstatt sich auf eine Desktop-Sitzung zu verlassen.
- [Ein Smartphone-Spiel für das Hochformat gestalten](https://oneshotgems.ai/de/topics/portrait-mobile-game-design): Gestalten Sie ein Spiel im Hochformat mit einem klaren Spielfeld, einem lesbaren Status und wechselnden Telefonansichtsfenstern, bevor Sie Inhalte oder Querformatunterstützung hinzufügen.

## Weiterlesen

- [MDN: Bildschirmausrichtung verwalten](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
- [MDN: ScreenOrientation-Änderungsereignis](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/game-orientation-changes