Tipps und Tools zum Erstellen von Spritesheet-Animationen


23

Ich bin auf der Suche nach einem Tool, mit dem ich auf einfache Weise Sprite Sheets erstellen kann.

Im Moment benutze ich Illustrator, aber ich kann die Mitte des Zeichens nie genau positionieren. Es sieht also so aus, als würde es sich bewegen (obwohl es immer an einer Stelle ist), während ich mich durch das Sprite-Sheet schleife. Gibt es bessere Tools, die ich verwenden kann?

Welche Tipps würdest du für die Arbeit mit einem Sprite Sheet geben? Soll ich jeden Teil des Charakters in einzelnen Ebenen (linker Arm, rechter Arm, Körper usw.) oder alles auf einmal erstellen? Alle anderen Tipps wären auch hilfreich! Danke dir


Wo verwenden Sie ein Skript, um das Sprite-Sheet aus Illustrator zu exportieren? Ich verwende mein eigenes Photoshop-Skript , möchte aber auch etwas für Illustrator.
rraallvv

Antworten:


13

Von den Problemen, die Sie haben, empfehle ich, dass Sie Folgendes tun:

Arbeiten Sie zunächst mit Ebenen und Ordnern. Es ist wirklich hilfreich, einzelne Sprites in Ordnern zu gruppieren, sodass Sie sie insgesamt verschieben können und Teile, die repliziert werden, auf separaten Ebenen vorhanden sein sollten.

(Wenn es also ein Schwert oder etwas gibt, das sich auf einer Ebene befinden sollte, sollten sich die Augen auf einer Ebene befinden usw.). Das ist, wo die wahre Kraft dieser Art von Anwendungen für eine solche Aufgabe ist. Wenn du etwas vermasselst, vermasselst du nicht alles nur diese Ebene.

Aktivieren Sie dann das Lineal und das Raster. (Nehmen Sie sich auch die Zeit, um sie im Einstellungsmenü korrekt einzurichten.) Wenn Sie auf das Lineal klicken und es loslassen, können Sie Richtlinien erstellen. Wenn Sie Ihre eigenen Limits mithilfe der Richtlinien einrichten, können Sie die Sprites (die sich jetzt in Ordnern befinden sollten) an den Rasterlinien ausrichten, um sie weitaus besser zu positionieren.

Dann endlich, wenn die Dinge beim Abspielen der Animation noch ein bisschen außer Phase zu sein scheinen. Wenn Sie ganz hineinzoomen (Sie müssen möglicherweise sicherstellen, dass dies im Menü "Einstellungen" aktiviert ist), wird ein einzelnes Raster pro Pixel angezeigt. So können Sie die Dinge genau dort platzieren, wo Sie sie brauchen.


In diesem Beitrag geht es übrigens darum, wie Sie Photoshop für diesen Fall verwenden können.

4
@Sergio, nicht unbedingt, PhotoShop ist nicht die einzige Bildbearbeitungssoftware, die Ebenen, Hilfslinien, Regeln und Pixelraster enthält.
AttackingHobo

@ Sergio dachte, ich hätte erwähnt, dass ich PS in diesem Fall Illustratoren vorziehen würde. Aber ja, IIRC sollte immer noch alle diese Funktionen enthalten, die in derselben Suite wie Photoshop enthalten sind. Ich habe allerdings seit einiger Zeit nichts anderes als Photoshop und After Effects geöffnet.
Jesse Dorsey

@ AttackingHobo - Er erwähnte Fangrichtlinien, indem er auf das Raster klickte. Diese Aktion wird hauptsächlich in Photoshop verwendet, und 99% der Tutorials, die bei der Suche gefunden werden, liefern Photoshop-Ergebnisse.

@ Sergio danke, dass du mich daran erinnert hast, dass du auf das Lineal klicken und es ziehen sollst. Aber ja, Illustrator kann Hilfslinien erstellen. Daher halte ich keine dieser Informationen für falsch.
Jesse Dorsey

4

Wenn Sie über 3D-Modelle verfügen, gibt es ein Programm von EnvyGames, SpriteWorks , mit dem Sie 2D-Sprite-Blätter aus den Modellen erstellen können. Ermöglicht es Ihnen, Animationen abzuspielen und eine Reihe von Elementen anzupassen.

Ich denke, es ist ein bisschen teuer für das, was es ist, 49,99 $.

Hier finden Sie ein Tutorial zur Verwendung von SpriteWorks

Erstellen von Sprites aus 3D-Modellen - EnvyGames



3

Ihre Frage klingt sehr ähnlich wie die, die ich hier beantwortet habe: Was ist ein gutes Werkzeug zum Erstellen von animierten Sprites?

Sie können Ihre Animationen grundsätzlich in einem beliebigen Programm erstellen. Wenn Sie Illustrator verwenden, empfehlen wir Ihnen, die Animationsschritte in Ebenen zu erstellen oder das Bildmaterial für Animationen in Flash zu importieren (seit Flash CS4 können Sie auch Bones in Flash erstellen. Hier finden Sie ein Tutorial ).

Sobald Sie Ihre Animationen erstellt haben, exportieren Sie einfach die Frames in Bilder und erstellen Sie mit der in meiner Antwort (oben) beschriebenen Methode ein Sprite-Sheet.




2

http://www.darkfunction.com/editor/

Whoops: Entschuldigung für hinterhältige Eigenwerbung. Aber das könnte genau das sein, wonach Sie suchen.

EDIT: Nur ein Update, dass ich dieses Tool kostenlos und OpenSource gemacht habe. https://github.com/darkFunction/darkFunction-Editor


Da dies Ihr eigenes Produkt ist, sagen Sie es bitte, es ist in der FAQ
John McDonald

das ist ein nettes werkzeug, das jetzt meinen eigenen workflow mit ebenen verwendet, was gut funktioniert, obwohl es ein bisschen langsam ist, muss es vielleicht ein bisschen genauer untersuchen
Spooks

1

Die Sprite-Animationssoftware erstellt automatisch ein Sprite-Blatt, das eine geordnete Sequenz aller Frames der Sprite-Animation enthält. Diese Software funktioniert nicht mit bereits erstellten Sprite-Blättern - sie erstellt ein Sprite-Blatt mit der vorgeschriebenen Ausrichtung (vertikal, horizontal oder tabellarisch) und der vorgeschriebenen Größe.

Sprite-Animationen werden mithilfe desselben Werkzeugs mit 2d-Bones-Modellen und -Texturen erstellt. Video auf Youtube ansehen


Unsere FAQ empfiehlt Antworten, die "kaum mehr als ein Link zu einer externen Site" sind. Fügen Sie vielleicht ein paar Details hinzu, die erklären, was da ist und warum es für diesen Fragesteller nützlich ist. :)
Cameron Fredman

0

Ich habe Texture Packer verwendet , um Sprites aus einem Ordner mit PNG-Bildern zu erstellen. Ich portiere ein Spiel, das ursprünglich in Flash entwickelt wurde, also exportiere ich einfach jedes Bild des MovieClip nach PNG und importiere diese Bilder dann in Texture Packer.

Ein weiteres ähnliches Tool ist Zwoptex

(Letzteres ist Mac-Software, aber TP hat auch eine Version für Windows.)

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.