Einführung
Sie haben gerade einen Charakter aus Spine exportiert und möchten nur eines wissen: Sieht der Laufzyklus korrekt aus? Den Editor erneut zu öffnen oder eine Testszene in Unity zu erstellen, ist dafür umständlich. Ein Browser-Tab genügt.
Dafür ist die Spine Viewer-Datei gedacht. Animatoren verwenden sie, um einen Export vor der Weitergabe zu überprüfen, Entwickler, um sicherzustellen, dass der Atlas tatsächlich zum Skelett passt, und Produzenten, um sich eine Figur anzusehen, ohne etwas installieren zu müssen.
Im Folgenden wird erklärt, wie Sie Ihre Dateien laden, was zu tun ist, wenn die Versionen nicht übereinstimmen, wie Sie die Debug-Overlays verwenden und wie Sie eine kurze Sequenz erstellen und als GIF oder Video exportieren.
Was der Zuschauer handhabt
Spine-Projekte sind über die Editorversionen hinaus gültig. Es ist üblich, dass eine Figur vor drei Jahren aus Version 3.8 und eine andere letzte Woche aus Version 4.2 exportiert wurde. Sie müssen keine Laufzeitumgebung auswählen. Der Viewer prüft die Versionszeichenfolge im Skelett-JSON und lädt die passende Version. Wenn die Exportversion älter als 3.6 oder neuer als 4.3 ist, wird dies angezeigt, anstatt fehlerhafte Daten darzustellen.
Alles wird auf einer WebGL-Canvas in Ihrem Browser gezeichnet. Die Dateien werden lokal gelesen und niemals übertragen. Dies ist wichtig, wenn es sich bei der Figur um unveröffentlichte Grafiken unter Geheimhaltungsvereinbarung handelt. Außerdem werden große Texturseiten so schnell angezeigt, wie Ihr System sie dekodieren kann – ohne Upload-Beschränkung.
- Die Laufzeitversionen 3.6, 3.7, 3.8, 4.0, 4.1, 4.2 und 4.3 werden automatisch aus dem Export ausgewählt.
- Skelett JSON plus die .atlas-Textdatei und ihre Texturseiten (PNG, JPG, WebP oder AVIF). Binary .skel-Dateien müssen zuerst in JSON konvertiert werden; dazu gibt es einen Hinweis in FAQ.
- Vormultiplizierter Alpha-Kanal ist aktiviert, wenn die Texturnamen „pma“ enthalten (Spine fügt dies beim Export hinzu). Sie können ihn manuell deaktivieren, wenn Kanten dunkel oder mit einem Halo versehen aussehen.
Laden eines Skeletts, Atlas und Texturen
Ein normaler Spine-Export liefert drei Dateitypen: das Skelett .json, eine .atlas-Textdatei und ein oder mehrere Texturbilder, auf die der Atlas verweist. Sie benötigen alle diese Dateien. Der Atlas ist nur eine Karte; ohne die Bilder kann man nichts zeichnen.
Wählen Sie alle Seiten gleichzeitig aus oder ziehen Sie sie per Drag & Drop hinein. Der Viewer ordnet jede Atlasseite dem entsprechenden Bild anhand des Dateinamens zu und platziert die Figur auf der Arbeitsfläche. Dort können Sie Animationen wechseln, verschiedene Skins ausprobieren, die Wiedergabegeschwindigkeit ändern und schwenken oder zoomen, um Details zu betrachten.
- Exportieren Sie die Datei aus Spine als JSON. Falls Sie nur eine .skel-Datei haben, konvertieren Sie diese zuerst.
- Ziehen Sie die .json-Datei, die .atlas-Datei und alle Texturseiten zusammen in den Upload-Bereich.
- Wählen Sie eine Animation aus der Liste und wechseln Sie die Skins, um sie alle zu testen.
- Ändern Sie die Hintergrundfarbe, falls die Figur mit dem Hintergrund verschmilzt, und zoomen und schwenken Sie anschließend nach Bedarf.
Verwendung der Debug-Overlays
Eine Figur kann in normaler Größe gut aussehen und trotzdem einen Fehler aufweisen, der nur in der Engine sichtbar wird: ein Mesh, das sich in einem Frame überlappt, eine Clipping-Anhangsverknüpfung, die zu viel abschneidet, oder eine Pfadbeschränkung, die einen Knochen an eine ungewöhnliche Stelle zieht. Die Debug-Overlays zeichnen diese Hilfsobjekte über die Grafik, sodass sie sichtbar werden.
Aktivieren Sie nur die Elemente, die Sie überprüfen möchten. Sind alle acht Overlays gleichzeitig aktiviert, wird der Bildschirm schnell unübersichtlich. Knochen und Meshes dienen üblicherweise als erstes zur Ansicht. Clipping und Pfade folgen, falls etwas abgeschnitten aussieht oder verschoben wirkt.
- Knochen und Punkte zeigen das Rig und die Positionen der Attachments.
- Regionen, Meshes, Hüllen und Begrenzungen ermöglichen die Überprüfung von Deformationen und der Fläche, die jedes Attachment abdeckt.
- Clipping und Pfade dienen der Überprüfung von Masken und Pfadbeschränkungen, die sich in Bewegung ungewöhnlich verhalten.
Erstellen einer Sequenz und Exportieren einer GIF- oder Videodatei
Eine einzelne Animationsschleife vermittelt wenig darüber, wie sich die Spielfigur anfühlt. Mithilfe der Zeitleiste können Sie mehrere Clips in der richtigen Reihenfolge anordnen, z. B. Leerlauf, Laufen und Angriff, und die Übergänge beobachten. Jeder Übergabevorgang erhält einen von Ihnen in Sekunden festgelegten Crossfade. So können Sie erkennen, ob die Standardüberblendung zu abrupt ist oder ob eine längere Mischung erforderlich ist, bevor das Entwicklerteam dies auf die harte Tour feststellen muss.
Die Sequenz spielt Clips nacheinander auf einer einzelnen Spur ab. Es handelt sich nicht um einen mehrspurigen Mixer mit Ebenen. Wenn Sie also beispielsweise gleichzeitig zielen und laufen sehen möchten, testen Sie dies in der Engine. Um zu überprüfen, ob Übergänge abrupt sind, ist die Timeline schnell und in der Regel ausreichend.
Wenn die Sequenz korrekt aussieht, können Sie sie exportieren. Der Export GIF erfasst mit 12 fps und begrenzt die längere Seite auf 640 px, was für einen Slack-Thread oder ein Ticket ausreichend ist. Der Videoexport erfasst mit 30 fps als MP4, sofern der Browser dies unterstützt, andernfalls als WebM. Beide Formate übernehmen die aktuelle Hintergrundfarbe. Wählen Sie daher ein Format, das zum jeweiligen Verwendungszweck des Clips passt. Die Aufnahme erfolgt lokal auf Ihrem Rechner; es werden keine Dateien hochgeladen.
- Clips in beliebiger Reihenfolge in die Warteschlange stellen und den Überblendeffekt zwischen ihnen einstellen.
- Die gesamte Sequenz abspielen, um Knackgeräusche, Schnappgeräusche oder ungewöhnliche Überblendungen zu erkennen.
- Praktisch für Reviews: Senden Sie eine GIF-Datei anstelle eines Builds, wenn jemand nur die Animation sehen möchte.
- Exportieren Sie als GIF (12 fps, bis zu 640 px) oder als MP4/WebM-Video mit der eingestellten Hintergrundfarbe.
Wo es in die Produktionskette passt
Der Viewer dient als Zwischenspeicher zwischen Export und Import. Falls die Atlasseiten unnötig Speicherplatz belegen, packen Sie sie mit dem Texture Packer neu. Wenn Sie ein einzelnes Sprite-Sheet ohne Datendatei übernommen haben, kann der Sprite Sheet Unpacker es wieder in Einzelbilder aufteilen. Überprüfen Sie anschließend hier, ob das Ergebnis noch abgespielt werden kann.
Diese Überprüfung in einem Browser-Tab dauert etwa eine Minute. Das gleiche Problem zu finden, nachdem der Charakter bereits in einem Unity-, Phaser- oder Cocos-Build enthalten ist, ist in der Regel deutlich aufwendiger.
Geschrieben von
Ankit Kumar
Senior Software Engineer und Gründer bei ToolBuddy
Entwickeln Sie Browser-First-Dienstprogramme ohne Upload-Anforderungen mithilfe von WebAssembly-, Web Audio- und Canvas-Technologien.