h3. Úvod

Doteraz sme pracovali s jediným obrázkom -- s obrazovkou. Odvolávali sme sa na ňu s pomocou našej premennej <code>$screen</code>. Táto premenná bola zobrazovacia plocha, čiže DisplaySurface (plocha je len krycí názov pre obrázok). Dnes sa dozvieme, ako pracovať aj s inými obrázkami a ako obsah jedného dostať do druhého.

Sú dva druhy obrázkov. Tie, ktoré vidieť (obrazovka alebo jej časti) a tie, ktoré nevidieť. Zdalo by sa, že obrázky, ktoré nevidieť sú naprosto zbytočné. Je to prekvapivé, ale takéto obrázky sa používajú veľmi často. Prvý dôvod je ten, že keď sa niečo kreslí veľakrát a stále rovnako, je rýchlejšie nakresliť to raz do pamäte a potom to proste odtiaľ vždy skopírovať. Ďalšie použitie je, keď treba nejaký obrázok načítať zo súboru. Taký obrázok sa odloží do pamäte a potom sa môže kopírovať na obrazovku.

p(advanced). Len pre úplnosť: Ako už bolo povedané v prvej lekcii, keď je zapnutý double-buffering, aj <code>$screen</code> je vlastne uložená v pamäti.

Odteraz budeme do programov dávať za funkciu <code>keypress</code> novú funkciu, ktorá bude načítavať obrázky:

<code>
def loadImage(filename)
  surface = Surface.load_new(filename)
  surface.convert!
  surface
end
</code>

Na prvom riadku načítam obrázok samotný. Príkaz <code>Surface.new(rozmery)</code> vyrobí prázdnu plochu a príkaz <code>Surface.load_new(súbor)</code> plochu načíta.

Príkaz <code>convert!</code> zmení načítanú plochu, nech má rovnakú farebnú hĺbku ako obrazovka. Keď ju majú dve plochy rovnakú, je kreslenie z jednej do druhej rýchlejšie.

Nakoniec výslednú plochu vrátim.

p(advanced). <code>convert!</code> vracia samotnú plochu, takže celé telo funkcie by sa dalo skrátiť na jeden riadok: <code>Surface.load_new(filename).convert!</code> (Ale neskracujte to tak, ešte budeme ten dlhší zápis neskôr potrebovať.)

h3. Kopírovanie

Na prvú ukážku je nutné, aby ste mali vo svojom počítači súbor <code>xicht.tga</code> v ktorom je uložený obrázok s rozmermi 100x100 bodov.

<code>
obrazok = loadImage("xicht.tga")

$screen.blit(obrazok, [270, 190])

$screen.flip
keypress
</code>

<code>blit</code> je univerzálna funkcia na kopírovanie obrázkov. Používa sa v tomto tvare: <code>plochaKamKopírujem.blit(plochaOdkiaľKopírujem, súradniceKamKopírujem, miestoOdkiaľKopírujem)</code>. <code>miestoOdkiaľKopírujem</code> (zadáva sa ako obdĺžnik) je nepovinné, ak ho nezadáte, skopíruje sa celá <code>plochaOdkiaľKopírujem</code>.

p(advanced). Ruby má garbage collector, takže obrázky netreba z pamäte nakoniec mazať ani nič také.

*Úloha č. 1:* Urobte program, ktorý zobrazí kópiu obrázku <code>xicht.tga</code> v každom rohu obrazovky.

*Úloha č. 2:* Urobte program, ktorý (v strede obrazovky) zobrazí z toho obrázku len ľavú hornú a pravú dolnú štvrtinu.

*Úloha č. 3:* Vydláždite obrázkom <code>xicht.tga</code> obrazovku.

h3. Naťahovanie

Obrázok je možné nielen kopírovať, ale aj naťahovať. Slúži na to funkcia <code>zoom</code>. Má tri parametre: natiahnutie do šírky, do výšky a či to má vyhladiť. Natiahnutie sa zadáva v pomere oproti pôvodnému obrázku, takže natiahnutie <code>2.0</code> vyrobí dvakrát taký veľký obrázok. Keď sa vypne vyhladzovanie, je to také škaredé pixelaté, ale vyhladzovanie je pomalé a keď treba naťahovať veľa, tak ho radšej vypnúť.

V predošlej ukážke miesto riadku <code>blit</code> dajte:

<code>
natiahnutyObrazok = obrazok.zoom(3.0, 1.0, true)
$screen.blit(natiahnutyObrazok, [170, 190])

Keď chcem, aby natiahnutý obrázok mal nejaké konkrétne rozmery, povedzme šírku 360, robí sa to takto: Najprv si uvedomím vzorček, že <em>výsledná šírka = pôvodná šírka * x-natiahnutie</em>. Keď pôvodná šírka je 100 a výsledná šírka je 360, výjde, že x-natiahnutie musí byť 360/100 (resp. <code>360.0/100.0</code>).

p(advanced). Len pre zaujímavosť, <code>zoom</code> je pôvodne z knižnice SDL_rotozoom.

*Úloha č. 4:* Natiahnite obrázok <code>xicht.tga</code> na celú plochu obrazovky.

*Úloha č. 5:* Nakreslite tisíckrát náhodne umiestnený a natiahnutý obrázok xicht.tga.