Generatore di pixel art

Un editor di pixel art per disegnare con precisione sulla griglia

La pixel art si progetta cella per cella. Questo editor parte da una griglia vuota e trasparente e memorizza un colore, o la trasparenza, per ciascun pixel logico. Non trasforma una fotografia in blocchi di colore medio: per quel procedimento distinto usa il Pixelatore di immagini. Inoltre, non genera immagini da un prompt per l’IA.

Una griglia piccola impone una silhouette più chiara, mentre una griglia più grande lascia spazio a ombreggiature e accessori. Queste sono indicazioni pratiche di partenza, non regole imposte da una piattaforma:

Mantieni nitidi i pixel ingranditi

L’esportazione PNG usa una scala intera e disattiva lo smussamento. Ogni pixel sorgente di un’immagine 16×16 diventa quindi esattamente un quadrato di 4×4, 8×8 o più grande, invece di creare un bordo sfocato. La scacchiera e la griglia opzionale sono solo guide dell’editor e non fanno mai parte del file. Le celle trasparenti restano trasparenti.

L’esportazione SVG usa rettangoli dai bordi netti e omette le celle trasparenti. Il JSON del progetto conserva la griglia logica modificabile e la tavolozza di lavoro. È un formato di progetto Hyperion, non sostituisce i formati a livelli delle applicazioni desktop per pixel art.

Strumenti di disegno e comportamento speculare

• Matita colora le celle e collega i rapidi campioni del puntatore, evitando vuoti nel tratto.
• Gomma riporta le celle alla trasparenza.
• Riempimento cambia una regione connessa sui quattro lati; le regioni che si toccano solo in diagonale restano separate.
• Contagocce seleziona il colore di una cella esistente. Campionando la trasparenza si passa alla gomma.
• Disegno speculare riflette l’azione da sinistra a destra, dall’alto in basso o in entrambi i sensi. Le righe e le colonne centrali vengono applicate una sola volta.

Mouse, penna, tocco e tastiera usano la stessa griglia logica. Porta il focus sulla tela, sposta la cella attiva con i tasti freccia, quindi premi Spazio o Invio per applicare lo strumento selezionato. P, E, F e I selezionano gli strumenti; Canc cancella; Ctrl/Cmd+Z annulla.

Funzionamento nel browser e riferimenti tecnici

L’editor usa l’API Canvas, i Pointer Events e il controllo dello smussamento dell’immagine. La creazione del PNG segue l’API di esportazione in Blob. Le interazioni con tastiera e puntatore sono progettate secondo le indicazioni di operabilità delle WCAG 2.2.

Illustrazione, nome e tavolozza rimangono nello stato locale del browser e non vengono aggiunti agli URL o ai payload inviati ai nostri server. Le normali richieste di pagina avvengono comunque quando si cambia fase del percorso guidato. Se lo spazio di archiviazione della scheda non è disponibile, l’editor completo in una sola pagina può continuare a funzionare in memoria, ma il percorso guidato non avanza per evitare la perdita silenziosa del progetto.