Beschreiben Sie die Frame-Geometrie und die Animationsreihenfolge
Speichern Sie bei einem regelmäßigen Raster Zellbreite und -höhe, die Spaltenzahl sowie den Frame-Index jeder Animation. Berechnen Sie die Quellkoordinate x als (Frame-Index modulo Spaltenzahl) × Zellbreite und y als den abgerundeten Zeilenindex (Frame-Index / Spaltenzahl) × Zellhöhe. Speichern Sie bei unregelmäßigen Atlanten explizite Quellrechtecke. Halten Sie die Animationsreihenfolge von der Dateireihenfolge getrennt. Ist das Bildmaterial nach Posen statt nach Ablauf angeordnet, kann ein Laufzyklus mit acht Frames die Indizes [0, 1, 2, 1, 0, 3, 4, 3] verwenden.
Wenn Sprites zugeschnitten werden, um transparente Ränder zu entfernen, speichern Sie auch die ursprüngliche Leinwandgröße und den Zuschneideversatz. Zeichnen Sie um einen stabilen Drehpunkt herum, beispielsweise um die Füße der Figur, damit die Rahmenbegrenzungen den Kollisionskörper oder den visuellen Bodenkontakt nicht verschieben, wenn sich das Bildmaterial ändert.
Verwenden Sie das Quellrechteck bewusst
Canvas drawImage verfügt über eine Überladung, die ein Quellrechteck auswählt und es in ein Zielrechteck skaliert. MDN dokumentiert die X-, Y-, Breite- und Höhenangaben der Quelle getrennt von den X-, Y-, Breite- und Höhenangaben des Ziels. Verwenden Sie diese Trennung, um den Atlas-Zuschnitt exakt zu halten, während Sie die gerenderte Größe ändern. Testen Sie den ersten, letzten und Zeilenbegrenzungsrahmen. Eine falsche Spaltenanzahl erscheint an diesen Grenzen oft als ein Pixel kleiner Teil des angrenzenden Sprites.
Überprüfen Sie Nähte und Belastung, bevor Sie die Geometrie diagnostizieren
Lassen Sie zwischen Atlaszellen einen transparenten Rand, wenn beim skalierten Zeichnen benachbarte Grafiken durchscheinen, und prüfen Sie, ob der gewählte Filtermodus zum Stil passt. Zeichnen Sie um jeden Ziel-Frame ein Debug-Rechteck und beschriften Sie ihn vorübergehend mit seinem Index. Warten Sie vor dem Zeichnen, bis das Bild geladen und dekodiert ist. Testen Sie dann mit der tatsächlichen Canvas-Skalierung und der Auflösung des internen Zeichenpuffers. Vergleichen Sie einen unskalierten mit einem skalierten Frame. Zeigt nur der skalierte Frame eine Naht, untersuchen Sie Abtastung und Innenabstände des Atlasses, bevor Sie Quellkoordinaten ändern.
Fragen zu Sprite-Atlas-Rendering
Warum erscheint ein Teil des benachbarten Sprites?
Das Quellrechteck kann benachbarte Pixel enthalten, oder die skalierte Stichprobe kann Kantenpixel aus einem dicht gepackten Atlas anzeigen. Überprüfen Sie den Zuschnitt und fügen Sie geeignete Abstände zwischen den Atlaszellen hinzu, bevor Sie die Rahmenreihenfolge ändern.
Sollten Kollisionsboxen die gekürzten Sprite-Grenzen verwenden?
Behalten Sie normalerweise die Kollisionsabmessungen im Zusammenhang mit der Spielfigur und nicht mit zufälligen transparenten Pixeln. Ein stabiler Drehpunkt und eine explizite Hitbox verhindern, dass Animationsframes die Gameplay-Geometrie verändern.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden