Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Začínáme s grafikou

Dosud jsme programy vytvářeli pouze s využitím předmětů a sprajtů. Nyní se seznámíme s ještě zajímavější oblastí - s grafikou.

Grafika přináší neomezené možnosti tam, kde již předmětová animace nestačí. Umožní nám kreslení grafických prvků jako jsou body, čáry, kružnice, ale především vykreslování obrázků. Pomocí obrázků můžeme zobrazovat fotografie, pohybovat objekty, psát texty či kreslit tlačítka speciálních ovládacích prvků.

To, co pro práci s grafikou potřebujeme znát nejdříve, je kam a jak probíhá vykreslování grafiky. Podívejte se na následující obrázek.

Na obrázku vidíte znázorněné zobrazovací vrstvy okna programu v Petrovi. Základem je vrstva předmětů. S tou jste se již setkali v předešlých lekcích. Je to vrstva, kam pokládáme předměty. Nazýváme ji hlavní plochou programu. Na rozdíl od předmětů, u sprajtů můžeme určovat jejich "nadmořskou výšku". Nad vrstvou předmětů se pohybují sprajty s kladnou výškovou hladinou. Mezi ně patří Petřík a Lucka, dokud jejich výškovou hladinu nezměníme. Pod vrstvou předmětů se pohybují sprajty se zápornou hladinou. Úplně nejnižší vrstvou je grafická vrstva. Do ní probíhá veškeré kreslení grafických prvků.

Vrstvy si můžete představit jako moře. Vrstva předmětů je hladinou moře. Po hladině se pohybují lodě (sprajty s výškou 0), nad nimi létají ptáci (sprajty s kladnou výškou, například 100). Pod hladinou se pohybují ryby (sprajty se zápornou výškou, například -100). Úplně dole je dno moře - grafická vrstva ke kreslení.

Při pohledu na okno programu se díváme na pomyslné moře shora. Běžně vidíme předměty na ploše a sprajty pohybující se nad předměty (Petřík, Lucka), ale nevidíme sprajty se zápornou výškovou hladinou a nevidíme ani grafickou vrstvu. Pro jejich zviditelnění musíme předměty zprůhlednit. Jak, to si ukážeme dále.

Pro demonstraci práce s vrstvami si vytvoříme malý ukázkový prográmek. Nazvěte ho třeba Vrstvy. Grafiku si sice můžete připravit sami, ale pokud se vám nechce, v závěru kapitoly jsou ke stažení potřebné grafické prvky. Budeme potřebovat: sprajt ryby, sprajt loďky a sprajt UFO. K tomu ještě obrázek chobotnice. No a nakonec - předmět s vodní hladinou.

Sprajty upravte v nastavení tak, aby ryba měla počet fází na krok 4, výškovou hladinu -100, loďka počet fází na krok 8, výškovou hladinu 0 a UFO počet fází na krok 16 a výškovou hladinu 100. UFO se tedy bude pohybovat nejpomaleji a v nejvyšší výšce, loďka bude nejpomalejší a ve střední výšce (na hladině moře), ryba bude nejníže, pod mořskou hladinou.

Pokud si budete sami vytvářet vodní hladinu, můžete ji vytvořit pomocí spreje a různých odstínů barev. Část bodů vyplňte průhlednou barvou - to je šedivě fialová barva úplně vlevo nahoře. Tato barva zajistí zprůhlednění předmětu a tím zviditelnění grafických prvků ležících "pod hladinou moře". Takto upravit můžete buď původní předmět prázdné políčko nebo použít jiný předmět, v tom případě jím musíte vyplnit plochu okna.

Po přípravě grafických prvků by mohlo vaše pole Společných proměnných a funkcí vypadat nějak takto:

Začneme inicializací. Sprajt Petříka nebudeme potřebovat, můžete ho proto vypnout nastavením viditelnosti na ne. Takto budeme začínat i u většiny následujících programů, protože Petříka využíváme spíš jen u políčkové grafiky. Dalším příkazem zajistíme vykreslení obrázku chobotnice na souřadnicích X=5 a Y=4. Příkaz naleznete ve skupině grafika - kreslení. Vztažným bodem obrázků je jejich levý dolní roh.

Dále je potřeba nastavit výchozí souřadnice sprajtů. Sprajty mají standardně vypnutou viditelnost, proto je potřeba je zviditelnit zapnutím viditelnosti. Nastavíme je přibližně do středu okna programu (před zapnutím viditelnosti, jinak by se tam přesouvaly pomalu).

Budeme pokračovat hlavní smyčkou programu. Použijte cyklus Podmíněné opakování příkazů. Do podmínky uveďte test, zda není stisknuta klávesa Esc. Smyčka se tedy bude opakovat tak dlouho, dokud uživatel nestiskne klávesu Esc, tím se program ukončí. Vše, co smyčka dělá, je opakované nastavování souřadnic sprajtů podle aktuální souřadnice kurzoru myši. Sprajty tedy sledují kurzor myši. Rozdíl mezi obsluhou jednotlivých sprajtů je pouze v tom, že sprajty mají různé rozměry. Vzhledem k tomu, že chceme nastavovat střed sprajtů, musíme přičítat různou korekci, která odpovídá polovině rozměru sprajtu. Na závěr smyčky uveďte příkaz pro čekání (nemá smysl, aby smyčka běžela plnou rychlostí).

Program můžete vyzkoušet. Měli byste vidět podobný výjev:

Jak si můžete všimnout, chobotnice i ryba prosvítají přes hladinu vody, jsou jakoby pod ní, zatímco UFO se překresluje přes všechno ostatní, je na nejvyšší úrovni.

Na závěr se ještě pozastavme blíže u sprajtů. Jak jsme si již řekli, sprajty jsou pohyblivé grafické objekty. Jednotlivým obrázkům jedné animace říkáme fáze animace. Sprajt může mít jednak animace v klidovém stavu (fáze pro klid) a jednak animace při pohybu (fáze pro pohyb). Sprajt může mít libovolný počet směrů. Systém sám volí nejbližší směr podle toho, kterým směrem se sprajt pohybuje. Směr lze měnit i programově (jistě si vzpomínáte na příkazy pro otáčení Petříka), směr se zadává v radiánech (360° = 2*pi = asi 6.28).

Jak jste si mohli všimnout i v našem příkladu, sprajty můžeme ručně malovat, ale vzhled takových sprajtů obvykle nestojí za moc. Mnohem lepších výsledků dosáhneme, pokud sprajty generujeme například pomocí renderovacích 3D nástrojů. Vynikajících výsledků lze dosáhnout renderovacím programem POV-Ray, založeném na ray-tracing metodě (tedy sledování paprsku pohledu).

Velkou předností programu POV-Ray je možnost renderování z příkazového řádku. To umožňuje plnou automatizaci procesu renderování. Nejdříve např. s pomocí programu Moray připravíme objekty k renderování. Moray je vizuální grafické rozhraní sloužící k ovládání programu POV-Ray. S jeho pomocí snadno vizuálně připravíme renderovanou scénu. Poté připravíme definiční soubory řídící proces renderování - v nich můžeme určovat směr otočení objektu, fáze jeho animace či barvu povrchu.

Po spuštění procesu renderování vygeneruje program POV-Ray řadu obrázků, které tvoří jednotlivé snímky sprajtu. V závěrečné fázi použijeme program Pov2Spr (který je součástí distribuce Petra nebo ke stažení v archivu pod článkem spolu s mnoha připravenými příklady sprajtů) k jejich konverzi na sprajt.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 285x (1.69 MB)
Aplikace je včetně zdrojových kódů v jazyce Petr Lite (jsou obsaženy v EXE souboru, který lze v programu přímo otevřít)

 

Všechny články v sekci
2D grafika
Článek pro vás napsal Panda38
Avatar
Uživatelské hodnocení:
4 hlasů
Programátor C++, WinAPI, ASM.
Aktivity