Pixel Editor
Sprite e tilemap, pixel per pixel: fotogrammi, onion skinning, palette, collisioni per tile, normal map, 9-slice, ed export GIF o Aseprite.
In breve#
Un editor di sprite e tilemap costruito per lavorare a 32×32 con la stessa comodità di 1024×1024, con fotogrammi di animazione e strumenti colore che capiscono le palette.
Il layout#
| Barra dei menu | File · Edit · View · Plugins |
| Schede modalità | Sprite e Tilemap |
| Barra degli strumenti | New, annulla/ripeti, dimensione della tela, ritaglio, appiattimento livelli, ribaltamento orizzontale e verticale, griglia, import, export, Save |
| Riga delle opzioni | dimensione del pennello, forma del pennello, opacità, vista divisa, e preset |
| Colonna sinistra | matita, forme, riempimento, gradiente, testo, selezione, contagocce, coppia di colori, palette |
| Centro | la tela, con un piccolo riquadro informativo dello strumento e dei colori correnti, e una Preview a 1:1 |
| Destra | Layers, poi Effects, Normal map, Reference e Modes |
| In basso | la timeline dei fotogrammi, poi la barra della palette |
| Barra di stato | dimensione della tela, livello attivo, zoom |
Cosa si fa qui#
Disegnare#
Space + trascina fa la panoramica, la rotellina zooma, 0 reimposta la vista. Il pennello ha una dimensione e una forma (quadrata per impostazione predefinita), e un'opacità. Il pannello di anteprima mostra lo sprite a 1:1 mentre lavori zoomato, l'unica vista onesta di uno sprite pixel.
I livelli#
Nominati, riordinabili, ciascuno con una modalità di fusione e un'opacità, più un'etichetta colore e un campo di filtro per quando ce ne sono molti. Effects si applica in modo non distruttivo.
Animare#
La timeline lungo il fondo è una striscia di fotogrammi. Aggiungi, duplica, elimina, riordina; imposta una durata in millisecondi per fotogramma; riproduci avanti, indietro o a ping-pong. Il riquadro informativo ti dice a quanto corrisponde tutto ciò, 1 frame • 100 ms • ~10 fps.
Onion mostra i fotogrammi vicini in trasparenza sotto quello corrente, il modo in cui impedisci a un ciclo di camminata di andare alla deriva.
Il colore#
La barra della palette è la parte che ripaga impararla:
| Palette | il set di lavoro, con un conteggio e + Add |
| Recent | quello che hai scelto di recente |
| Shades | una rampa dal chiaro allo scuro generata dal colore corrente |
| Harmony | suggerimenti complementari, triadici e analoghi |
| Ramp | una rampa che costruisci e conservi |
Il colore corrente è modificabile in esadecimale.
Le tilemap#
La scheda Tilemap passa dal disegnare uno sprite al disporlo come tile. Il risultato va a Engine, che ha un proprio editor di tilemap per il livello stesso.
Le normal map#
La sezione Normal map deriva una normal map dallo sprite, così uno sprite 2D può essere illuminato in Engine invece di restare piatto.
Il riferimento#
Rilascia un'immagine nella sezione Reference e si posiziona dietro la tela mentre disegni sopra.
I pannelli#
Sono nove, e gli ultimi quattro sono ciò che trasforma uno sprite in una risorsa di gioco:
| Tool Palette | gli strumenti |
| Layers | la pila |
| Timeline | i fotogrammi di animazione |
| Reference | un'immagine dietro la tela |
| Effects | effetti non distruttivi su un livello |
| Tileset | costruisci un tileset a partire dalla tela, a una dimensione di tile scelta |
| Tilemap | disponi quelle tile in una mappa |
| Collisions | forme di collisione per tile |
| Normal Map | deriva e modifica una normal map |
Tileset e tilemap#
Il pannello Tileset taglia la tela in tile (16 px per impostazione predefinita); il pannello Tilemap le dispone in una mappa con livelli, e può ridimensionarla.
Le tilemap si salvano come .tilemap, ed esportano in due modi: come file unico, oppure separatamente: la mappa come JSON e ogni tileset come propria immagine, ciò che di solito vuole un motore esterno.
Le collisioni#
Ogni tile porta una forma di collisione, disegnata sopra il tileset invece che dichiarata nel codice:
| Full | l'intera tile entra in collisione |
| None | attraversabile |
| Top / Bottom / Left / Right half | collisione parziale |
| Slope up / Slope down | collisione angolata |
Show Collisions le sovrappone, e l'intero set si esporta come JSON. Farlo qui significa che Engine riceve una tilemap che sa già dove può camminare il giocatore.
Le normal map#
Generate Normal Map ne deriva una dallo sprite, con una strength; il Normal Map Editor ti permette poi di dipingere a mano la direzione della normale (P), l'unico modo per correggere i punti che il passaggio automatico sbaglia.
9-slice e pivot#
Le 9-Slice guides segnano le regioni allungabili di uno sprite UI, e Pivot / Origin imposta il punto attorno a cui lo sprite ruota e si ancora. Entrambe viaggiano con lo sprite in Engine.
Simmetria#
Mirror X e Mirror Y dipingono entrambi i lati insieme: orizzontale, verticale, entrambi, o radiale.
Rampe di colore e palette#
La finestra modale Color Ramp costruisce una rampa in modo corretto invece che a occhio, e le palette si importano da .gpl (il formato di palette di GIMP in cui è distribuita la maggior parte delle palette di pixel art).
Esportare#
| Formato | Per |
|---|---|
| PNG | un singolo fotogramma |
| GIF | un'animazione, ovunque |
| APNG | un'animazione, con alpha reale |
| Aseprite | di ritorno in Aseprite, livelli intatti |
| Atlas / sprite sheet | un motore di gioco |
.tilemap | la mappa, insieme o divisa in JSON + immagini |
File letti e scritti#
| Formato nativo | .editor |
| Import | .png, .jpg, .aseprite, .tilemap, .gpl (palette) |
| Export | .png, .gif, APNG, .aseprite, sprite atlas, .tilemap (insieme o diviso), JSON delle collisioni |
Inviare lavoro ad altri studi#
Produce pixel art. Accetta pixel art e immagini.
La pixel art è accettata da Inkwell, Composer, Animator, Matter ed Engine: uno sprite sheet può entrare direttamente in un gioco senza passare per un file.
Lavorare con qualcun altro#
Il Pixel Editor sincronizza operazione per operazione: dati di scena, risorse, animazioni e script.
Limiti e problemi comuni#
- Lo zoom non è la risoluzione. La barra di stato mostra la dimensione reale della tela; la Preview la mostra a 1:1.
- Un pennello morbido non è un pennello pixel. Un'opacità sotto il 100% applicherà l'anti-aliasing ai tuoi bordi, di solito non ciò che vuoi su uno sprite.
- La durata del fotogramma è per fotogramma, non per animazione. Un ciclo di 12 fotogrammi a 100 ms ciascuno gira a ~10 fps, qualunque cosa facciano gli altri.