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í.

Kreslíme mišmaš

Nepáči Ak sa vám slovo "mišmaš" v nadpise lekcie, dosaďte si trebárs "spleť". V slovníku ho možno nenájdete, ale zrejme najlepšie vystihuje to, čo teraz budeme tvoriť. Vyskúšame si základné grafické príkazy pre kreslenie.

Vytvorte nový program s názvom Grafika. Petríka nebudeme v našom programe potrebovať, preto ho môžete zneviditeľniť. Základom programu bude cyklus podmienené opakovanie príkazov s prerušením klávesom Esc. Pridajte ju za vypnutie viditeľnosti Petríka a vložte do neho príkaz čakania.

2D grafika

Ďalším, veľmi dôležitým, úkonom je spriehľadnenie políčok vo vrstve predmetov. Vyvolajte editáciu predmetu prázdne políčko. V okienku voľby farieb vyberte farbu vľavo hore (sivastý fialová). Je to priehľadná farba, ktorá zaistí spriehľadnenie políčka s predmetom. V nástrojoch na kreslenie vyberte vyplnený obdĺžnik a prekreslite celú plochu predmetu priehľadnou farbou.

Keď teraz program spustíte, neuvidíte nič iné ako čiernu plochu. Vidíte grafickú vrstvu, ktorá sa stane základom našich ďalších programov. V budúcnosti budeme používať predmety aj grafiku súčasne. Po vyskúšaní prvého grafického príkazu si môžete skúsiť vkresliť niečo do predmetu prázdneho políčka. Uvidíte vykresľovanie grafiku a cez ňu sieť obrázkov prázdnych políčok.

V okne Základných prvkov si nalistujte skupinu grafika, podskupinu kreslenie. Nájdete v nej príkazy pre kreslenie grafických prvkov. Vezmite príkaz bod a vložte ho do hlavnej slučky programu. Príkaz obsahuje ďalšie štyri prvky, slúžiace na zadanie parametrov vykreslovaného bodu.

Prvý parameter, farba pera, určuje farbu bodu. Farba je číslo, ktoré môžeme uchovávať v číselnej premennej. Jeho hodnota nás zatiaľ nezaujíma, pretože na určovanie farby môžeme používať špeciálne funkcie. Pri novo vytvoreného príkazu prvok farba pera obsahuje prvok farba. Je to konštanta farby, odovzdávajúce príkazu zvolenú farbu (farba je číslo). Novú farbu vyberieme dvojitým kliknutím ľavým tlačidlom myši na prvok konštanty farby. Objaví sa okno voľby farieb, vybraná farba je označená vyvýšením políčka. Kliknutím na niektorú z farieb vyberieme inú farbu. Uvidíme ju aj v ikonke prvku konštanty farby. Ak by ste teraz program spustili, uvidíte opäť čiernu plochu, ale v ľavom dolnom rohu malú bodku.

2D grafika

V našom programe budeme chcieť vykresľovať body s náhodnou farbou. Vyhodíme preto preč konštantu farby a na jej miesto dosadíme prvok zlúčenie farebných zložiek do farby (zo skupiny grafika). Prvok obsahuje ďalšie tri prvky, červená zložka (0 až 1), zelená zložka (0 až 1) a modrá zložka (0 až 1). Prvky určujú úroveň jednotlivých farebných zložiek vo výslednej farbe. Čím viac sa hodnota zložky blíži číslu 1, tým je zložka svetlejšia. Napríklad žltá farba vznikne zadaním hodnôt 1, 1, 0. náhodné farby vytvoríme tak, že do jednotlivých zložiek umiestnime prvky náhodné číslo (0 <= x <1) (rozsah náhodného čísla je tiež 0 až 1).

Okrem farebných zložiek je tu ešte štvrtá zložka, alfa zložka (0 = priehľadnosť až 1 = farba). Jej použitie je hlavne v 3D grafike. U 2D grafiky ju používame iba v špeciálnych prípadoch, kedy je treba kresliť grafiku pomocou priehľadné alebo tieňové farby (čiže nemá význam priehľadného kreslenie tak ako by sa možno dalo čakať). Preto ju nechávame nenastavený, tým sa použije štandardné hodnota 1.

Ďalším parametrom príkazu pre kreslenie bodu je prvok hrúbka pera. Je to číselná hodnota udávajúca, koľko grafických bodov bude kreslený bod široký. Veľkosť bodu budeme generovať náhodne, preto sem vložíme náhodné číslo s parametrom 9, čím zabezpečíme náhodné body o veľkosti 1 až 9 grafických bodov (nulou sa nemusíme zaoberať, príkaz pre kreslenie bodu použije hodnotu 1).

Posledné dva prvky príkazu, horizontálne súradnice bodu X a vertikálne súradnice bodu Y, určujú miesto, kam sa bod vykreslí. Na obrázku nižšie vidíte určovanie grafických súradníc. Ničím sa nelíši od číslovania políčok, ako sme ho poznali v predošlých kapitolách. Základnou jednotkou súradnicového systému Petra je jednotkový krok. Dĺžka jednotkového kroku zodpovedá šírke políčka (nesúvisí teda s dĺžkou kroku sprajt Petríka), počiatok súradníc je vľavo dole. Políčko má rozmer 32 grafických bodov. Vďaka vyjadrenie súradníc desatinným číslom môžeme udávať súradnice políčok, grafiky i sprajt jednotne, bez nutnosti vzájomných prevodov.

2D grafika

Súradnice k vykreslenie bodu určíme náhodne, ako to už poznáme z predchádzajúcich lekcií, pomocou náhodného čísla s parametrom šírky poprípade výšky plochy. Výsledný príkaz pre náhodné nakreslenie bodu bude vyzerať takto:

2D grafika

Program spustite. Na ploche sa začnú náhodne objavovať farebné bodkami rôznych veľkostí. Vykresľovanie nie je príliš rýchle. Po každom bode program v slučke chvíli čaká (55 ms), rýchlosť vykresľovanie je preto iba 18 bodov za sekundu.

Teraz je vhodná chvíľa pozastaviť sa u časovanie programe. Ako sme si už skôr povedali, príkaz čakanie má, okrem vlastnej funkcie čakania, tiež funkciu spolupráca s ostatnými programami (a tiež s jadrom systému Windows). Znalejší užívateľ si môže systémovým programom Sledovanie systému overiť, že program Grafika zaťažuje počítač minimálne, a navyše je rýchlosť chodu programu nezávislá na rýchlosti počítača. Pre upresnenie - príkaz čakanie v skutočnosti neznamená skutočnú oneskorenie o zadanej dĺžke, ale synchronizáciu na vnútorné hodiny počítača. Preto nezávisí rýchlosť programu na tom, ako rýchlo sa vykonajú príkazy medzi dvoma príkazmi čakania.

Doplňte na skúšku do príkaze čakania hodnotu 0. Po spustení môžete pozorovať, že program teraz chrlí veľké množstvo bodov. Program už nečaká na časový krok, ale ide maximálnou rýchlosťou. Pritom po každom priechode slučkou ešte zaistí zobrazenie plochy okna na displeji. To je ďalšie funkcie príkazu čakanie - zaistenie zobrazovania. Program totiž nevie, v ktorej chvíli boli dokončené všetky grafické operácie a kedy je teda vhodné okno zobraziť na displeji. Ak by okno zobrazoval sám, mohol by ho zobraziť vo chvíli, keď je vykreslené pozadie hry, ale ešte nie postavy v hre. To by sa prejavilo preblikávaním pozadí pod postavami. Preto prebieha zobrazovanie na obrazovku vo chvíli čakania, kedy sú zrejme už všetky grafické operácie dokončené.

Časovanie s hodnotou 0 je vhodné používať v situáciách, kedy je buď potreba vyšší výkon programu, alebo je časovanie po 0.05 sekundách príliš hrubé. Časovanie s 0 zaisťuje plynulé prekresľovanie okná, maximálna rýchlosť programu a ešte dostatočnú spoluprácu so systémom Windows. Rýchlosť chodu programu teraz už závisí na rýchlosti počítača. Systémovým programom Sledovanie systému by sme zistili, že program spotrebováva takmer celý výkon počítača a to aj v zdanlivo pokojnom stave.

Pri ďalšej skúške časovanie programu môžete skúsiť príkaz časovanie úplne zablokovať tlačidlom Vypnúť. Keď teraz program spustíte, uvidíte namiesto bodiek farebný šum. V tejto chvíli už program pracuje skutočne na plný výkon bez akýchkoľvek prieťahov. Možno si všimnete, že namiesto plynulého farebného šumu je obraz dosť trhavý. Program totiž zaisťuje aspoň minimálnu prekresľovanie okná na displej. Ak nie je po dobu asi 0.2 sekundy použitý príkaz čakania, prekreslí okno sám.

Vráťme sa späť ku grafickým príkazom. Pridajte do hlavnej slučky programu obdobne aj ďalšie grafické príkazy - čiara, obdĺžnik, vyplnený obdĺžnik, kružnica, kruh, guľa, trojuholník - a skúste ich náhodné vykresľovanie. Pre kružnicu, kruh a guľu použite náhodný polomer 2. Výplň vynechajte, tu by nebola moc zmysluplná.

Pozastavíme sa pri príkaze výpis textu. Príkaz má viac parametrov, ako ste možno zvyknutí, ale nemusíte sa ich báť. Parametre, ktoré vás nezaujímajú alebo ktoré nepoznáte, nechajte proste neboli nastavené, použijú sa ich implicitné hodnoty. Význam parametrov text k výpisu, farba pera, horizontálne súradnice X textu a vertikálne súradnice Y texte je zrejme pomerne jasný.

Novým prvkom je uhol orientácie textu. Je to uhol, o ktorý je text otočený okolo ľavého dolného rohu. Uhol sa udáva v radiánoch, rovnako ako všetky ostatné uhly v Petrovi. Môžeme využiť konštanty smere známe z nastavovania smeru Petríka a Lucky. Bez zadania smeru je použitý smer 0 (vodorovne zľava doprava).

Prvok výška znakov určuje výšku znakov textu. Je udaný v jednotkových krokoch. Bez zadania výšky bude výška znakov 0.5 (polovica výšky políčka).

Prvok relatívna šírka znakov (1 = bežná) predstavuje pomerné číslo udávajúce, koľkokrát sú znaky širšie ako ich bežná šírka. Hodnota 1 nastavuje bežnú šírku znakov. Väčšie číslo ako 1 nastaví znaky širšie, pri menšom čísle budú použité znaky užšie. Zvláštne hodnotou je číslo 0. Číslo 0 nastaví odporúčanú šírku použitého typu znakov. Približne táto šírka zodpovedá bežnej šírke, ale mierne sa môže líšiť. Bez zadania šírky znakov je použitá hodnota 0, teda odporúčaná šírka znakov.

Prvky tučný text, kurzíva, podčiarknutie a prečiarknutie sú logické prepínače a zapínajú zvláštne efekty písma. Bez zadania hodnoty sú všetky prepínače vypnuté. Prepínač pätičky zapína pätičky u znakov. Bez zadania je vypnutý. Prepínač písací stroj zapína znaky s pevnou rozstupom a pevnou šírkou. Pri vypnutom prepínači majú znaky premenlivú šírku (I je užší ako M). Bez zadania je prepínač vypnutý.

Štandardne sa v prípade vypnutia prepínača pätičiek aj písacieho stroja použije písmo Arial. Po zapnutí pätičiek sa použije písmo Times New Roman. Ak je naopak zapnutý prepínač písacieho stroja, použije sa písmo Courier New. Ak sú zapnuté oba prepínače, pätičky aj písací stroj, použije sa ako zvláštny variant užívateľský font. Je to font, ktorého meno je definovateľné pomocou prvku užívateľské písmo. V Lite verzii Petra nemožno užívateľské písmo meniť a použije sa implicitný font Impact.

Celý príkaz pre náhodný výpis textu vidíte na nasledujúcom obrázku. Príkaz je dosť dlhý, preto je obrázok rozdelený na dve časti. Po vytvorení príkazu program skúste. Ak si chcete program pozastaviť, môžete k tomu použiť kláves Pause. Takto možno pozastavovať všetky programy v Petrovi. Pokračovanie je možné stlačením akejkoľvek klávesy.

2D grafika

Jednou z najsilnejších stránok grafiky sú určite obrázky. Pomocou obrázkov môžete zaistiť všetko, na čo nestačí základné vybavenie Petra. Vytvoríte pohyblivé postavičky, okno s animovanými tlačidlami, pohyblivé pozadie hry a samozrejme fotografie.

Príkazy a funkcie pre prácu s obrázkami nájdete v skupine grafika, podskupina obrázky. Základným príkazom je príkaz vykreslenie obrázka. Okrem samozrejmých parametrov, ako je obrázok k vykreslenie a súradnice obrázku, má príkaz ešte ďalšie parametre, umožňujúce vykresliť iba určitú časť obrázka.

2D grafika

V našom testovacom prográmku budeme náhodne vykresľovať nejaký obrázok. Môžete použiť napríklad obrázok chobotnice z minulej lekcie. Príkaz pre náhodné vykreslenie obrázku vidíte na predošlom obrázku. Aby sme si užili náhodnosti, použijeme okrem náhodné pozície tiež náhodnú zmenu veľkosti obrázka a náhodné otočenie. Treba však upozorniť, že obzvlášť otáčanie obrázku môže byť časovo značne náročná operácia, čo sa môže prejaviť u veľkých obrázkov alebo ak sa zapne zjemnenie hrán. Výšku obrázku pri zmene veľkosti nie je potrebné zadávať, bude automaticky úmerná nové šírke.

2D grafika

 

Stiahnuť

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

Stiahnuté 230x (137.38 kB)
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