Hlavní navigace

Pixel art aneb umění práce s body

Pavel Tišnovský 13. 11. 2007

Pixel art je druh tvorby grafiky na počítači s ohledem na použitou technologii zobrazování, která je založena na vykreslování pixelů tvořících pravidelné rastrové mřížky. Anglický název tohoto způsobu tvorby grafiky, který v současnosti zažívá comeback, je přiléhavý, protože se opravdu jedná o druh umění.

Obsah

1. Význam termínu „pixel art“
2. Aplikace pixel artu
3. Historie pixel artu
4. Současnost a budoucnost
5. Izometrický pixel art
6. Nároky na programové vybavení
7. Odkazy na další informační zdroje
8. Co si řekneme příště?

1. Význam termínu „pixel art“

Pixel art, otrocky a poněkud nevhodně přeloženo do češtiny jako pixelové umění, je zvláštní druh tvorby grafiky na počítači s ohledem na technologii zobrazování. Ta je v současné době založena především na vykreslování obrazů vytvořených v pravidelné rastrové mřížce (bitmapě či pixmapě) obsahující jednotlivé obrazové body nazývané dnes již mezinárodním slovem pixely. Na tom, že se grafika vytváří bitmapově, není na první pohled nic zvláštního. Na tomto principu ostatně pracuje nepřeberné množství grafických editorů, od na první pohled primitivního PaintBrushe firmy Microsoft nebo rastrový editor GrafX přes poloprofesionální editory typu PaintShop Pro až po „těžkotonážní“ grafické aplikace, mezi něž patří GIMP, Adobe Photoshop či Corel PhotoPaint.

pixelart1
Logo jednoho ze známých autorů (použito je pouze 16 barev)

Pixel art je charakteristický především v tom, že jeho autor vytváří grafiku velmi precizně, většinou na úrovni jednotlivých pixelů – nejčastěji v několikanásobném, typicky čtyřnásobném či osminásobném zvětšení (po zapracování každý autor preferuje jiné zvětšení, hodnota 8 je však velmi často používána). Teoreticky pro vytváření pixel artu postačuje jakýkoli rastrový grafický editor umožňující obarvit jednotlivé pixely (většinou se jedná o nástroj nazvaný tužka, anglicky pen) při zvětšení. Samozřejmě je však možné využít i další kreslicí a editační nástroje, které grafické editory nabízí, například vodítka, psaní textu a především práci s vrstvami (layers) a cestami (paths). Stručně řečeno: pixel art není vůbec náročný, co se týká používaných aplikací, vyžaduje však představivost (zejména prostorovou) a především dostatek času. Například tvorba kvalitní ikony nebo malého spritu do hry může zabrat až několik hodin času.

Anglický název tohoto způsobu tvorby grafiky je velmi přiléhavý, protože se opravdu jedná o druh umění, při kterém jsou autoři limitováni technologií zobrazení na displejích, zejména velikostí obrazových bodů, rozlišením a celkovým počtem zobrazitelných barev. Skoro by se dalo říci, že prakticky jakýkoli druh umění spočívá ve využití omezených prostředků, ať už materiálu (těžce opracovatelný kámen), nástrojů (dláta, štětce, konkrétní hudební nástroj) či dalších prostředků (volba jedné tónové stupnice). Lidé, kteří v pixel artu dosáhli dokonalosti, se mohou těšit i celosvětové popularitě, nehledě na lukrativní pracovní nabídky, například od výrobců her pro mobilní telefony.

pixelart2
Pixel artová grafika na počítačích Atari ST a Amiga (po zvětšení je viditelný ruční dithering, celkem bylo použito 27 barev)

2. Aplikace pixel artu

Pixel art je i v současnosti ve velké míře aplikován v praxi, zejména ve spojení s osobními počítači a dalšími digitálními zařízeními (PDA, „chytré“ mobilní telefony, digitální fotoaparáty). V průběhu cca tří desítek let existence pixel artu vykrystalizovalo několik typických oblastí, ve kterých je používán. V několika posledních rocích zažil pixel art, resp. celá oblast plošné ručně kreslené bitmapové grafiky, poměrně razantní comeback, zejména na zařízeních s malými displeji. Ale i na osobních počítačích se opět začínají těšit stále větší popularitě klasické „2D hry“, zejména různé plošinovky. V dalších odstavcích si stručně popíšeme dnešní nejčastější použití pixel artu.

pixelart3
Černobílá hra Amaouroute pro osmibitové počítače vynikala precizním zpracováním 2,5D grafiky (izometrický pohled, 2 barvy monochromaticky, rozlišení 320×192 pixelů)

Pravděpodobně nejviditelnějším použitím pixel artu v praxi jsou ikony, ať již se jedná o ikony používané v grafických uživatelských rozhraních operačních systémů na osobních počítačích nebo o ikony použité na mnohem menších zařízeních, například na PDA, mobilních telefonech atd. Tvorba ikon je poměrně složitá, protože se nejedná pouze o navržení vhodného obrázku pro jednu ikonu, ale většinou i o tvorbu ucelené množiny ikon (v tomto ohledu se tvorba ikon do jisté míry podobá návrhu fontů či logotypů). Příkladem může být například kolekce ikon „Crystal“ určená primárně pro prostředí KDE, která je však použitelná i v dalších aplikacích, včetně webových stránek.

Pixel art je často používán i při tvorbě webové grafiky, především při vytváření animovaných GIFů. Zde je zapotřebí správně vytvořit jak samotný obrázek (většinou s omezeným rozlišením a také omezeným celkovým počtem barev), tak i animaci, přičemž se většinou požaduje co nejmenší velikost jednotlivých snímků (framů). Vytváření optimalizovaných animovaných GIFů tak od jejich tvůrců vyžaduje nejen grafické schopnosti, ale i technické znalosti ohledně způsobu zápisu snímků v GIFech. Animované GIFy jsou sice částečně nahrazovány animacemi tvořenými ve Flashi, stále však mají své použití.

pixelart4
Další snímek ze hry Amaouroute – stínování všech objektů je řešeno pomocí ditheringu (2 barvy monochromaticky)

Techniky pixel artu se velmi často používají při vytváření takzvaných spritů. Termínem „sprite“ jsou pojmenovávány poměrně malé rastrové obrázky, které se na obrazovce (displeji) pohybují po vykreslované scéně, většinou nezávisle na ostatních vykreslovaných objektech. Ve větší míře se sprity začaly používat na herních automatech a osmibitových domácích počítačích na přelomu sedmdesátých a osmdesátých let minulého století. Většinou se jednalo o využití v počítačových hrách, jeden sprite však mohl být použit i jako kurzor myši, joysticku či jiného polohovacího zařízení (oblíbené bývalo světelné pero a analogové ovladače typu „paddle“, které byly vytvořeny z dvojice potenciometrů).

Mezi osmibitové domácí počítače, které umožňovaly hardwarově urychlované vykreslování spritů, patří především počítače Atari řady 600/800/130XL (XE) a Commodore C64 a C128; mezi vyspělejší systémy podporující sprity patří především slavná Amiga. Tvorba spritové grafiky se v mnohém podobá tvorbě grafiky webové, zejména svým důrazem na co největší úsporu barev (omezení zejména na osmibitových počítačích), ale také na hladkém navázání pohybujícího se spritu na jeho pozadí. V současnosti jsou sprity používány především v počítačových hrách (plošinovky, strategie, izometrické hry); typickou dnešní platformou s podporou spritů je NES a SNES.

pixelart5
Další snímek ze hry Amaouroute (zdroj – emulátor počítače Atari 800XL)

3. Historie pixel artu

Rozmach pixel artu souvisí s větším uplatněním rastrové grafiky u počítačů. Zatímco v současnosti jsou prakticky všechny zobrazovací technologie založeny na rastrových mřížkách (bitmapách), v minulosti tomu tak vždy nebylo, protože se po dlouhou dobu používaly vektorové displeje, které tvoří pravděpodobně již nadobro uzavřenou kapitolu v oblasti generování a zobrazování počítačové grafiky, což je trošku škoda, protože měly své kouzlo, které je na dnešním rastrovém displeji jen těžko napodobitelné (snad proto se některé dochované modely vektorových displejů stávají oblíbeným „úlovkem“ sběratelů starších technologií).

Volba vektorových displejů v minulosti byla logická, protože se navázalo na principy zobrazování používané u analogových počítačů, což byla zařízení složená ze (zjednodušeně řečeno), integračních, derivačních a lineárních členů. Na vstupu analogového počítače byly přivedeny různě tvarované elektrické signály (periodické i neperiodické) a na jejich výstup byl většinou zapojen osciloskop, u nějž byla buď jedna nebo obě dvojice vychylovacích destiček řízena „programem“ v analogovém počítači. Samotný „program“ byl tvořen chuchvalcem drátů, kterými se propojovaly jednotlivé moduly počítače. S přechodem na digitální počítače byla patrná snaha o zachování alespoň stejné formy výstupu, jaký měly počítače analogové.

pixelart6
Herní konzole Vectrex

Vektorové displeje byly použity u některých prvních videoher i u slavné herní konzole Vectrex, pro kterou bylo vyvinuto několik desítek komerčních her a doposud pro ni několik desítek nadšenců vytváří nové a nové programy. Avšak s nástupem modernějších videoher a především domácích osmibitových počítačů je jasně patrný odklon od vektorového zobrazování směrem k zobrazování založenému na bitmapách a televizních obrazovkách. Vzhledem k tomu, že grafické prostředky těchto osmibitových domácích počítačů byly na dnešní poměry velice skrovné (velikost obrazové paměti průměrně dosahovala hodnot okolo 8 kB), museli se tomu přizpůsobit i tvůrci grafiky (dříve samotní programátoři, později profesionální grafici).

pixelart7
HW podoba konzole Vectrex je i díky použití vektorového displeje velmi jednoduchá (uprostřed je vidět CPU Motorola 6809)

Že se nejedná o jednoduchý úkol, je patrné i ze zlepšujícího se vizuálního dojmu z her určených právě pro tyto typy počítačů. Morální životnost osmibitových strojů či herních konzol – a tím i rozmezí vzniku největšího množství komerčních programů – byla cca 5 let. První hry byly většinou po technické i grafické stránce velmi jednoduché, většinou se jednalo o méně dokonalé kopie úspěšných videoher. Ovšem po pěti letech již programátoři i grafici dokázali z „osmibiťáků“ dostat takřka maximum, což je patrné jak ze zvyšující se technické kvality her, tak i z grafiky, pro jejíž tvorbu se mnohdy užívaly různé triky, které se daly provádět s tehdejšími grafickými čipy (zvyšování počtu barev v horizontálním přerušení, nestandardní grafické režimy, zobrazení více spritů, než bylo oficiálně možné, opět pomocí horizontálního přerušení, overscan režimy, atd.).

Největší pokrok je však patrný ve vlastní tvorbě grafiky, která v té době téměř výhradně přešla do rukou specialistů. A právě tehdy (ve zhruba stejné době i u videoher či nastupujících šestnáctibitových počítačů) se začíná ve větší míře mluvit o pixel artu. S nástupem demoscény (zejména na počítačích Commodore C64) se tvoří i skupina nezávislých grafiků, která má na demopárty vlastní samostatně hodnocené kategorie. Většina těchto grafiků později přechází na šestnáctibitové počítače, především na Atari ST a Amigu (počítače PC té doby mají velmi primitivní grafické karty CGA a Hercules, z nichž zejména CGA má dokonce menší možnosti než grafické čipy většiny úspěšných osmibitových počítačů). Větší rozmach pixel artu na PC nastal až s příchodem karty EGA a především pak VGA, která sice stále nedosahovala grafických čipů používaných v Amigách, ale pro potřeby pixel artu již nabízela dostatečnou funkcionalitu, tj. dostatečné rozlišení, větší barevnou paletu a rozšířený maximálně zobrazitelný počet barev.

pixelart8
Pozadí hry Draconus má pouze tři odstíny jedné barvy (zdroj – emulátor počítače Atari 800XL)

4. Současnost a budoucnost

V současnosti se pixel art uplatňuje v mnoha oblastech. Jednou z těchto oblastí je tvorba ikon pro operační systémy i aplikační programy. Jedná se o oblast, ve které se (spolu se zvýšením rozlišení displejů) sice částečně přechází na vektorový popis ikon, ale rastrové ikony jsou i dnes hojně používané (nehledě na to, že zobrazování vektorových obrázků i fontů není stále dokonalé, právě s ohledem na konečné rozlišení displejů – viz známé rozpory mezi zobrazováním fontů technologií firmy Apple a Microsoft). Dále je pixel art používán při vytváření spritů do různých her, určených jak pro „velké“ počítače, tak i pro chytré mobilní telefony a PDA.

pixelart9
Pomocí ručního ditheringu se podařilo snížit počet barev u tohoto obrázku na pouhých čtrnáct (zdroj – demoscéna počítačů Atari ST)

5. Izometrický pixel art

Pravděpodobně nejčastěji se pixel art používá při ručním kreslení takzvaných izometrických modelů, přesněji řečeno modelů vykreslených v izometrickém promítání. Je zde využito faktu, že úsečky natočené o úhel 30° a 60° tvoří charakteristické pravidelné „schody“, ve kterých se vždy dva pixely nachází na stejné svislici či kolmici a další dva pixely na svislici/kolmici sousední. Výsledkem je hrana, která vypadá pravidelně a přitom má dostatečný kontrast (úsečky s úhlem 45° mají naproti tomu výrazně nižší kontrast, protože se oko nedokáže dobře soustředit na pixely vázané pouze po úhlopříčce). Kombinace kolmých úseček a úseček o úhlu náklonu 30° (popř. 180°-30°) dostačuje pro kreslení trojrozměrných modelů v izometrickém promítání, tj. bez použití perspektivy – původně svislé hrany v modelu jsou po promítnutí opět zobrazeny jako svislice a původní vodorovné hrany jsou promítnuty na úsečky o sklonu 30° a 150°.

pixelart10
Výukový model izometrického promítání – domeček se stínem, 16 barev

Izometrické promítání se často používá v počítačových hrách, protože je velmi jednoduše použitelné a existují algoritmy pro rychlé vykreslování herního světa v tomto promítání (typicky se používá malířův algoritmus spolu s jednoduchými sprity). Ve skutečnosti se (většinou) nejedná o pravou 3D grafiku, proto se pro tento typ zobrazování ujal termín 2,5D grafika. Mezi známé hry, které tento typ zobrazování používají, patří například Head Over Heels, Spindizzy, Populous I a Populous II, Cadaver (mimochodem, snad nejlepší ukázka pixel artu, podobně jako další hry od Bitmap Brothers, například Chaos Engine), Civilization 2, SimCity 2000, Transport Tycoon Deluxe i některé starší hry typu RPG.

pixelart11
Složitější izometrický model vytvořený pomocí základních technik (tužka o síle jednoho pixelu a čára, 10 barev)

6. Nároky na programové vybavení

Již v první kapitole jsme si řekli, že nároky na použitý grafický editor nejsou v případě tvorby pixel artu nijak vysoké. V tom se pixel art liší od jiných příbuzných činností, například webdesignu nebo retuše fotografií (i když mnoho lidí používá například Adobe Photoshop pouze na velmi jednoduché úrovni, ale jde o jejich volbu i peníze). V podstatě postačuje, aby editor disponoval kreslicím nástrojem „tužka“ a existovala u něj možnost rychlého přepínání barev. Pro složitější obrázky je také vhodné, aby editor umožňoval práci s hladinami, ale i bez této funkce se dají vytvořit pěkné obrázky. Mnoho pixelartistů preferuje používaní malých a rychlých grafických editorů (například GrafX, koulourPaint či Malování) oproti těžkopádnému GIMPu nebo PhotoShopu. V následujícím článku si některé vhodné grafické editory velmi stručně popíšeme.

pixelart12
Izometrický model budovy (16 barev)

7. Odkazy na další informační zdroje

Webových stránek, které se zabývají pixel artem, je poměrně velké množství. Většinou se jedná o galerie obrázků, nechybí však ani tutoriály, diskusní fóra, srovnávací články či rozhovory se známými umělci. Z tohoto důvodu není následující přehled adres zdaleka úplný. Mnoho obrázků je chráněno copyrightem, proto jsem je v článku přímo neuvedl, ale na odkazy se © nevztahuje.

  1. http://pixelar­t.unas.cz/index­.php
    Povedené české stránky o pixel artu, návody, články, diskusní fórum aj. Poslední dobou článků (resp. tutoriálů) ubylo, pravděpodobně jde o klasický problém s autory. Ovšem motto celého webu (zobrazené v pravém horním rohu) určitě stojí za přečtení…
  2. http://pixelar­t.wz.cz/
    Další stránky o pixel artu psané v češtině. Nechybí zde diskusní fórum ani články.
  3. http://spiv.cz/
    Galerie mnoha obrázků kreslených různými styly, mj. i klasickým izometrickým pixel artem. Ukázka grafiky použité v několika hrách určených především pro mobilní telefony.
  4. http://www.x-panded.com/pi­xeldam/indexpi­xelmoon.html
    Pixel Moon (moon pixel by pixel) – práce mnoha lidí na projektu „obydlení měsíce“ pomocí izometrického pixel artu. Určitě stojí za vidění (odkaz je uveden vpravo dole).
  5. http://www.pi­xeldam.net/pi­xelmoon.html
    Celý obrázek měsíce z projektu Pixel Moon
  6. http://www.pi­xeljoint.com/
    Další galerie a diskusní fórum o pixelartu, na stránce lze najít odkazy na mnoho dalších informačních zdrojů, některé soutěže v pixel artu apod. Představeny jsou i různé styly pixel artu inspirované „normálními“ malířskými technikami.
  7. http://www.pi­xelfreak.com/
    Obrázky vytvořené v „Malování/Pa­intBrushi“ a několik vektorových animací vytvořených ve Flashi (zde se již samozřejmě o pixel art nejedná).
  8. http://www.19­.5degs.com/ele­ment/832.php
    The complete guide to isometric pixel art – velmi dobrý tutoriál o izometrickém pixel artu (anglicky, s velkým množstvím demonstračních obrázků)

pixelart13
Model z projektu PixelMoon (128 barev)

8. Co si řekneme příště?

Příště si povíme, jaké aplikace je možné použít při tvorbě pixelartu. Uvidíme, že i ty nejjednodušší grafické editory typu GrafX, PaintBrush, kolourPaint či Autodesk Animator jsou pro pixelart použitelné, i když se v některých případech jedná o programy vyžadující spoustu manuální práce. Nicméně velké množství kvalitních pixelartových obrázků vzniklo za pomoci zcela spartánských grafických editorů, které by dnes ani nebyly považovány za plnohodnotné grafické aplikace.

pixelart14
Tento obrázek bohužel prošel několikerou filtrací, což ho znehodnotilo pro další zpracování či uložení ve formě bitmapy s omezenou barvovou paletou.
Našli jste v článku chybu?

16. 11. 2007 18:55

h (neregistrovaný)
PS:
Features
Generally spoken pro motion is a "pixel pusher" that is working like the famous drawing packages Deluxe Paint or Brilliance published in the past for Commodore Amiga systems.
All tools are optimized for image and animation editing at pixel level for graphics with up to 256 palettized colors per frame.

Key features are:
realtime brush display while drawing where a brush can be a graphic part or a shape
lots of realtime drawing tools like line, curve, rectangle, circle, ov…






16. 11. 2007 18:53

h (neregistrovaný)
Děkuj bohu, tohle je reinkarnovaný DeluxePaint V na steroidech.

http://www.cosmigo.com/promotion/?Screenshots

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Lupa.cz: Seznam mění vedení. Pavel Zima v čele končí

Seznam mění vedení. Pavel Zima v čele končí

Root.cz: 250 Mbit/s po telefonní lince, když máte štěstí

250 Mbit/s po telefonní lince, když máte štěstí

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

120na80.cz: Rakovina oka. Jak ji poznáte?

Rakovina oka. Jak ji poznáte?

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Vitalia.cz: Baletky propagují zdravotní superpostel

Baletky propagují zdravotní superpostel

Podnikatel.cz: Babiš: E-shopy z EET možná vyjmeme

Babiš: E-shopy z EET možná vyjmeme

DigiZone.cz: Sony KD-55XD8005 s Android 6.0

Sony KD-55XD8005 s Android 6.0

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

DigiZone.cz: Flix TV má set-top box s HEVC

Flix TV má set-top box s HEVC

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Podnikatel.cz: Chtějte údaje k dani z nemovitostí do mailu

Chtějte údaje k dani z nemovitostí do mailu

Root.cz: Certifikáty zadarmo jsou horší než za peníze?

Certifikáty zadarmo jsou horší než za peníze?

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte