Pixel Editor
Sprity a tilemapy, pixel po pixelu: snímky, onion skinning, palety, kolize po jednotlivých dlaždicích, normálové mapy, 9-slice a export do GIF nebo Aseprite.
Ve zkratce#
Editor spritů a tilemap postavený tak, aby se v něm pracovalo stejně pohodlně na 32×32 jako na 1024×1024, s animačními snímky a barevnými nástroji, které rozumí paletám.
Rozvržení#
| Lišta nabídek | File · Edit · View · Plugins |
| Karty režimů | Sprite a Tilemap |
| Toolbar | New, zpět/znovu, velikost plátna, oříznutí, sloučení vrstev, překlopení vodorovně a svisle, mřížka, import, export, Save |
| Řádek voleb | velikost štětce, tvar štětce, krytí, rozdělené zobrazení a přednastavení |
| Levý panel | tužka, tvary, výplň, přechod, text, výběr, kapátko, dvojice barev, paleta |
| Střed | plátno, s malým výpisem aktuálního nástroje a barev, a Preview v měřítku 1:1 |
| Vpravo | Layers, pak Effects, Normal map, Reference a Modes |
| Dole | timeline snímků, pak lišta palety |
| Status bar | velikost plátna, aktivní vrstva, přiblížení |
Co tu děláte#
Kreslení#
Space + tažení posouvá pohled, kolečko myši přibližuje, 0 vrátí pohled na
výchozí stav. Štětec má velikost a tvar (ve výchozím stavu čtvercový) a krytí.
Panel Preview ukazuje sprite v měřítku 1:1, zatímco pracujete přiblíženě, což
je jediný poctivý pohled na pixelový sprite.
Vrstvy#
Pojmenované, přeuspořádatelné, každá s vlastním režimem prolnutí a krytím, plus barevný štítek a vyhledávací pole pro chvíle, kdy je jich hodně. Effects se aplikuje nedestruktivně.
Animace#
timeline podél spodního okraje je pás snímků. Přidávejte, duplikujte, mažte, přeuspořádávejte; nastavte duration in milliseconds pro každý snímek; přehrávejte vpřed, vzad nebo tam a zpět. Výpis vám řekne, na kolik to celkem vychází, 1 frame • 100 ms • ~10 fps.
Onion zobrazí sousední snímky slabě pod aktuálním, a přesně tak udržíte cyklus chůze, aby se nerozjížděl.
Barva#
Lišta palety je ta část, kterou se vyplatí naučit:
| Palette | pracovní sada, s počtem a + Add |
| Recent | co jste si naposledy vybrali |
| Shades | řada od světlé po tmavou, vygenerovaná z aktuální barvy |
| Harmony | návrhy komplementární, triadické a analogické |
| Ramp | řada, kterou si sami sestavíte a uchováte |
Aktuální barvu lze upravovat jako hex.
Tilemapy#
Karta Tilemap přepne z kreslení spritu na jeho rozkládání do dlaždic. Výsledek jde do Engine, který má vlastní editor tilemap pro samotný level.
Normálové mapy#
Sekce Normal map odvodí normálovou mapu ze spritu, takže 2D sprite lze v Engine nasvítit, místo aby zůstal plochý.
Reference#
Přetáhněte obrázek do sekce Reference a bude sedět za plátnem, zatímco přes něj kreslíte.
Panely#
Je jich devět, a posledních čtyři je to, co promění sprite v herní asset:
| Tool Palette | nástroje |
| Layers | sada vrstev |
| Timeline | animační snímky |
| Reference | obrázek za plátnem |
| Effects | nedestruktivní efekty na vrstvě |
| Tileset | sestaví tileset z plátna, ve zvolené velikosti dlaždice |
| Tilemap | rozloží tyto dlaždice do mapy |
| Collisions | tvary kolizí po jednotlivých dlaždicích |
| Normal Map | odvození a úprava normálové mapy |
Tilesety a tilemapy#
Panel Tileset rozřeže plátno na dlaždice (ve výchozím stavu 16 px); panel Tilemap je rozloží do mapy s vrstvami a umí ji zvětšit nebo zmenšit.
Tilemapy se ukládají jako .tilemap a exportují se dvěma způsoby: jako
jeden soubor, nebo odděleně: mapa jako JSON a každý tileset jako vlastní
obrázek, což je obvykle to, co chce externí engine.
Kolize#
Každá dlaždice nese tvar kolize, nakreslený přímo nad tilesetem, ne deklarovaný v kódu:
| Full | koliduje celá dlaždice |
| None | průchozí |
| Top / Bottom / Left / Right half | částečná kolize |
| Slope up / Slope down | šikmá kolize |
Show Collisions je zobrazí jako překryv a celá sada se exportuje jako JSON. Když se to udělá tady, Engine dostane tilemapu, která už ví, kudy hráč může chodit.
Normálové mapy#
Generate Normal Map ji odvodí ze spritu, se zadanou strength;
Normal Map Editor pak umožní ručně vymalovat směr normály (P), což je
jediný způsob, jak opravit místa, která automatický průchod spletl.
9-slice a pivot#
9-Slice guides vyznačí roztažitelné oblasti UI spritu, a Pivot / Origin nastaví bod, kolem kterého se sprite otáčí a kotví. Oboje cestuje se spritem do Engine.
Symetrie#
Mirror X a Mirror Y malují obě strany najednou: vodorovně, svisle, obojí, nebo radiálně.
Barevné řady a palety#
Modální okno Color Ramp sestaví řadu pořádně, ne od oka, a palety se
importují z .gpl (formát palet GIMPu, ve kterém se dodává většina palet
pro pixel art).
Export#
| Formát | Pro |
|---|---|
| PNG | jeden snímek |
| GIF | animace, všude |
| APNG | animace, se skutečnou alfou |
| Aseprite | zpátky do Aseprite, s neporušenými vrstvami |
| Atlas / sprite sheet | herní engine |
.tilemap | mapa, dohromady nebo rozdělená na JSON + obrázky |
Soubory, které čte a zapisuje#
| Nativní formát | .editor |
| Importy | .png, .jpg, .aseprite, .tilemap, .gpl (palety) |
| Exporty | .png, .gif, APNG, .aseprite, atlas spritů, .tilemap (dohromady nebo rozdělené), JSON kolizí |
Předávání práce jiným studiím#
Produkuje pixel art. Přijímá pixel art a obrázky.
Pixel art přijímají Inkwell, Composer, Animator, Matter a Engine: sprite sheet se může dostat rovnou do hry bez zacházky přes soubor.
Práce s dalšími lidmi#
Pixel Editor synchronizuje operaci po operaci: data scény, assety, animace a skripty.
Omezení a časté zádrhely#
- Přiblížení není rozlišení. Status bar ukazuje skutečnou velikost plátna; Preview ho ukazuje v měřítku 1:1.
- Měkký štětec není pixelový štětec. Krytí pod 100 % vyhladí hrany antialiasingem, a to obvykle na spritu nechcete.
- Délka trvání je na jeden snímek, ne na celou animaci. Cyklus o 12 snímcích po 100 ms běží na ~10 fps, ať dělají ostatní cokoli.