Idle Studio: aus einem flachen Bild eine animierte 2D-Figur, Open Source

Ein Charakterbild gibt es in den meisten Projekten schon: ein Maskottchen aus dem Logo, ein Artwork für ein Spiel, eine gezeichnete Figur für die Website. Was fehlt, ist die Bewegung. Idle Studio macht aus so einem flachen Bild eine Figur, die atmet, blinzelt und dem Mauszeiger nachschaut. Der Editor läuft im Browser, kostet nichts und gehört zum Open-Source-Projekt idle-web-animation, das ich unter MIT-Lizenz auf GitHub veröffentlicht habe.

Der Begriff kommt aus Spielen. Eine Idle-Animation ist das, was eine Figur tut, wenn der Spieler nichts tut: Sie steht da, atmet, schaut sich um. Genau diesen Zustand baut Idle Studio, und nur den. Laufzyklen, Sprünge oder Lippensynchronisation gehören nicht dazu, dafür gibt es Spine und Live2D. Was herauskommt, ist ein Ordner mit Bildebenen und einer Datei figure.json, den ein Player von 768 Zeilen JavaScript in jede HTML-Seite setzt. Kein Build, keine Abhängigkeiten, keine Laufzeitlizenz.

Vom flachen Bild zur Figur

Der Weg beginnt mit „Flat image…“. Das Bild erscheint als eine einzelne Ebene, die bereits atmet. Das reicht, um in wenigen Sekunden zu sehen, ob eine Figur überhaupt taugt.

Dann kommt das Zerlegen. Kein Programm weiß von selbst, dass der Kragen zur Brust gehört und der Riemen zum Rucksack. Deshalb malen Sie es hin: Unter „Mark“ setzen Sie mit dem Pinsel je Teil einen groben Klecks in eigener Farbe und geben ihm einen Namen. Der Name ist bereits das Rig, also das Skelett der Figur: kopf bekommt einen Drehpunkt am Hals und folgt der Maus, arm bekommt eine Schulter und schwingt. „Cut“ zerlegt das Bild entlang der Kleckse. Die Schnittkante folgt dabei den Kanten, die die Zeichnung schon hat, und dem Pinselstrich nur grob. Ein Regler für die Reichweite bestimmt, wie weit sich eine Marke ausbreiten darf. Der Schnitt im Studio ist bewusst grob. Er reicht, um eine Figur schnell zum Atmen zu bringen und zu sehen, ob sie taugt. Für eine saubere Figur schneiden Sie die Teile besser in einem Bildbearbeitungsprogramm frei, mit weichen Kanten und ohne Reste vom Nachbarteil, und laden die fertigen Ebenen hoch.

Eine automatische Zerlegung per KI habe ich vorher getestet. Das beste Modell, Seedream v5 Pro Layerize über fal.ai, kam gegen ein von Hand gebautes Rig auf eine Überdeckung von 0,47. Das ist zu wenig für Drehpunkte, die an Gelenken sitzen sollen. Deshalb bleibt der Pinsel der Weg, und die Maschine übernimmt nur den Schnitt entlang der Kanten.

Wer die Ebenen schon hat, etwa aus Photoshop, Affinity oder Krita, lädt sie über „Upload parts…“ als PNG in voller Leinwandgröße hoch. Idle Studio rät dann Drehpunkte und Elternkette aus den Bildern, und Sie korrigieren, was nicht passt. Mit „Add part“ lassen sich Teile aus verschiedenen Bildern zu einer Figur zusammensetzen, etwa ein Hut aus einem anderen Entwurf.

Drehpunkte und Bewegungslinien einer Figur, in Idle Studio markiert.

Ein Drehpunkt ist ein Gelenk, kein Mittelpunkt. Eine Hand, die sich um ihre eigene Mitte dreht, sieht aus wie ein rotierender Aufkleber; um den Ellbogen gedreht sieht sie aus wie ein Arm. Deshalb ziehen Sie die Drehpunkte direkt auf der Bühne an die richtige Stelle. Mit eingeschalteten Pivots zeichnet das Studio von jedem Gelenk eine Linie zum Gelenk des Elternteils, und eine falsch verkettete Ebene fällt sofort auf. Die Pfeiltasten schieben eine Ebene um ein Pixel, mit Umschalttaste um zehn.

Idle Studio mit Pedro, der Demo-Figur des Projekts, CC BY 4.0.

Bewegung ohne Keyframes

Bewegungen haben in Idle Studio Namen, keine Zeitleiste mit Schlüsselbildern. Es gibt acht Blöcke, die Sie einer Ebene in der Karte „Motion“ zuweisen:

• breathe skaliert die Ebene leicht hoch und hebt sie an, wie einen Brustkorb.
• sway dreht sie um den Drehpunkt, für Arme, Haare, Zöpfe, Umhänge.
• blink blendet die Ebene mit den offenen Augen aus, nach einem festen Plan mit Streuung und gelegentlichem Doppelblinzeln.
• gaze schiebt die Ebene dem Mauszeiger entgegen und lässt sie sonst langsam wandern.
• flipbook spielt mehrere Bilder als Daumenkino, in Schleife oder als kurzen Ausbruch alle paar Sekunden.
• glow pulsiert Deckkraft und Helligkeit, für Lampen, Glut, Magie.
• charge baut sich langsam auf und entlädt sich in Stufen.
• drift ist der einzige Block, der irgendwohin geht und dort bleibt, etwa für Rauch, der aufsteigt.

Mehrere Blöcke auf einer Ebene addieren sich. Eine Laterne kann also gleichzeitig schwingen und glimmen. So sieht eine Ebene in der figure.json aus:

{
  "id": "hand",
  "src": "layers/hand.webp",
  "parent": "arm",
  "pivot": [0.13, 0.78],
  "depth": 0.7,
  "motions": [
    { "type": "sway", "strength": 1.0, "period": 7.5, "degrees": 2.0 }
  ]
}

Die Hand hängt am Arm, dreht sich um einen Punkt bei 13 Prozent der Breite und 78 Prozent der Höhe ihrer Box und schwingt alle 7,5 Sekunden um zwei Grad. Zwei Dinge müssen Sie gar nicht einstellen: Eine Kind-Ebene liest die Zeit etwas weiter zurück als ihr Elternteil, ein Saum hinkt der Schulter also von allein hinterher. Und jede Ebene verschiebt sich mit der Maus um ihre eigene Tiefe, so entsteht aus dem flachen Stapel ein Raum.

Unter der Haube steckt eine Funktion solve(figure, t), die für einen Zeitpunkt t den Zustand aller Ebenen zurückgibt, immer denselben, ohne Zufall und ohne gespeicherten Zustand. Deshalb lässt sich die Zeitleiste vor- und zurückschieben, und deshalb stimmt jedes Prüfbild mit dem überein, was der Browser später zeigt.

Pedro in Bewegung, 35 Ebenen, Demo-Figur, CC BY 4.0.

Prüfen statt raten

Ein Screenshot beweist keine Bewegung. Dafür hat das Studio die Karte „Check“ mit drei Werkzeugen. Der Contact Sheet legt 24 Bilder aus einem Fenster von acht Sekunden nebeneinander. Man sieht auf einen Blick, ob die Atmung zu stark ist oder ein Arm durch den Körper schwingt. Der Events-Scan geht 30 Sekunden bei 60 Bildern je Sekunde durch und markiert jedes Blinzeln und jeden Ausbruch, damit Abstände und Doppelblinzler stimmen.

Contact Sheet: alle Ebenen einer Figur auf einen Blick.

Der Cut-Test misst, wie sauber „Cut“ gearbeitet hat. Er vergleicht die geschnittenen Ebenen mit einer Vorlage, deren Ebenen bekannt sind, und gibt die Überdeckung als Intersection over Union aus, kurz IoU, ein Wert zwischen 0 und 1. Die acht Teile einer Testfigur kamen bei 24 Pixel Reichweite mit 0,9967 zurück, in etwa zwei Sekunden. Mehr Reichweite ist dabei nicht besser: Bei Marken, die 10 Pixel innerhalb der wahren Form lagen, erreichte eine Reichweite von 15 Pixeln 0,95, eine von 90 Pixeln nur 0,65.

Cut-Test (IoU) zur Kontrolle sauber ausgeschnittener Ebenen.

Wer lieber im Text arbeitet, öffnet die Karte „JSON“. Dort liegt die komplette figure.json zum direkten Bearbeiten, mit Prüfung beim Übernehmen. Undo, Redo und eine automatische Sicherung im Browser-Speicher fangen Fehltritte ab.

Export

„Export“ packt die Figur als Zip in der Größe, die das Ziel braucht: 1500, 1000, 750 oder 512 Pixel. Der Ordner kommt neben player/idle.js, und die Seite bindet ihn mit wenigen Zeilen ein:

<link rel="stylesheet" href="player/idle.css">
<div id="hero" style="width:100%;height:100vh"></div>
<script src="player/idle.js"></script>
<script>
  fetch('figur/figure.json').then(r => r.json()).then(fig => {
    var f = new IdleFigure(document.getElementById('hero'), fig, 'figur/');
    f.trackPointer();
    f.play();
  });
</script>

Daneben gibt es das OBS-Paket, ebenfalls ein Zip, das als Browserquelle in OBS Studio aus einem Ordner läuft, ohne Server. Ein PNG-Export liefert ein Standbild aus der Zeitleiste, und über „Logo…“ legen Sie ein Logo in die Figur oder daneben.

Ein Wort zum Speicher: Jede Ebene kommt als volle Leinwand an, auch wenn nur eine Rauchwolke in der Ecke steht, und der Browser packt jedes Bild beim Anzeigen in rohe Pixel aus. Ein Werkzeug im Repo schneidet deshalb jede Ebene auf den Bereich zu, in dem etwas zu sehen ist, und schreibt den Versatz als crop in die figure.json. In einem Projekt mit vier Figuren sanken so 547 MB auf 34 MB, ohne dass sich an der Bewegung etwas änderte.

Wo die Figur läuft

Der Player rendert mit DOM und CSS-Transforms, nicht in ein Canvas. Jede Ebene ist ein gewöhnliches Bild-Element, das sich mit dem Rest der Seite stylen, überlagern und mischen lässt. Als Untergrenze gilt Chromium 103 aus dem Jahr 2022, deshalb verzichtet der Code auf neuere CSS-Funktionen wie :has() oder oklch(). Daraus ergeben sich die Einsatzorte:

• Ladebildschirme in Spielen und Anwendungen, die eine HTML-Seite anzeigen. Die Figur ist sofort da, weil nichts gebaut oder nachgeladen wird. Für einen RedM-Roleplay-Server habe ich so einen Ladebildschirm mit vier animierten Figuren und eigener Musik gebaut.
• Websites: ein Maskottchen im Hero-Bereich, eine Figur auf der 404-Seite, ein Charakter auf der Seite eines Spiels statt eines eingebetteten Videos.
• Browserspiele und Spielmenüs, in denen die Figur wartet, bis der Spieler klickt.
• Streams: als Browserquelle in OBS, mit Stimmungen in der figure.json, die sich per Ereignis umschalten lassen. Ein Zusatz koppelt die Figur an die Webcam: Sie schaut, wohin Sie schauen, und blinzelt, wenn Sie blinzeln, per MediaPipe Face Landmarker direkt im Browser.
• HTML5-Anzeigen und Messebildschirme, sofern der Werbeplatz eigene Skripte zulässt. Eine Figur aus einem Dutzend Ebenen und einer JSON-Datei wiegt meist weniger als ein Video-Loop.

Was Spine und Live2D kosten

Die beiden bekannten Editoren habe ich mir angesehen, bevor ich angefangen habe. Die Tabelle steht so im README des Projekts; die Preise sind dort wörtlich notiert, Stand September 2026, laut Anbieter.

Spine und Live2D können deutlich mehr als Idle Studio: Mesh-Verformung, komplette Laufzyklen, Physik, Lippensynchronisation. Wer eine Figur für ein Spiel voll animieren will, ist dort richtig. Idle Studio deckt den einen Zustand ab, den fast jede Figur braucht und der aus Kostengründen oft ein Standbild bleibt.

Drei Dinge liefern die beiden dafür nicht. Erstens malen sie in ein Canvas, das sich mit dem Rest der Seite weder stylen noch mischen noch layouten lässt; bei Idle Studio ist jede Ebene ein Bild im DOM. Zweitens bindet Live2D die Figur an sein Editor-Format, und bei Spine hängt die Laufzeitlizenz am Besitz des Editors. Eine Figur aus Idle Studio ist eine JSON-Datei, die Sie in jedem Texteditor öffnen und in zehn Jahren noch lesen können. Drittens die Kosten: Bei Spine kostet der Editor, bei Live2D kostet PRO ab dem ersten Euro Umsatz. Idle Studio und der Player stehen unter MIT-Lizenz, auch für kommerzielle Projekte.

Selbst ausprobieren

Der Code liegt auf GitHub unter broening/idle-web-animation. In der Live-Demo folgt Pedro der Maus. Idle Studio läuft dort ebenfalls, allerdings nur lesend; Speichern braucht den kleinen Python-Server aus dem Repo auf dem eigenen Rechner, ein Aufruf von python tools/serve.py genügt. Fehlerberichte und Vorschläge nehme ich als Issues auf GitHub entgegen. Die Demo-Figur Pedro steht unter CC BY 4.0, eigene Figuren bleiben außerhalb des Repos.

Was Handarbeit bleibt, biete ich als Leistung an: Ich bereite Ihre Figur auf, zerlege sie in Ebenen, setze Drehpunkte und Bewegungen und prüfe das Ergebnis mit Contact Sheet und Cut-Test. Danach baue ich die Figur in Ihre Website, Ihren Ladebildschirm oder Ihr OBS ein, ohne Laufzeitlizenz und ohne laufende Kosten. Wenn Sie eine Figur haben und wissen wollen, ob sie sich eignet, schreiben Sie mir über die Kontaktseite.