Zum Inhalt springen

Normal-Map-Generator für 2D-Sprites

Gib flachen Sprites Tiefe unter 2D-Lichtern. Zieh ein Sprite hierher, beweg das Licht in der Vorschau darüber und lade eine Normal Map herunter, die Godot und Unity so lesen, wie sie ist. Nichts verlässt dein Gerät.

Wird auf deinem Gerät erstellt. Deine Bilder werden nie hochgeladen.

  • Nie hochgeladen
  • Live-Lichtvorschau
  • Viele Bilder auf einmal

So funktioniert es

So machst du aus einem Sprite eine Normal Map

  1. Schritt 1: Sprite hinzufügen

    Wähle ein Sprite, eine Kachel oder eine Textur aus, zieh sie hierher oder füge sie ein. Ein ganzer Ordner geht auch.

  2. Schritt 2: Relief formen

    Wähle, woher die Tiefe kommt und wie stark sie ist, und fahr mit dem Zeiger über die Vorschau, um zu sehen, wie das Licht darauf fällt.

  3. Schritt 3: PNG herunterladen

    Die Map wird als name_n.png gespeichert, dem Namen, den Engines dem Sprite zuordnen, in der Größe des Sprites.

Normal-Map-Generator

2D-Sprites, die auf Licht reagieren

  • Beim Arbeiten beleuchtet

    Die Vorschau beleuchtet das Sprite mit seiner eigenen Normal Map: Du beurteilst das Ergebnis, nicht ein lila Bild.

  • Tiefe aus Form oder Helligkeit

    Runde ein Sprite in flachen Farben von seinem Umriss her ab, lies das Relief einer Textur aus Hell und Dunkel oder misch beides.

  • Passend für deine Engine

    Grün nach oben für Godot und Unity oder umgekehrt für Unreal, mit erhaltener Transparenz des Sprites.

  • Nie hochgeladen

    Alles passiert in deinem Browser, deine Bilder bleiben also auf deinem Gerät.

Im Detail

Normal Maps für 2D-Spiele

Was eine Normal Map bewirkt

Ein Sprite ist flach, deshalb hellt ein Licht in einem 2D-Spiel es gleichmäßig auf, wie einen Aufkleber. Eine Normal Map ist ein zweites Bild derselben Größe, dessen Farben sagen, wohin jedes Pixel zeigt. Mit ihr beleuchtet die Engine die Seite des Sprites, die zur Lampe zeigt, und schattiert die andere.

Keine Zeichnung enthält diese Information, sie muss also geschätzt werden. Dieses Werkzeug schätzt für jedes Pixel eine Höhe und macht aus den Steigungen dieser Höhe die Map.

Wählen, woher die Tiefe kommt

  • Form rundet das Sprite vom Umriss zur Mitte hin ab. Das passt zu Figuren und Objekten in flachen Farben, bei denen die Helligkeit wenig über die Tiefe sagt.
  • Helligkeit behandelt helle Pixel als hoch und dunkle als tief. Das passt zu Texturen: Stein, Ziegel, Rinde, Bodenkacheln.
  • Beides mischt die zwei und ist der beste Anfang für die meisten Sprites.
  • Intensität und Glättung: Erhöhe die Intensität für tiefere Schatten und die Glättung für weicheres, runderes Licht. Rundung legt fest, wie weit die Oberfläche vom Umriss nach innen weiter ansteigt.

Die Map in deiner Engine verwenden

Erstelle in Godot eine CanvasTexture, leg das Sprite in Diffuse und die Map in Normal Map und füge der Szene ein PointLight2D oder ein DirectionalLight2D hinzu. In Unity fügst du die Map im Sprite Editor als sekundäre Textur mit dem Namen _NormalMap hinzu und beleuchtest die Szene mit den 2D-Lichtern der Universal Render Pipeline.

Beide lesen Grün als oben, und so wird die Map gespeichert. Schalte Grünkanal umkehren für Engines ein, die es als unten lesen, etwa Unreal.

Normal-Map-Generator

Häufige Fragen

Werden meine Bilder irgendwohin hochgeladen?

Nein. Alles läuft in deinem Browser, auf deinem eigenen Gerät. Deine Bilder werden nie an Moriqa oder sonst jemanden gesendet, und nach dem Schließen der Seite bleibt nichts gespeichert.

Wie erstelle ich aus einem Sprite eine Normal Map?

Füge das Sprite hinzu, wähle, woher die Tiefe kommt, prüf die beleuchtete Vorschau und lade das PNG herunter. Es ist genauso groß wie das Sprite.

Warum ist eine Normal Map lila und blau?

Ihre Farben sind Richtungen, keine Farben: Rot läuft von links nach rechts, Grün von unten nach oben, und Blau zeigt zum Betrachter. Eine flache Fläche ergibt das typische helle Lila.

Funktioniert das mit Pixel-Art?

Ja. Die Map behält die genaue Größe des Sprites und seine harten Kanten. Halte die Glättung niedrig für einen scharfen, kantigen Look oder erhöhe sie für weicheres Licht.

Ist eine generierte Map so gut wie eine handgemalte?

Nein. Sie ist ein guter Ausgangspunkt und für Requisiten und Kacheln oft gut genug. Bei einer Hauptfigur korrigieren Künstler die Map meist von Hand.

Soll ich den Grünkanal umkehren?

Für Godot oder Unity nicht. Kehr ihn nur um, wenn das Licht von unten zu kommen scheint, obwohl es oben ist; dann liest deine Engine Grün andersherum.

Brauchst du erst das Sprite?

Öffne den Pixel-Art-Editor von Moriqa, um Sprites zu zeichnen und zu animieren, kostenlos in deinem Browser.