Pixel Editor

Sprites og tilemaps, piksel for piksel: bilder, onion skinning, paletter, per-tile-kollisjoner, normal maps, 9-slice, og GIF- eller Aseprite-eksport.

På én linje#

En sprite- og tilemap-editor bygget for å jobbe like komfortabelt på 32×32 som på 1024×1024, med animasjonsbilder og fargeverktøy som forstår paletter.

Oppsettet#

Pixel Editor: verktøyrad, lerret, lag, bildetidslinje og palettfelt

MenylinjeFile · Edit · View · Plugins
ModusfanerSprite og Tilemap
VerktøylinjeNew, angre/gjøre om, lerretsstørrelse, crop, flat ut lag, speil horisontalt og vertikalt, rutenett, import, eksport, Save
Alternativradpenselstørrelse, penselform, dekkevne, delt visning, og forhåndsinnstillinger
Venstre radblyant, former, fyll, gradient, tekst, utvalg, pipette, fargepar, palett
Midtenlerretet, med en liten avlesning av gjeldende verktøy og farger, og en Preview i 1:1
HøyreLayers, deretter Effects, Normal map, Reference og Modes
Nederstbilde-timeline, deretter palettfeltet
Statuslinjelerretsstørrelse, aktivt lag, zoom

Det du gjør her#

Tegn#

Pikselplassen i arbeidszoom, med rutenettet

Space + dra panorerer, scrollehjulet zoomer, 0 tilbakestiller visningen. Penselen har en størrelse og en form (kvadrat som standard), og en dekkevne. Forhåndsvisningspanelet viser spriten i 1:1 mens du jobber zoomet inn, som er den eneste ærlige visningen av en pikselsprite.

Lag#

Navngitte, kan omorganiseres, med hver sin blandingsmodus og dekkevne, pluss en fargetagg og en filterboks for når det er mange av dem. Effects legges på ikke-destruktivt.

Animer#

Timeline langs bunnen er en stripe med bilder. Legg til, dupliser, slett, omorganiser; sett en duration in milliseconds per bilde; spill av forover, bakover eller ping-pong. Avlesningen forteller deg hva det summerer til, 1 frame • 100 ms • ~10 fps.

Onion viser nabobildene svakt under det gjeldende, som er hvordan du hindrer en gangsyklus fra å skli ut av kurs.

Farge#

Pixel-verktøylinjen: tegneverktøyene og gjeldende farge

Palettfeltet: arbeidspaletten, nylige, nyanser, harmoni og en ramp

Palettfeltet er delen som lønner seg å lære seg:

Palettearbeidssettet, med en telling og + Add
Recentdet du har plukket i det siste
Shadesen lys-til-mørk-ramp generert fra gjeldende farge
Harmonykomplementære, triadiske og analoge forslag
Rampen ramp du bygger og beholder

Gjeldende farge kan redigeres som hex.

Tilemaps#

Tilemap-fanen bytter fra å tegne en sprite til å legge den ut som tiles. Resultatet går til Engine, som har sin egen tilemap-editor for selve banen.

Normal maps#

Normal map-seksjonen utleder et normal map fra spriten, slik at en 2D-sprite kan belyses i Engine i stedet for å forbli flat.

Reference#

Slipp et bilde inn i Reference-seksjonen, og det legger seg bak lerretet mens du tegner over det.

Panelene#

Ni av dem, og de siste fire er det som gjør en sprite til en spillressurs:

Tool Paletteverktøyene
Layersstakken
Timelineanimasjonsbildene
Referenceet bilde bak lerretet
Effectsikke-destruktive effekter på et lag
Tilesetbygg et tileset ut av lerretet, i en valgt tile-størrelse
Tilemaplegg de tilesene ut i et kart
Collisionskollisjonsformer per tile
Normal Maputled og rediger et normal map

Tilesets og tilemaps#

Tileset-panelet kutter lerretet i tiles (16 px som standard); Tilemap-panelet legger dem ut i et kart med lag, og kan endre størrelsen på det.

Tilemaps lagres som .tilemap, og eksporteres på to måter: as one file, eller separately: kartet som JSON og hvert tileset som sitt eget bilde, som er det en ekstern engine som regel vil ha.

Collisions#

Hver tile bærer en kollisjonsform, tegnet oppå tilesettet i stedet for deklarert i kode:

Fullhele tilen kolliderer
Nonepasserbar
Top / Bottom / Left / Right halfdelvis kollisjon
Slope up / Slope downvinklet kollisjon

Show Collisions legger dem over som et lag, og hele settet eksporteres som JSON. Å gjøre dette her betyr at Engine mottar et tilemap som allerede vet hva spilleren kan gå på.

Normal maps#

Generate Normal Map utleder ett fra spriten, med en strength; Normal Map Editor lar deg deretter male normalretningen for hånd (P), som er den eneste måten å fikse stedene den automatiske passeringen bommer på.

9-slice og pivot#

9-Slice guides markerer de strekkbare regionene til en UI-sprite, og Pivot / Origin setter punktet spriten roterer og forankres rundt. Begge følger med spriten inn i Engine.

Symmetry#

Mirror X og Mirror Y maler begge sider samtidig: horisontalt, vertikalt, begge deler, eller radialt.

Fargeramper og paletter#

Color Ramp-modalen bygger en ramp ordentlig i stedet for på øyemål, og paletter importeres fra .gpl (GIMP-palettformatet de fleste pikselkunst-paletter leveres i).

Eksportere#

FormatFor
PNGett enkelt bilde
GIFen animasjon, overalt
APNGen animasjon, med ekte alpha
Asepritetilbake inn i Aseprite, med lagene intakte
Atlas / sprite sheeten spillengine
.tilemapkartet, samlet eller delt opp i JSON + bilder

Filer den leser og skriver#

Native format.editor
Imports.png, .jpg, .aseprite, .tilemap, .gpl (paletter)
Exports.png, .gif, APNG, .aseprite, sprite atlas, .tilemap (samlet eller delt), collision JSON

Sende arbeid til andre moduler#

Produserer pikselkunst. Godtar pikselkunst og bilder.

Pikselkunst godtas av Inkwell, Composer, Animator, Matter og Engine: et sprite sheet kan gå rett inn i et spill uten en omvei via en fil.

Å jobbe med noen andre#

Pixel Editor synkroniserer operasjon for operasjon: scenedata, ressurser, animasjoner og skript.

Begrensninger og vanlige fallgruver#

  • Zoom er ikke oppløsning. Statuslinjen viser den virkelige lerretsstørrelsen; Preview viser den i 1:1.
  • En myk pensel er ikke en pikselpensel. Dekkevne under 100 % anti-aliaser kantene dine, vanligvis ikke det du vil ha på en sprite.
  • Bildevarighet er per bilde, ikke per animasjon. En 12-bilders syklus på 100 ms hver kjører på ~10 fps, uansett hva de andre gjør.