Halloween-Angebot: −40% Pixor kostet $19.99 $11.99 bis zum 4. November, auf itch.io →

Ein Pixel-Art-Explosions-Sprite-Sheet

Explosionen gehören zu den schwersten Effekten für die Handanimation: ein Blitz, ein Feuerball, der anschwillt und abkühlt, Rauch, der sich ausbreitet. Pixor zeichnet sie aus 3D-Partikeln, durch denselben Look wie deine Sprites, sodass sie ins selbe Spiel gehören.

Eine animierte Pixel-Art-Explosion: Ein blasser Blitz schwillt zu einem orangeroten Feuerball an, der zu grauem Rauch abkühlt
pxr effect explosion:12

Was eine Explosion lesbar macht

Eine Pixel-Art-Explosion, die bei Spieltempo gut lesbar ist, hat der Reihe nach einige Teile:

  1. Ein Blitz. Ein oder zwei Frames in den hellsten Farben der Palette, klein und hell. Er zeigt dem Spieler, wo der Treffer war.
  2. Ein Feuerball, der schnell anschwillt, beim Abkühlen von Gelb über Orange zu Rot.
  3. Rauch, der sich ausbreitet und dunkler wird, mit den letzten Flammen, die durchscheinen.
  4. Funken oder Trümmer, die zu Beginn herausgeschleudert werden, je ein oder zwei Pixel groß.

Von Hand gezeichnet sind das ein Dutzend Frames mit Formen, die wachsen, sich überlappen und die Farbe wechseln müssen, ohne zu springen. Die meisten handgezeichneten Explosionen schummeln mit weniger Frames und flachen Formen, und die meisten Explosionen aus einem Partikelwerkzeug, die verkleinert wurden, werden zu weichen Klecksen mit Hunderten Farben, das Gegenteil dessen, was ein Pixel-Art-Spiel will.

Eine in Pixor machen

Ganz ohne Modell erzeugt eine Zeile das Sheet:

pxr effect explosion:12 --preset selout --size 64 --export gif,json -o explosion.png

Dieselbe Explosion als Sprite-Sheet aus zwölf Frames mit 64 Pixeln, vom Blitz bis zum Rauch

Das schreibt explosion.png, ein Sheet aus zwölf Frames à 64×64, dessen JSON mit Platz und Timing jedes Frames und ein GIF zur Kontrolle. In der App hat der Bildschirm des leeren Projekts Effekt erstellen neben Importieren… und Kostenlose Modelle durchstöbern.

Die Explosion besteht aus 3D-Partikeln, gerendert durch dieselbe Pipeline wie ein Modell: Lichtbänder, eine farbtonverschobene Rampe pro Farbe, die Palette, die Linien. Sie nimmt also den Look an, den du ihr gibst: --preset selout zeichnet die farbigen Outlines des Selout-Looks, --palette my-game.hex legt sie auf deine Palette, und der eigene Style eines Projekts lässt sie exakt zu deinen Sprites passen.

Anpassen

Die Explosion hat die Einstellungen jedes Pixor-Effekts:

  • Frames: die Zahl nach dem Doppelpunkt, explosion:8 für einen schnellen Knall, explosion:16 für einen langsameren.
  • Größe: --size ist der Frame in Pixeln. Die Explosion oben hat 64; 32 oder 48 passen für die meisten Gegner.
  • Energie (--effect-energy) für ihre Stärke, die Größe des Effekts selbst in der Szene (--effect-size) und wo er ist (--effect-at X,Y,Z).
  • Seed (--effect-seed): Derselbe Seed ergibt immer dieselben Pixel. Rendere die Seeds 1, 2 und 3 für drei Explosionen, die keine Kopien voneinander sind.

An einem Gegner

Eine Explosion passiert meistens mit etwas. Füge sie einem Modell als eigene Aktion hinzu:

pxr render spaceship.glb --view top-down --size 64 --clip none \
  --effect explosion:12 --effect-hit 2 --export json -o ship.png

In der App fügst du sie im Schritt Szene mit + in der Gliederung unter Effekte hinzu. Sie wird zu einem Effekt-Node des Szenen-Graphen und einer Aktion namens fx-explosion, mit eigener Zeile im Sheet. Ihre Raute lässt sich in der 3D-Ansicht ziehen, um sie zu platzieren.

Drei Einstellungen lassen sie zum Moment passen:

  • Folgen einem Knochen: ein Mündungsfeuer am Ende einer Waffe, eine Druckwelle aus einer Hand.
  • Über einem Clip abspielen (--effect-clip): Die Explosion läuft, während das Modell etwas tut, etwa ein Schiff, das auseinanderbricht.
  • Nur Effekt (--effect-alone): die Explosion ohne das Modell zeichnen, als eigene Ebene, ausgerichtet am Sheet der Figur. Das Spiel spielt sie über dem ab, was gerade für ein Sprite da ist.

Treffer-Frame (--effect-hit 2) markiert den Frame, der den Treffer landet. Das JSON führt ihn unter meta.pixor.hits auf, sodass das Spiel auf genau diesem Frame die Kamera wackeln lassen, Schaden verursachen oder den Sound abspielen kann.

Rauch aus einer Simulation

Pixors eigene Explosion ist schnell und braucht nichts weiter. Für eine schwerere Detonation füge ein Rauchvolumen hinzu, das vom Emitter der Explosion getragen wird: --effect explosion --volume puff:1.5@effect:1. Eine .vdb-Simulation aus Blender, EmberGen oder Houdini funktioniert an derselben Stelle und wird in denselben Bändern gezeichnet; siehe Feuer, Rauch und Wasser aus VDB.

Die anderen Effekte

Derselbe Befehl erzeugt die übrigen Effekte eines Spiels: hit-spark, slash, magic-burst, heal, portal, smoke-puff, dust, fire-loop, rain, snow, fireflies und falling-leaves. Ein fire-loop läuft in Schleife für Fackeln und brennende Wracks; hit-spark und slash sind kurz, für jeden Treffer in einem Kampf. Für einen Gegner, der zerbrechen oder verbrennen statt explodieren soll, siehe das Tutorial zu Todeseffekten. Jede Option steht im Handbuch.

Fragen

Wie viele Frames sollte eine Pixel-Art-Explosion haben?

Acht bis zwölf bei 12 Frames pro Sekunde für einen normalen Treffer; kleine wie ein Kugeleinschlag können vier bis sechs haben, und der Tod eines Bosses darf länger dauern. Die Explosion von Pixor hat 10 Frames, wenn du keine Zahl angibst, wie in explosion:12.

Kann die Explosion die Palette meines Spiels nutzen?

Ja. Sie wird durch denselben Style gerendert wie ein Modell, sodass --palette mit einer .hex-, .gpl- oder .png-Datei oder der eigene Look eines Projekts jedes Pixel der Explosion auf diese Farben legt.

Ergibt derselbe Befehl jedes Mal dieselbe Explosion?

Ja. Die Partikel kommen aus einem Seed: Derselbe Seed und dieselben Einstellungen ergeben immer dieselben Pixel. Ändere --effect-seed für eine Variation, damit ein Spiel drei Explosionen haben kann, die keine Kopien voneinander sind.

Weiterlesen

Probier es mit deinem eigenen Modell aus, kostenlos im Browser, oder hol dir die Vollversion.

Im Browser testen Pixor kaufen