# So machst du ein Browserspiel, das auf Handys läuft

## Die meisten Leute probieren dein Spiel auf dem Handy aus, also braucht es eine Touch-Steuerung, ein Layout, das auf einen kleinen Bildschirm passt, und Sound, der nach einem Tippen startet. Go Bananas baut das in jedes Spiel ein, das es macht.

Ein Browserspiel läuft auf Handys, ohne dass man etwas installieren muss: Der Spieler öffnet einen Link und spielt. Aber ein Handy ist kein kleiner Computer. Es gibt keine Tastatur, der Bildschirm kann 320 Pixel breit sein, der Prozessor ist langsamer, und manche Browser spielen keinen Ton ab, bis der Spieler den Bildschirm berührt. Diese Anleitung erklärt, was sich auf dem Handy ändert, was Go Bananas schon für dich erledigt und wie du dein Spiel auf einem echten Gerät testest und verbesserst.

## Was sich auf dem Handy ändert

**Touch statt Tasten.** Pfeiltasten, Leertaste und Maus gibt es nicht. Jede Aktion braucht etwas zum Tippen, Ziehen oder Wischen, und Finger sind ungenauer als ein Mauszeiger. Ein Button, den man auf dem Laptop leicht anklickt, kann für einen Daumen zu klein sein.

**Kleine Bildschirme.** Die schmalsten Handys sind im Browser etwa 320 Pixel breit. Punktezähler, Lebensbalken und Menüs, die auf einem Monitor bequem Platz haben, können auf einem Handy die halbe Spielfläche verdecken. Spieler drehen ihr Handy außerdem quer, also muss sich das Spiel anpassen, wenn sich die Form des Bildschirms ändert.

**Leistung.** Handys haben weniger Speicher und langsamere Grafik als die meisten Computer. Große Bilder, schwere 3D-Modelle und fotorealistische 3D-Szenen laden langsam und können ein Spiel ruckeln lassen.

**Ton erst nach einem Tippen.** Auf dem iPhone kann eine Webseite keinen Ton abspielen, bis der Spieler den Bildschirm mindestens einmal berührt hat. Ein Spiel, das vor dem ersten Tippen Musik abspielen will, bleibt stumm.

## Was Go Bananas einbaut

Wenn Go Bananas ein Spiel macht, ist die KI angewiesen, Handys als Anforderung zu behandeln, nicht als Nebensache. Jedes neue Spiel soll auf Bildschirmen ab 320 Pixeln Breite funktionieren. In der Praxis heißt das:

- **Eine Touch-Steuerung, die zum Spieltyp passt.** 3D-Spiele bekommen links auf dem Bildschirm einen virtuellen Joystick, rechts Umsehen durch Ziehen und Aktions-Buttons von etwa 60 Pixeln Breite. Brettspiele nutzen Antippen zum Auswählen, mit Touch-Flächen von mindestens 40 Pixeln.
- **Buttons, groß genug für einen Daumen.** Buttons auf dem Bildschirm sind mindestens 44 Pixel groß, ein gängiges Minimum für bequemes Tippen.
- **Ein HUD, das nicht im Weg ist.** Punktestände und Statustexte bleiben aus der Spielfläche heraus, und ihre Schriftgrößen skalieren mit dem Bildschirm, statt fest zu bleiben.
- **Scharfe Grafik auf Bildschirmen mit hoher Pixeldichte.** Das Canvas des Spiels füllt den Bildschirm und wird für die Pixeldichte des Handys skaliert, damit es auf modernen Displays nicht verschwommen aussieht.
- **Anpassung, wenn das Handy gedreht wird.** Spiele reagieren, wenn sich die Fenstergröße ändert, sodass sich das Layout neu ordnet, wenn du das Handy quer drehst.
- **Tippen, wo du es erwartest.** Touch-Positionen werden in die eigenen Koordinaten des Spiels umgerechnet, sodass ein Tippen dort landet, wo dein Finger ist, selbst auf einem skalierten Canvas.
- **Ton, der auf dem iPhone funktioniert.** Jedes Spiel bekommt einen Sound-Helfer, der den Ton beim ersten Tippen freischaltet und dem Stummschalter der Website folgt. Dafür musst du keinen besonderen Code schreiben.

Nichts davon ist garantiert für jede Idee perfekt, also teste dein Spiel auf einem Handy, bevor du es teilst.

## Im Vollbild spielen

Öffne in einem Spiel das **Menu** (Menü) des Spiels und wähle Vollbild. Auf Handys, die einer Webseite keinen Vollbildmodus erlauben, sagt Go Bananas dir das und schlägt vor, das Handy stattdessen quer zu drehen, was dem Spiel mehr Platz gibt.

## Go Bananas zum Startbildschirm hinzufügen

Du kannst Go Bananas zum Startbildschirm deines Handys hinzufügen, damit es sich wie eine App öffnet, ohne die Adressleiste des Browsers. Wo der Browser das unterstützt, bietet Go Bananas an, sich selbst zu installieren. Auf dem iPhone zeigt es die Schritte, um das in Safari zu erledigen, und wenn du auf dem iPhone einen anderen Browser nutzt, bittet es dich, die Seite zuerst in Safari zu öffnen, weil dort nur Safari sie zum Startbildschirm hinzufügen kann.

## Auf einem echten Handy testen

Die Handy-Vorschau eines Desktop-Browsers ist ein guter Anfang, aber sie zeigt nicht, wie sich die Steuerung unter dem Daumen anfühlt, wie schnell das Spiel über mobile Daten lädt oder ob der Ton startet. Teste auf einem echten Handy:

1. **Veröffentlichte Spiele:** Öffne das Spiel auf Go Bananas und nutz den QR-Code („Scan to play on mobile“, zum Spielen auf dem Handy scannen). Richte die Kamera deines Handys darauf, und das Spiel öffnet sich auf dem Handy.
2. **Entwürfe:** Ein Entwurf ist privat, deshalb wird kein QR-Code angeboten. Melde dich auf dem Handy bei deinem Konto an und öffne das Spiel aus deinen Entwürfen.
3. Spiel ein paar Minuten, mit dem Handy hochkant und quer. Prüf, ob jeder Button leicht zu treffen ist, ob nichts Wichtiges hinter dem Punktestand oder dem Menü versteckt ist und ob der Ton nach deinem ersten Tippen startet.
4. Probier es über mobile Daten und über WLAN, wenn dein Spiel große Bilder oder 3D-Dateien verwendet.

## Handy-spezifische Änderungen anfragen

Wenn etwas auf dem Handy nicht gut funktioniert, beschreib das Problem im Änderungs-Chat in einfachen Worten. Sag genau, was du gesehen hast und wo. Zum Beispiel:

- „Auf Handys ist der Sprung-Button zu klein. Mach ihn doppelt so groß und verschieb ihn in die untere rechte Ecke.“
- „Auf einem kleinen Handy verdeckt der Punktestand den oberen Teil des Spielfelds. Verschieb ihn in eine schmale Leiste über dem Spielfeld.“
- „Füg für Handys Pfeile nach links und rechts auf dem Bildschirm hinzu und blende sie auf Computern aus.“
- „Wenn ich mein Handy quer drehe, füllt das Spiel den Bildschirm nicht. Lass es sich an die neue Bildschirmgröße anpassen.“
- „Die 3D-Szene ist auf meinem Handy langsam. Nimm auf Handys weniger Bäume und einfachere Schatten.“

Änderungen dauern meist weniger als eine Minute, und jede wird als neue Version gespeichert, sodass du zurückgehen kannst, wenn eine Änderung etwas verschlechtert.

## Dateien klein halten für Handys

Die Dateien, die du einem Spiel hinzufügst, haben den größten Einfluss auf die Ladezeit. Ein paar Faustregeln:

- **Bilder:** Verwende Bilder, die nicht größer sind, als sie auf dem Bildschirm erscheinen. Ein Hintergrund, der 1.080 Pixel breit angezeigt wird, muss nicht 6.000 Pixel breit sein. WebP-Dateien sind bei gleicher Qualität meist viel kleiner als PNG oder JPEG. Siehe [WebP-Dateien in Browserspielen](/formats/webp).
- **3D-Modelle:** GLB ist das beste Format für 3D-Modelle. Halte die Zahl der Polygone und die Texturgrößen in Grenzen. FBX-Modelle, die du auf Go Bananas hochlädst, werden in GLB umgewandelt und ihre Texturen auf 512 mal 512 Pixel verkleinert, was auf Handys hilft. Siehe [GLB-Dateien in Browserspielen](/formats/glb).
- **Fotorealistische 3D-Szenen (Gaussian Splats):** Die sehen beeindruckend aus, sind aber schwer für Handys. Go Bananas dünnt sie beim Hochladen aus, auf 500.000 Punkte bei PLY-Dateien und 300.000 Splats bei SPZ-Dateien, aber auf älteren Handys können sie trotzdem langsam sein. Siehe [PLY-Dateien in Browserspielen](/formats/ply).
- **Sound:** Jeder Audio-Upload wird in eine komprimierte MP3 umgewandelt, und jede Datei ist auf 5 MB und 120 Sekunden begrenzt, sodass Sound selten Ladeprobleme verursacht.

## Eine kurze Handy-Checkliste

Bevor du dein Spiel teilst, prüf Folgendes:

- Jede Aktion lässt sich per Touch ausführen.
- Die Buttons sind mit dem Daumen leicht zu treffen.
- Punktestand und Menüs verdecken auf einem kleinen Bildschirm nicht die Spielfläche.
- Das Spiel passt sich an, wenn du das Handy drehst.
- Der Ton startet nach dem ersten Tippen, und der Stummschalter stellt ihn ab.
- Es lädt über mobile Daten in angemessener Zeit.

## Weiterlesen

- [Ein Videospiel machen](/guides/how-to-make-a-video-game)
- [Grundlagen des Game Designs](/guides/game-design-basics)
- [So beschreibst du ein Spiel, damit die KI baut, was du willst](/guides/how-to-describe-a-game)
- [So machst du ein 3D-Spiel](/guides/3d-games)
- [Sound und Musik für dein Spiel](/guides/sound-and-music)
- [So machst du ein Multiplayer-Spiel](/guides/multiplayer-games)
- [So veröffentlichst und teilst du dein Spiel](/guides/publish-and-share)
- [Spiele mit ChatGPT oder Claude erstellen und spielen](/guides/chatgpt-and-claude)
- [Alle Dateiformate](/formats)