Sprites für Einsteiger: mein Schmetterling im Rückwärtsgang

Am meisten lerne ich oft aus Fehlern, über die ich lachen muss. In meinem Gartenspiel Tiny Garden Days war das ein Schmetterling, der mit dem Hinterteil voran über den Bildschirm flog.

Warum überhaupt Tiere im Garten?

Ein Garten, in dem sich nichts bewegt, wirkt schnell wie ein Standbild. Ich wollte, dass ab und zu etwas durchs Bild zieht, ein Schmetterling und ein Vogel. Dafür habe ich zum ersten Mal mit Sprites gearbeitet.

Sprites in zwei Sätzen

Ein Sprite-Sheet ist ein einzelnes Bild, auf dem mehrere Phasen einer Bewegung nebeneinander liegen. Beim Schmetterling sind das verschiedene Flügelstellungen, von weit offen bis fast geschlossen.

Die App zeigt diese Phasen in schneller Folge, und das Auge setzt sie zu einer Bewegung zusammen. Das Prinzip kennt jeder vom Daumenkino. Videospiele arbeiten seit Jahrzehnten so, weil es wenig Speicher braucht.

Für mich, der sonst vor allem Websites baut, war das neu. Und angenehm einfach: Die Flügel schlugen nach kurzer Zeit.

Und dann flog er rückwärts

Solange der Schmetterling an Ort flatterte, war alles gut. Erst als ich ihn über den Bildschirm schickte, fiel es auf. Sein Kopf zeigte in die eine Richtung, er bewegte sich in die andere. Fleissig mit den Flügeln schlagend, aber verkehrt herum. Ich musste laut lachen.

Der Fehler lag nicht in den Bildern. Die Animation regelt nur, wie die Flügel schlagen. Wohin das Tier dabei unterwegs ist, ist eine zweite Information. Und die hatte ich der App nie mitgegeben.

Die Lösung braucht kein neues Bild

Für die Gegenrichtung musste ich nichts neu zeichnen. Ich verwende dieselben Einzelbilder und spiegle sie, je nachdem, in welche Richtung der Schmetterling fliegt. Seither fliegt er mit dem Kopf voran.

Tipps, falls du selbst mit Sprites anfängst

• Trenne zwei Aufgaben: die Animation an Ort und die Bewegung über den Bildschirm. Das eine sagt nichts über das andere.
• Halte fest, in welche Richtung deine Figur in den Originalbildern schaut. Daraus ergibt sich, wann du spiegeln musst.
• Teste früh mit echter Bewegung und nicht nur mit der Animation an einem festen Punkt.
• Spiegeln spart Arbeit. Eine Bildreihe reicht für beide Richtungen.

Solche Fehler gehören für mich zum Reiz an Nebenprojekten. Ich darf etwas Neues ausprobieren und dabei auch mal danebenliegen.

Die kurze Originalnotiz dazu steht auf Salzwerk: Warum mein Schmetterling rückwärts flog. Wer dem Schmetterling selbst zuschauen will: Tiny Garden Days im App Store.