AI-Pixel-Art-Generator — Beschreibe es, dann betritt deine Welt
Erstelle deinen eigenen AI-Pixel-Art-Generator
Erzeuge Pixel-Art mit AI aus einem Satz oder einem Bild — kostenlos in deinem Browser. Setze sie dann in eine 3D-Pixelwelt, durch die du wirklich laufen kannst. Kein Download, kein Code.
Ein AI-Pixel-Art-Generator nimmt einen geschriebenen Satz — oder ein vorhandenes Bild — und liefert ein Sprite-Sheet zurück, das du in einem Spiel verwenden kannst. Bei Neta Studio endet dieses Sheet nicht beim Download. Es wird zu einer Komponente in einer 3D-Welt, durch die du in einem Browser-Tab laufen kannst, ohne Installation und ohne Code.
Diese Seite behandelt, was der Satz tatsächlich steuert, wo die Generierung zuverlässig versagt, wie die Pipeline Text in eine wiederverwendbare Komponente verwandelt und wie du von einem generierten Frame-Streifen zu einer Figur kommst, die sich in einer Szene bewegt. Wer die Kurzfassung will: Benenne das Motiv, die Ansicht, das Raster und die Frame-Anzahl, und korrigiere dann die Umrandung von Hand.
Der AI-Pixel-Art-Generator (Live)
Das Eingabefeld ist die Schnittstelle. Ein Satz legt drei Dinge fest: das Motiv (Slime, Ritter, Fass, Boden-Tile), Stil-Hinweise (Palette und Ära — vierfarbiger Handheld, 16-Farben-Konsole, gedämpfte Wüste, kalter Dungeon) und eine ungefähre Canvas-Größe (16x16, 32x32, 64x64).
Es legt nicht alles fest. Ein Satz erzeugt nicht zuverlässig eine exakte Frame-Anzahl, wenn du keine nennst. Er garantiert keine saubere 1px-Umrandung in einer konsistenten Richtung und hält die Lichtrichtung nicht über sechs separate Generierungen hinweg identisch. Wenn das erste Ergebnis eine gute Silhouette und eine schlechte Umrandung hat, ist die Umrandung das günstig zu Behebende — ein zwei Minuten dauerndes Übermalen schlägt sechs weitere Generierungen.
Behandle den Satz also als Spezifikation mit Standardwerten. Standardraster ist 32x32, Standardpalette sind 16 Farben, Standardausgabe ist ein einzelner Frame in Frontalansicht. Benenne, was wichtig ist, und lass den Rest auf die Standardwerte zurückfallen. Grüner Slime in Seitenansicht, 32x32, 6 Farben, 4-Frame-Idle ergibt etwas Brauchbares. Cooler Slime nicht.
Was du generieren kannst
Vier Ausgabefamilien decken das meiste ab, was ein 2D-Spiel braucht. Jede hat eine einzige Einschränkung, die darüber entscheidet, ob das Ergebnis brauchbar ist, und es ist meist nicht die Einschränkung, um die sich die Leute sorgen.
- CharaktereBraucht ein klares Posenwort. Ein bloßes Motiv liefert einen stehenden Frame; Ritter, Seitenansicht, mitten im Schwung liefert etwas, das du in einen Animationsstreifen packen kannst. Ohne Ansicht und Pose rät der Generator, und er rät genauso oft frontal wie von der Seite.
- TilesMuss kacheln, deshalb zählen die Kanten mehr als die Mitte. Ein 32x32-Gras-Tile mit wunderschöner Mitte und einer 1px-Naht in der rechten Spalte ist Ausschuss. Generiere Tile-Varianten in einem Durchgang und prüfe die Kachelung, bevor du die Grafik prüfst.
- PropsKleines Raster bedeutet nur Silhouette. Bei 16x16 ist ein Fass ein abgerundetes Rechteck mit einem dunkleren Band. Eine Anfrage nach Planken-Textur fügt Rauschen hinzu, das das Herunterskalieren übersteht und wie Schmutz wirkt. Zwei oder drei Werte, kein Detail.
- AnimationsstreifenFrame-Anzahl und eine Schleife, die sich schließt. Ein Streifen ist nur nützlich, wenn der letzte Frame wieder in Frame null übergeht. Wenn du die Frame-Anzahl nicht benennen kannst, kannst du die Schleife nicht prüfen, und die Schleife ist der Teil, der bricht.
So funktioniert es: von einem Satz zu einer Komponente
Die Pipeline hat drei Stufen, und jede Stufe hält ihre Ausgabe in einer Form, die du weiterhin bearbeiten kannst. Nichts endet als plattgemachtes PNG, das du nicht mehr ändern kannst.
01
Parsen. Der Satz wird zu einem Komponenteneintrag: Motiv, Ansicht, Palette, Rastergröße, Frame-Anzahl, Pose. Alles, was du auslässt, bekommt einen Standardwert — 32x32, 16 Farben, ein Frame, Frontalansicht.
02
Zeichnen. Die Komponente wird im Zielraster rasterisiert. Pixel rasten am Raster ein, Farben werden auf die Palette herunterquantisiert, und ein Umrandungs-Durchgang legt einen 1px dunkleren Ton entlang der Silhouettenkante, wo opake Pixel auf Transparenz treffen.
03
Speichern. Das fertige Sheet landet als benannte Komponente mit angehängten Metadaten in der Asset-Bibliothek: Raster, Palette, Frame-Anzahl, Wiedergaberate. Es bekommt ein Vorschaubild, und jeder Actor in jeder Szene kann es referenzieren.
04
Instanziieren. Das Zuweisen der Komponente zu einem Actor erzeugt ein Sprite-Material mit Nearest-Neighbour-Filterung, deaktivierten Mipmaps und Alpha-Test bei 0,5. Das verhindert, dass ein 32x32-Sprite zu Brei wird, wenn sich die Kamera bewegt.
Live-Demo: generieren, dann hineinlaufen
Die Demo ist kein Video. Der Generator läuft auf der Seite, und die Szene daneben ist derselbe 3D Game Builder, der alles andere auf Neta Studio rendert. Beide Hälften nutzen dieselbe Asset-Bibliothek, du läufst also genau durch das, was du generierst.
Der Weg vom Satz zum ersten Schritt ist kurz, und es lohnt sich, ihn einmal von Anfang bis Ende zu gehen, damit du weißt, wo die Bruchstellen sind, bevor du dich auf ein Set von Assets festlegst.
01
Tippe einen Satz in das Feld: Motiv, Ansicht, Palette, Rastergröße, Frame-Anzahl. Nimm das Ansichtswort mit auf. Seitenansicht oder Dreiviertelansicht spart eine Neugenerierung.
02
Generiere und schau dir den Frame-Streifen an, nicht den ersten Frame. Der erste Frame ist meist in Ordnung; die Schleife ist das, was versagt.
03
Schicke das Ergebnis in die Asset-Bibliothek. Es bekommt einen Namen und ein Vorschaubild und ist nicht mehr nur eine temporäre Vorschau.
04
Wechsle zum Szenen-Panel, wähle einen Actor aus und weise ihm die Komponente zu.
05
Stelle die Wiedergabe auf 8 Frames pro Sekunde. Schneller wirkt bei 32x32 wie Zittern; langsamer wie eine Diashow.
06
Laufe mit WASD durch die Welt. Wenn das Sprite den falschen Maßstab hat, ändere den Welt-Einheiten-pro-Pixel-Wert des Actors, statt die Grafik neu zu generieren.
07
Öffne Mini World für einen kleinen Testbereich oder The Cyclops' Island, um dieselben Komponenten im Weltmaßstab bei mehr Arbeit zu sehen.
AI-Pixel-Animation
Animation ist der Teil der Pixel-Generierung, den die Leute unterschätzen. Ein 4-Frame-Gehzyklus sind nicht vier Zeichnungen einer gehenden Person. Es ist eine Schleife aus Kontakt-, Abwärts-, Durchgangs- und Aufwärtsposen, und die Schleife funktioniert nur, wenn die Kontakt-Frames zueinander passen.
Was ein generierter Zyklus richtig macht: eine lesbare Schleife, eine konsistente Palette über die Frames hinweg, eine gleichbleibende Silhouettenbreite und eine Frame-Anzahl, die dem entspricht, was du angefordert hast. Der erste und der letzte Frame schließen sich meist, was mehr ist, als die meisten ersten handgezeichneten Versuche schaffen.
Was er meist falsch macht: die Kontaktposen. Der aufgesetzte Fuß landet beim linken Kontakt auf einer anderen Höhe als beim rechten, die Arme schwingen auf derselben Seite wie die Beine statt entgegengesetzt, und der Durchgangs-Frame liegt ein halbes Pixel neben der Mitte, sodass die Figur seitlich wippt. Das sind Ein-Pixel-Probleme, und sie sind alle von Hand behebbar, aber du musst bei 4-facher Vergrößerung danach suchen, nicht bei 100 Prozent.
AI-Pixel-Art-Generator: das Frame-Budget verstehen
Die Frame-Anzahl ist ein Budget, und die Kosten sind nicht nur Speicher. Jeder zusätzliche Frame ist eine weitere Gelegenheit für die Schleife zu brechen und ein weiterer Frame zum Übermalen. Hier ist, was das Sheet für ein 32x32-Sprite in einer einzigen Reihe, RGBA8, tatsächlich belegt:
| Frames (32x32, eine Reihe) | Sheet-Größe | Pixel | RGBA8 im Speicher |
|---|---|---|---|
| 4 | 128x32 | 4,096 | 16 KB |
| 6 | 192x32 | 6,144 | 24 KB |
| 8 | 256x32 | 8,192 | 32 KB |
| 12 | 384x32 | 12,288 | 48 KB |
| 16 | 512x32 | 16,384 | 64 KB |
Kostenlos, kein Download, kein Code
Der Generator und der Editor laufen in einem Browser-Tab. Es gibt keinen Installer, keinen Build-Schritt, keine Asset-Import-Pipeline und kein Skript zu schreiben. Du öffnest die Seite, tippst einen Satz und schaust dir ein Ergebnis an. Das sind die gesamten Einrichtungskosten.
Dieselbe Pipeline generiert Tiles und Props, nicht nur Charaktere. Rastergröße und Palette sind in allen drei Fällen dieselben Einstellungen; der einzige Unterschied ist die Prüfung, die du danach durchführst. Charaktere bekommen eine Schleifenprüfung, Tiles eine Nahtprüfung an allen vier Kanten, Props eine Silhouettenprüfung bei 1-facher Vergrößerung.
Die verwandten Pixel-Seiten auf Neta Studio decken die Teile ab, die diese Seite nicht abdeckt: das manuelle Bearbeiten einzelner Pixel innerhalb einer generierten Komponente und das Packen von Frames, die du bereits hast, in ein Sheet. Wenn du Frames, aber keinen Packer hast, fang dort an. Wenn du nichts hast, fang hier an.
Pixel-Art aus einem Bild
Text ist der eine Eingabeweg. Der andere ist ein Bild. Lade ein Foto oder ein vorhandenes Sprite hoch, und die Pipeline gestaltet es um, statt es zu beschreiben: Sie behält die Komposition und die Silhouette bei und zwingt Palette und Raster auf das, was du wählst.
Das ist der bessere Weg, wenn du bereits ein Sprite mit der richtigen Pose hast und einen Palettentausch oder eine Auflösungsänderung möchtest, wenn du ein Foto mit sauberer Silhouette vor einem einfachen Hintergrund hast oder wenn du neue Tiles brauchst, die zu einem Tile passen, das dir bereits gefällt. Text ist der bessere Weg, wenn du keine Vorlage hast, wenn du eine Pose brauchst, die niemand fotografiert hat, oder wenn das, was du festlegen möchtest, die Frame-Anzahl ist.
Der Fehlermodus bei der Bildeingabe ist das Detail. Ein auf 32x32 herunterskaliertes Foto verliert alles, was keine Silhouette ist, also entscheide dich für das Zielraster, bevor du hochlädst, nicht danach. Weiche Kanten — Haare, Rauch, Bewegungsunschärfe — werden zu einem Saum halbtransparenter Pixel, der über einem hellen Hintergrund als grauer Halo erscheint. Unterziehe das Alpha einem harten Schwellenwert, sodass Pixel entweder opak oder weg sind, und lass den Alpha-Test den Rest erledigen.
AI-Pixel-Art-Generator: Text- oder Bildeingabe
Beide Eingaben enden im selben Komponenteneintrag. Der Unterschied ist, wo du die Mühe investieren willst: das Ergebnis vorab festlegen oder ein vorhandenes korrigieren.
| Eingabe | Besser wenn | Achte auf |
|---|---|---|
| Text | Du brauchst eine bestimmte Pose, Ansicht, Frame-Anzahl oder Palette, die du benennen kannst | Vage Sätze; weggelassene Frame-Anzahlen fallen standardmäßig auf einen Frame zurück |
| Bild | Du hast die Komposition bereits und möchtest einen Stil-, Paletten- oder Rasterwechsel | Weiche Kanten, unruhige Hintergründe, Details, die das Zielraster nicht überleben |
Betritt die Welt, zu der es gehört
Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nimm das Sheet, das du gerade erstellt hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.
FAQ
Ist es kostenlos? +
Die Generierung im Browser ist kostenlos zum Ausprobieren. Es gibt keinen Installer und keinen Build-Schritt, es kostet also nur einen Satz und ein paar Sekunden, herauszufinden, ob die Ausgabe zu deinem Projekt passt.
Brauche ich ein Konto? +
Nicht, um zu generieren und ein Ergebnis anzuschauen. Ein Konto bindet ein Projekt an dich statt an einen einzelnen Browser-Tab, und das zählt, sobald du möchtest, dass eine Komponente morgen noch existiert.
Welche Größe haben die Sprites? +
Du wählst das Raster: 16x16, 32x32 oder 64x64, standardmäßig 32x32. Die Sheet-Breite ist die Rasterbreite multipliziert mit der Frame-Anzahl, ein 8-Frame-Charakter mit 32x32 ist also ein 256x32-Bild. Halte die Frames in einer einzigen Reihe, und WebGL2 ist es egal, ob die Abmessungen Zweierpotenzen sind.
Kann ich das Ergebnis animieren? +
Ja. Benenne die Frame-Anzahl und die Schleife im Satz und prüfe dann, ob der letzte Frame wieder in den ersten übergeht. Die Wiedergabe startet bei 8 Frames pro Sekunde; unter etwa 6 wirkt es bei 32x32 wie eine Diashow, und über etwa 12 wie Zittern.
Bekomme ich einen transparenten Hintergrund? +
Ja, das Sheet trägt einen Alpha-Kanal. Das übliche Problem ist ein Saum halbtransparenter Pixel dort, wo der Hintergrund entfernt wurde, der über hellem Gelände als Halo erscheint. Unterziehe das Alpha einem harten Schwellenwert und stelle das Sprite-Material auf Alpha-Test bei 0,5.
Kann ich es in einem kommerziellen Spiel verwenden? +
Das ist eine Lizenzfrage, keine technische, und die Antwort hängt von den Bedingungen ab, die an das Werkzeug geknüpft sind, nicht davon, wie die Pixel erzeugt wurden. Lies diese Bedingungen und, wenn das Projekt wichtig ist, hol dir eigenen Rat dazu ein.
Kann ich das Ergebnis bearbeiten? +
Ja. Eine Komponente behält ihr Raster, ihre Palette und ihre Frame-Anzahl als Metadaten, sodass du einzelne Pixel übermalen, die ganze Palette austauschen oder einen Frame neu generieren kannst, ohne den Rest neu aufzubauen. Bearbeitungen bleiben am Pixelraster, beim erneuten Export wird also nichts neu abgetastet.
Ersetzt es einen Künstler? +
Nein. Es ist gut bei Masse und bei ersten Entwürfen: Platzhalter-Sets, Tile-Varianten, Requisiten-Füllwerk, Paletten-Erkundungen. Es ist schwach bei der Absicht — eine lesbare Silhouette bei 16x16, eine konsistente Lichtrichtung über ein Set hinweg, Keyframe-Timing, das Gewicht verkauft. Künstler nutzen es, um die leere Leinwand zu überspringen, nicht um die Arbeit zu überspringen.
Zurück zum 3D Game Builder
Alle 31 fertigen 3D-Welten, Spiele und Szenen sind auf einer Seite versammelt — jede einzelne davon spielbar.