IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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číname s grafikou

Doteraz sme programy vytvárali len s využitím predmetov a sprajt. Teraz sa zoznámime s ešte zaujímavejšie oblastí - s grafikou.

Grafika prináša neobmedzené možnosti tam, kde už predmetová animácie nestačí. Umožní nám kreslenie grafických prvkov ako sú body, čiary, kružnice, ale predovšetkým vykresľovanie obrázkov. Pomocou obrázkov môžeme zobrazovať fotografie, pohybovať objekty, písať texty či kresliť tlačidla špeciálnych ovládacích prvkov.

To, čo pre prácu s grafikou potrebujeme poznať najskôr, je kam a ako prebieha vykresľovanie grafiky. Pozrite sa na nasledujúci obrázok.

2D grafika

Na obrázku vidíte znázornené zobrazovacie vrstvy okna programu v Petrovi. Základom je vrstva predmetov. S tou ste sa už stretli v predošlých lekciách. Je to vrstva, kam pokladáme predmety. Nazývame ju hlavný plochou programu. Na rozdiel od predmetov, u sprajt môžeme určovať ich "nadmorskú výšku". Nad vrstvou predmetov sa pohybujú sprajt s kladnou výškovou hladinou. Medzi ne patrí Petřík a Lucka, kým ich výškovú hladinu nezmeníme. Pod vrstvou predmetov sa pohybujú sprajt so zápornou hladinou. Úplne najnižšie vrstvou je grafická vrstva. Do nej prebieha všetky kreslenie grafických prvkov.

Vrstvy si môžete predstaviť ako more. Vrstva predmetov je hladinou mora. Po hladine sa pohybujú lode (sprajt s výškou 0), nad nimi lietajú vtáky (sprajt s kladnou výškou, napríklad 100). Pod hladinou sa pohybujú ryby (sprajt so zápornou výškou, napríklad -100). Úplne dole je dno mora - grafická vrstva na kreslenie.

Pri pohľade na okno programu sa pozeráme na pomyselnej more zhora. Bežne vidíme predmety na ploche a sprajt pohybujúce sa nad predmety (Petřík, Lucka), ale nevidíme sprajt so zápornou výškovú hladinou a nevidíme ani grafickú vrstvu. Pre ich zviditeľnenie musíme predmety spriehľadniť. Ako, to si ukážeme ďalej.

Pre demonštráciu práce s vrstvami si vytvoríme malý ukážkový programík. Nazvite ho treba Vrstvy. Grafiku si síce môžete pripraviť sami, ale ak sa vám nechce, v závere kapitoly sú k stiahnutiu potrebné grafické prvky. Budeme potrebovať: sprajt ryby, sprajt loďky a sprajt UFO. K tomu ešte obrázok chobotnice. No a nakoniec - predmet s vodnou hladinou.

Sprajt upravte v nastavení tak, aby ryba mala počet fáz na krok 4, výškovú hladinu -100, loďka počet fáz na krok 8, výškovú hladinu 0 a UFO počet fáz na krok 16 a výškovú hladinu 100. UFO sa teda bude pohybovať najpomalšie a v najvyššej výške, loďka bude najpomalší a v strednej výške (na hladine mora), ryba bude najnižšie, pod morskou hladinou.

Pokiaľ si budete sami vytvárať vodnú hladinu, môžete ju vytvoriť pomocou spreja a rôznych odtieňov farieb. Časť bodov vyplňte priehľadnou farbou - to je šedivo fialová farba úplne vľavo hore. Táto farba zaistí spriehľadnenie predmetu a tým zviditeľnenie grafických prvkov ležiacich "pod hladinou mora". Takto upravená môžete buď pôvodný predmet prázdne políčko alebo použiť iný predmet, v tom prípade ním musíte vyplniť plochu okna.

Po príprave grafických prvkov by mohlo vaše polia Spoločných premenných a funkcií vyzerať nejako takto:

2D grafika

Začneme inicializáciou. Sprajt Petríka nebudeme potrebovať, môžete ho preto vypnúť nastavením viditeľnosti na ne. Takto budeme začínať iu väčšiny nasledujúcich programov, pretože Petríka využívame skôr len u poličkový grafiky. Ďalším príkazom zaistíme vykreslenie obrázka chobotnice na súradniciach X = 5 a Y = 4. Príkaz nájdete v skupine grafika - kreslenie. Referenčný bod obrázkov je ich ľavý dolný roh.

2D grafika

Ďalej je potrebné nastaviť predvolený súradnice sprajt. Sprajt majú štandardne vypnutú viditeľnosť, preto je potrebné ich zviditeľniť zapnutím viditeľnosti. Nastavíme je približne do stredu okna programu (pred zapnutím viditeľnosti, inak by sa tam presúvali pomaly).

2D grafika

Budeme pokračovať hlavné slučkou programu. Použite cyklus Podmienené opakovanie príkazov. Do podmienky uveďte test, či nie je stlačený kláves Esc. Slučka sa teda bude opakovať tak dlho, kým používateľ nestlačí kláves Esc, tým sa program ukončí. Všetko, čo slučka robí, je opakované nastavovanie súradníc sprajt podľa aktuálnej súradnice kurzora myši. Sprajt teda sledujú kurzor myši. Rozdiel medzi obsluhou jednotlivých sprajt je len v tom, že sprajt majú rôzne rozmery. Vzhľadom k tomu, že chceme nastavovať stred sprajt, musíme pripísať rôznu korekciu, ktorá zodpovedá polovici rozmeru sprajt. Na záver slučky uveďte príkaz pre čakania (nemá zmysel, aby slučka bežala plnou rýchlosťou).

2D grafika

Program môžete vyskúšať. Mali by ste vidieť podobný výjav:

2D grafika

Ako si môžete všimnúť, chobotnice aj ryba presvitajú cez hladinu vody, sú akoby pod ňou, zatiaľ čo UFO sa prekresľuje cez všetko ostatné, je na najvyššej úrovni.

Na záver sa ešte Pozastavme bližšie pri sprajt. Ako sme si už povedali, sprajt sú pohyblivé grafické objekty. Jednotlivým obrázkom jednej animácie hovoríme fázy animácie. Sprajt môže mať jednak animácie v kľudovom stave (fáza pre pokoj) a jednak animácie pri pohybe (fáza pre pohyb). Sprajt môže mať ľubovoľný počet smerov. Systém sám volí najbližší smer podľa toho, ktorým smerom sa sprajt pohybuje. Smer je možné meniť i programovo (iste si spomínate na príkazy pre otáčanie Petríka), smer sa zadáva v radiánoch (360 ° = 2 * pi = asi 6.28).

Ako ste si mohli všimnúť aj v našom príklade, sprajt môžeme ručne maľovať, ale vzhľad takých sprajt zvyčajne nestojí za moc. Oveľa lepšie výsledky dosiahneme, ak sprajt generujeme napríklad pomocou renderovacích 3D nástrojov. Vynikajúce výsledky možno dosiahnuť vykresľovacom programom POV-Ray, založenom na ray-tracing metóde (teda sledovanie lúča pohľadu).

Veľkou prednosťou programu POV-Ray je možnosť renderovanie z príkazového riadku. To umožňuje plnú automatizáciu procesu renderovanie. Najskôr napr. S pomocou programu Moray pripravíme objekty k renderovanie. Moray je vizuálny grafické rozhranie slúžiace na ovládanie programu POV-Ray. S jeho pomocou ľahko vizuálne pripravíme renderovanou scénu. Potom pripravíme definičné súbory riadiaci proces renderovanie - v nich môžeme určovať smer otočenie objektu, fáza jeho animácie či farbu povrchu.

Po spustení procesu renderovanie vygeneruje program POV-Ray rad obrázkov, ktoré tvoria jednotlivé snímky sprajt. V záverečnej fáze použijeme program Pov2Spr (ktorý je súčasťou distribúcie Petra alebo stiahnutie v archíve pod článkom spolu s mnohými pripravenými príkladmi sprajt) k ich konverziu na sprajt.

2D grafika

 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 285x (1.69 MB)
Aplikácia je vrátane zdrojových kódov v jazyku Petr Lite (sú obsiahnuté v EXE súbore, ktorý možno v programe priamo otvoriť)

 

Všetky články v sekcii
2D grafika
Článok pre vás napísal Panda38
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Programátor C++, WinAPI, ASM.
Aktivity