Vai al contenuto

Generatore di normal map per sprite 2D

Dai profondità agli sprite piatti sotto le luci 2D. Trascina uno sprite, sposta la luce su di esso nell’anteprima e scarica una normal map che Godot e Unity leggono così com’è. Niente lascia il tuo dispositivo.

Creato sul tuo dispositivo. Le tue immagini non vengono mai caricate.

  • Mai caricati
  • Anteprima della luce dal vivo
  • Tante immagini in una volta

Come funziona

Come creare una normal map da uno sprite

  1. Passaggio 1: Aggiungi il tuo sprite

    Scegli, trascina o incolla uno sprite, un tile o una texture. Va bene anche un’intera cartella.

  2. Passaggio 2: Modella il rilievo

    Scegli da dove viene la profondità e quanto è intensa, e passa il puntatore sull’anteprima per vedere come cade la luce.

  3. Passaggio 3: Scarica il PNG

    La mappa viene salvata come nome_n.png, il nome che i motori abbinano allo sprite, alle stesse dimensioni dello sprite.

Generatore di normal map

Sprite 2D che reagiscono alla luce

  • Illuminato mentre lavori

    L’anteprima illumina lo sprite con la sua normal map: giudichi il risultato, non un’immagine viola.

  • Profondità dalla forma o dalla luminosità

    Arrotonda uno sprite a colori piatti partendo dal contorno, leggi il rilievo di una texture dai suoi chiari e scuri, oppure unisci le due cose.

  • Giusta per il tuo motore

    Verde verso l’alto per Godot e Unity, oppure invertito per Unreal, con la trasparenza dello sprite mantenuta.

  • Mai caricati

    Tutto avviene nel browser, quindi le tue immagini restano sul tuo dispositivo.

In dettaglio

Normal map per i giochi 2D

Che cosa fa una normal map

Uno sprite è piatto, quindi una luce in un gioco 2D lo illumina in modo uniforme, come un adesivo. Una normal map è una seconda immagine delle stesse dimensioni i cui colori dicono da che parte è rivolto ogni pixel. Con essa, il motore illumina il lato dello sprite rivolto alla lampada e ombreggia l’altro.

Nessun disegno contiene questa informazione, quindi va stimata. Questo strumento stima un’altezza per ogni pixel e trasforma le pendenze di quell’altezza nella mappa.

Scegliere da dove viene la profondità

  • Forma arrotonda lo sprite dal contorno verso il centro. È adatta a personaggi e oggetti disegnati a colori piatti, dove la luminosità dice poco sulla profondità.
  • Luminosità tratta i pixel chiari come alti e quelli scuri come bassi. È adatta alle texture: pietra, mattoni, corteccia, tile di terreno.
  • Entrambi unisce le due cose, ed è il miglior punto di partenza per la maggior parte degli sprite.
  • Intensità e arrotondamento: aumenta l’intensità per ombre più profonde e l’arrotondamento per una luce più morbida e rotonda. Rotondità stabilisce fin dove, dal contorno verso l’interno, la superficie continua a salire.

Usare la mappa nel tuo motore

In Godot, crea una CanvasTexture, metti lo sprite in Diffuse e la mappa in Normal Map, e aggiungi alla scena un PointLight2D o un DirectionalLight2D. In Unity, aggiungi la mappa come texture secondaria chiamata _NormalMap nello Sprite Editor e illumina la scena con le luci 2D della Universal Render Pipeline.

Entrambi leggono il verde verso l’alto, ed è così che la mappa viene salvata. Attiva Inverti il canale verde per i motori che lo leggono verso il basso, come Unreal.

Generatore di normal map

Domande frequenti

Le mie immagini vengono caricate da qualche parte?

No. Tutto avviene nel tuo browser, sul tuo dispositivo. Le tue immagini non vengono mai inviate a Moriqa né a nessun altro, e non resta nulla dopo che chiudi la pagina.

Come creo una normal map da uno sprite?

Aggiungi lo sprite, scegli da dove viene la profondità, controlla l’anteprima illuminata e scarica il PNG. Ha le stesse dimensioni dello sprite.

Perché una normal map è viola e blu?

I suoi colori sono direzioni, non colori: il rosso va da sinistra a destra, il verde dal basso verso l’alto e il blu punta verso chi guarda. Una superficie piatta risulta del tipico viola chiaro.

Funziona con la pixel art?

Sì. La mappa mantiene le dimensioni esatte dello sprite e i suoi bordi netti. Tieni basso l’arrotondamento per un aspetto nitido e marcato, oppure alzalo per una luce più morbida.

Una mappa generata è buona quanto una dipinta a mano?

No. È un buon punto di partenza, e spesso basta per oggetti di scena e tile. Per un personaggio principale, gli artisti di solito correggono la mappa a mano.

Devo invertire il canale verde?

Non per Godot o Unity. Invertilo solo se la luce sembra arrivare dal basso quando è in alto: vuol dire che il tuo motore legge il verde al contrario.

Ti serve prima lo sprite?

Apri l’editor di pixel art di Moriqa per disegnare e animare sprite, gratis nel browser.