Zum Artikel springen
Alle Anleitungen

Transparente PNG-Animation

Aus einem PNG eine transparente Lauf- und Sprunganimation erstellen

Animiere ein transparentes Figuren-PNG, wähle Lauf- und Sprungframes, verlängere eine Sprungpose und exportiere Spiel-Assets. Mit Prompts und echten Beispielen.

AnimGenAktualisiert 5 Min. Lesezeit
AnimGen-Demo: Eine stillstehende türkisfarbene Figur wird zur Lauf- und Sprunganimation
Beim Abspielen wird YouTube geladen.Auf YouTube ansehen
In dieser Anleitung

Du hast eine Figurenillustration. Sie soll laufen, springen und landen und dabei vor deinem Spielhintergrund nutzbar bleiben.

In AnimGen beginnst du mit einem tatsächlich transparenten PNG, generierst im transparenten Modus, wählst nützliche Frames und exportierst ein Alpha-fähiges Format. Bewegungsvorschau und endgültiges transparentes Asset sind zwei verschiedene Stufen.

Sieh die Lauf-/Sprung-Demo auf YouTube. Das Startvideo zeigt den Ablauf mit einer türkisfarbenen Figur. Diese Anleitung erklärt Entscheidungen dahinter, etwa eine Sprungpose länger sichtbar zu halten, ohne den ganzen Lauf zu verlangsamen.

Mit einem brauchbaren transparenten Bild beginnen

Kopf, Hände und Füße sollten bequem ins Bild passen. Lass über dem Kopf Raum für Sprünge und um Gliedmaßen für den Lauf. Enger Zuschnitt begrenzt Bewegung.

Füllt die Figur fast das Bild, musst du keinen Rand in einem externen Editor hinzufügen. Aktiviere nach Upload vor Generierung Leinwand erweitern. Das schafft direkt in AnimGen Raum ohne Bearbeiten, Speichern und erneuten Upload einer Quelldatei.

Beginne mit 80 % Motivgröße. Probiere bei Bedarf 67 % oder 50 %: kleinerer Anteil lässt mehr Raum. Nutze das Neun-Positionen-Raster für Platz in Sprungrichtung. Im transparenten Modus bleibt die Ergänzung transparent, der Original-Upload unverändert.

Leinwanderweiterung in chinesischer Oberfläche: aktiviert, 80 Prozent Motivgröße, zentriert und transparenter Zusatzbereich

Leinwand erweitern liegt links unter dem Startbild im Erstellen-Bereich. Dieser lokale Demo-Screenshot zeigt Chinesisch: oben aktivieren, Motivgröße wählen, dann mit dem Neun-Positionen-Raster platzieren.

Mehr Rand macht die Figur im generierten Frame kleiner; nutze nur den benötigten Raum. Die Funktion rekonstruiert keine bereits abgeschnittenen Hände oder Füße. Prüfe trotzdem die Bewegung. Alle Regler erklärt die Leinwand-Anleitung.

Direkte Größen-/Platzierungsvergleiche zeigt Leinwand erweitern für Lauf, Sprung und Angriff mit der tatsächlichen Bewegung der blauen Startseitenfigur.

Nutze zum Mitmachen deine eigene freigestellte Figur oder unser öffentliches transparentes Läufer-PNG. Es ist ein Übungsasset, keine Zusage, dass deine Generierung das Startvideo reproduziert.

Türkisfarbene Lauffigur mit transparentem Raum um Kopf, Hände und Füße

Prüfe in einem Alpha-fähigen Editor auf hellem und dunklem Hintergrund. Leere Bereiche müssen den darunterliegenden Hintergrund zeigen. Bleibt ein Schachbrett sichtbar, ist es ins Bild gemalt.

Eine .png-Endung beweist keine Transparenz. AnimGens transparenter Workflow benötigt echtes Quell-Alpha. Stelle Artwork mit gewöhnlichem Hintergrund zunächst frei oder wähle normalen Modus für ein Ergebnis mit Szene. Die Transparenz-Anleitung erklärt Anforderungen.

Bewegung beschreiben und Kamera stillhalten

Öffne das Studio, melde dich an, lade das Bild und wähle Transparente Animation. Nutze aktuell angebotene Modell-, Dauer- und Auflösungsoptionen und prüfe Credits vor Generierung.

Die kurze Bewegungsanweisung der Demo lautet im Original:

text
Run, jump, land, then keep running. Side view, fixed camera.

Sie nennt Aktionen in Reihenfolge und hält den Blickwinkel konstant. Ergänze für deine Figur etwa „Gesamte Figur sichtbar halten und Originaldesign bewahren“. Das bleibt Modellanweisung; prüfe danach das Ergebnis.

Kombinierte Aktionen helfen beim Erkunden. Für spielbare Figuren sind getrennte Lauf-/Sprungclips oft praktischer, damit das Spiel sie einzeln auslösen kann. Zwei anpassbare Ausgangsprompts:

Laufen:

text
The character runs in place, facing right in side view.
Fixed camera. Keep the whole body visible and preserve the character design.

Springen:

text
The character crouches, jumps upward, then lands with bent knees.
Side view, fixed camera. Keep the whole body visible throughout the jump.

Dies sind Vorschläge, keine aufgezeichneten Einstellungen für garantierte Resultate. Laufen auf der Stelle eignet sich, wenn das Spiel die Figur durchs Level bewegt. Ein Sprungclip muss weiterhin zur Bewegung und den Zustandswechseln passen.

Das Startvideo verdichtet Warte- und Bearbeitungszeit. Tatsächliche Generierungsdauer hängt von Modell, Warteschlange und Einstellungen ab.

Bewegung vor Exportwahl prüfen

Die erste generierte Vorschau kann im transparenten Workflow grün oder magentafarben sein. Das ist eine temporäre Schlüsselfarb-Zwischenstufe; Alpha entsteht beim passenden Export.

Konzentriere dich zuerst auf Bewegung:

  • Lauf: Ist der Schritt lesbar? Bleiben Körperform und Blickrichtung konsistent?
  • Sprung: Sind Vorbereitung, Absprung, Luftpose und Landung erkennbar?
  • Ausschnitt: Verlassen Füße, Hände oder Kopf die Leinwand?
  • Kontinuität: Verformt sich die Figur plötzlich oder bekommt unerwünschte Details?

Wähle einen sauberen Abschnitt, statt automatisch das ganze Video zu übernehmen. Fehlt die Aktion oder ist eine wichtige Pose stark verzerrt, müssen möglicherweise Eingabe oder Prompt geändert werden. Frame-Auswahl entfernt Unerwünschtes, zeichnet aber beschädigte Posen nicht neu.

Prüfe einen Laufloop wiederholt und besonders Ende-zu-Anfang. Füße, Silhouette und Geschwindigkeit müssen über die Grenze passen. Loop wiederholt die Auswahl und verbindet unpassende Endposen nicht automatisch.

Eine Sprungpose durch Frame-Bearbeitung kurz halten

Die Demo gibt der Luftpose etwas mehr Zeit, damit sie lesbarer wird.

Öffne bei fertigem Video Animation verfeinern. Wähle unter Quellframes passende Frames und füge/ziehe sie in die Animationssequenz. Prüfe dort Reihenfolge und Timing.

Tatsächlicher erweiterter AnimGen-Editor mit Quellframes, Animationssequenz, Vorschauen und Leinwandreglern

Der Editor trennt Quelle und aufgebaute Sequenz. Der Screenshot zeigt den Arbeitsbereich; das kleine Beispiel erklärt die Timing-Änderung der Demo.

Die Demo verwendet diese abgetasteten Quellframe-Beschriftungen:

text
Before: F042 F046 F050 F054      F058 F064 F070
After:  F042 F046 F050 F054 F054 F058 F064 F070

Wähle F054 in der Ausgabesequenz und Duplizieren, um die Pose direkt daneben zu wiederholen. Bei den beispielhaften 8 FPS wächst die Sequenz von sieben Frames/0,875 Sekunden auf acht/1 Sekunde. Die Kopie fügt 0,125 Sekunden Haltezeit hinzu.

Die Labels gehören zu Demo-Assets; finde die passende Pose in deinem Clip. Nutze die kleine Sequenz zum Verständnis und für echte Animation genügend Zwischenframes und geeignete FPS. Wiederholung ändert Sichtdauer. Höhere FPS verändern Geschwindigkeit, erzeugen aber keine Zwischenposen. Halte die Sprungpause kurz und prüfe die Landung; langes Einfrieren lässt Bewegung stocken.

Die hier gezeigten Sequenz- und Leinwandregler arbeiten mit vorhandenen Frames. Sie zeichnen Posen nicht neu und richten nicht alle Frames automatisch aus. Aktuelle Funktionen und vollständigen Ablauf beschreibt die Editor-Anleitung. Warte vor Export auf Gespeichert.

Für den tatsächlichen Einsatzort exportieren

Wähle die Ausgabe nach Ziel:

Ziel Mögliches Format Prüfen
Posen und Transparenz einzeln prüfen PNG-Frames Kanten, Reihenfolge, Maße
2D-Sprites verwenden Sprite-Sheet mit Frame-Daten Layout, Timing, Drehpunkt
In unterstützte Engine importieren Engine-Paket Enthaltene Anleitung und Testszene
Alpha-Video im kompatiblen Web WebM Alpha Echte Alpha-Wiedergabe im Zielbrowser
Im Videoeditor zusammensetzen ProRes 4444 Alpha-Interpretation des Editors

Gewöhnliche MP4-Vorschau ist nicht das transparente Endprodukt. Als kleine Referenz gibt es unser öffentliches transparentes Bewegungsbeispiel: ein viersekündiges 512 × 512 WebM aus Website/Video-Assets. Es ist eine separate Wiedergabeprobe, nicht das Acht-Frame-Timingbeispiel oben.

Folge für Engines Godot 4, Unity, Unreal Paper2D oder Cocos Creator. Pakete liefern Assets und Importinformationen; Bewegung, Kollision und Zustandswechsel bleiben Aufgabe des Spielprojekts.

Wähle benötigte Formate und prüfe Zugangsanforderungen und Preis. PNG-Prüfung ist sinnvoll vor einem Produktionsformat. Aktuelle Preise und Exportzugang erklären erweiterte Formate und kommerzielle Nutzung.

Auf dem Zielhintergrund prüfen

Prüfe auf hellem, dunklem und tatsächlichem Szenenhintergrund. Beobachte die ganze Bewegung, insbesondere schnelle Hände/Füße, feine Details und Landung.

Sind PNGs korrekt, Video aber schwarz, untersuche Player-Alpha-Unterstützung vor bezahlter Neugenerierung. Ist derselbe falsche Hintergrund überall, prüfe Quelle, Workflow und Export-Leinwand. Formatkompatibilität und Export-Fehlersuche erläutern die Schritte.

Mit einer freigestellten Figur, klarer Aktion und Zielformat kannst du beginnen. Öffne AnimGen oder prüfe zuerst den transparenten Workflow samt Downloads.

Bilddetail