Předvánoční slevová akce PHP týden
Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter
Využij předvánočních slev a získej od nás 20 % bodů navíc zdarma! Zároveň také probíhá PHP týden se slevou na e-learning až 80 %

Lekce 3 - Objekty, pozadí a další prvky v Pixel artu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u další lekce na téma Pixel art. V minulé lekci, Tvoříme vlastní Pixel art, jsme si vytvořili první z našich vlastních Pixel artů. Dnes se blíže podíváme na objekty a pozadí.

PIXEL ART - Objekty, pozadí a další

Komplexní grafika hry se skládá z množství kategorií a složek. Aby byl vizuál jednotný, je třeba řešit nejen grafiku hlavního hrdiny, ale i celé hry. Kromě vizuálu hráče jsou důležité takzvané itemy (ať nemanipuluje postavička s předměty z jiného světa), pozadí, nepřátelé a samozřejmě interface, přes který se hra ovládá. Čili buttony, okna, menu a písmo.

Objekty

Typické pro pixel artové hry je porušování proporcí objektů postavy hráče. Je to logické, protože při nízkém rozlišení postavy by item, jako např. náhrdelník, nebyl vůbec realizovatelný tak, aby se dal dešifrovat. Proporce se naopak převracejí - to, co je nejdůležitější, je největší - opravdový bad ass boss celé hry je několikanásobně větší než hrdina a super silné zbraně také.

Náhrdelník

Postup při tvorbě je klasický. Linií si nakreslíme osu řemínku a naznačíme medailon. Následně doplníme plochu a vykreslujeme objem pomocí světla a stínu. Strukturu řetízku jsem si zvolili pomocí střídání světlých a tmavých ploch.

Meč

Bedna

Obdobně jako v případě náhrdelníku si nejprve vytvoříme celkový tvar objektu. Následně linie, které definují barevné hranice a finišujeme pomocí detailů a nahozením objemu objektu.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Snažím se většinu Spritů vykreslovat tak, aby měly dojem objemu. Na to mi slouží světlo a stín. Samozřejmě chce to trochu cviku a představivosti. Já umisťuji světlo vždy doleva a nahoru. Samozřejmě nezobrazuji konkrétně jeho zdroj, ale dělám to tak, že všechny plochy a linie objektů, které jsou na levé horní straně, zesvětlím. Ty protější - vpravo dole, naopak ztmavím. Dosáhnu tak iluze, že tvar vystupuje směrem k nám. Takové zesvětlení a ztmavení je možné dělat přidáváním bílé do světla nebo modré do stínu nebo prostě ve škále původní barvy postupuji směrem k jednotlivým odstínům.

Vidíš mě?

Nakolik je pixel art přece jen zjednodušením tvaru, je třeba předem si definovat jednotlivé viditelnosti prvků hry. To vzadu, působící jako doplněk, bude jednobarevné. To, co má ve hře svou důležitou roli, bude naopak kontrastní - barevně oproti pozadí křičící a když se podaří, tak i obrysové. Není nad hru, která v sobě ukrývá user-friendly pomůcku a pomáhá tak plně se soustředit na hraní a ne na výkladový slovník v jedné ruce.

Pozadí

Abychom se vyhnuli nedorozumění, je důležité ujasnit si, co je ve hře pozadí. Je to prostě plátno, podklad, na kterém se odehrává hra - background. V původních RPG pixel artových hrách byla pozadím vlastně podlaha složená z dlaždic. V tomto případě jsou dlaždice vlastně prvky scény, které mají vlastní obrázky, ale jejich účel je statičnost. Například stromy, dlaždice země nebe různé povrchy, jako je tráva, hlína a kameny. Pokud měly mít objekty pozadí určitou kolizní vlastnost, přidávali se do scény osobité kolizní objekty. Podle potřeby a stylu se pozadí dělila na kompletní mapy, ve kterých se pohled přesouval zároveň s hráčem, nebo se přepínal po přiblížení hráče k jedné ze čtyř hranic obrazovky.

Kromě RPG se pozadí v platformovkách a adventurách chovají jako pozadí směrem k horizontu. Čili obsahují stromy, ploty, hory a oblohu. V Akčním platformním stylu hry se připravuje pozadí z více částí. Takové rozdělení pozadí na vrstvy dává programátorům možnost simulace prostoru. Dělá se to tak, že vrstvy, které jsou nejblíže, se pohybují rychleji než ty, co jsou dál. Samozřejmostí je zvětšení postavičky hráče, což dodává scéně prostor a perspektivu.

Rámy a lišty ve hře

Osobně nejsem zastáncem komplikované grafiky. Vadí mi ornamenty na strukturovaném pozadí. Trhám se při nervózních dotecích kontrastních ploch a s ohledem na zákony typografie přistupuji k písmu citlivě ;). Právě proto nejsem zastánce toho, aby byl grafický interface hry příliš komplikovaný. Představte si pixel artové pozadí hry plné objektů, v něm lištu GUI a na ní písmo. Všechno je to super, ale při menším rozlišení to může zmást. Logicky při plošném pixel artu oko nemá možnost odlišit hloubku a proto stejně přijímá všechny části obrazu. Někdy však příliš velká pozornost věnována rámu odpoutává od hry. Osobně proto raději volím jednoduchá okna.

Samozřejmě to, co je třeba na obrazovce zobrazit, vychází ze žánru hry. Jiné prvky je třeba zobrazit při FPS a jiné při strategiích. Kromě toho při hře na PC se počítá s ovládáním pomocí kláves, ale pokud chcete hru migrovat na dotykové obrazovky, musíte buttony vytáhnout na světlo světa a rozumně do hraní zakomponovat.

Buttons a text

Tlačítka přímo vycházejí z barev GUI. Měly by korespondovat s hrou a hlavně by neměly působit plošně, aby bylo jasné, že je možné na ně kliknout. Čili to samé jako objekty - světlo a stín. Nejdůležitější je písmo. Pokud nevíme text, dešifrovat ho nemá v podstatě smysl. Čili jasně oddělit od struktur a nastavit optimální šířku tahu písma. V pixel artových hrách volíme hlavně bold řez, aby se v rozmanitosti barev rychle četlo.

Vhodná mohou být například písma DPComic, Joystix, Manaspace, bulk Pixels, Coolville, Tiny a další.

Veškerá kreativní práce v sobě ukrývá metodu pokus-omyl a proto se i grafika často optimalizuje, mění a ladí. Nebuďte proto konzervativní a směle experimentujte. Jedinou podmínkou je jen příbuzný vizuální styl, který pak ve výsledku působí klidněji a jasněji ve způsobu vnímání . Někdy je vhodné, aby se při textech používaly ozdobné prvky v kombinaci s bezpatkovým písmem (san_serifmy) a někdy krásně působí kombinace 3D hry a ilustrovaného 2D menu. Čili směle. Možná jste to právě vy, kdo přijde s něčím revolučním a určí standard na další roky dopředu ;).

To je pro dnešní lekci vše. V lekcí příští, Animujeme v Pixel artu, se budeme blíže zabývat animací.


 

 

Článek pro vás napsal chain
Avatar
Jak se ti líbí článek?
1 hlasů
Venuje sa grafike, objektovemu programovaniu, vyuke a osobnemu rozvoju
Předchozí článek
Tvoříme vlastní Pixel art
Všechny články v sekci
Pixel art
Miniatura
Následující článek
Animujeme v Pixel artu
Aktivity (7)

 

 

Komentáře

Avatar
David Rohusch:20. listopadu 18:31

To mě nikdy nenapadlo si jednoduchým tvarem předpřipravit "proporce" daného pixel-artu. Určitě vyzkouším, snad už konečně udělám něco "koukatelnýho" :D

 
Odpovědět
20. listopadu 18:31
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:20. listopadu 18:33

Fakt krásný sprity :)

Odpovědět
20. listopadu 18:33
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.