Opasarkisto: Ohjelmointiaiheita: Sprite-grafiikka

Tässä oppaassa tutustutaan spritegrafiikkaan ja sen toimintaan pikselitasolla ja tehdään esimerkkiohjelma QBasicille ja Visual Basicille. Oppaan ymmärtämisessä on tärkeää tuntea bittioperaattorit and, or ja xor, muuten opas ei suurempaa ohjelmointitaitoa edellytä.

Mitä on sprite-grafiikka?

Olet ehkä kuullut puhuttavan spriteistä vanhojen tietokoneiden, kuten Commodore 64:n ja Amigan, yhteydessä. Näissä tietokoneissa oli usein sisäänrakennettu spritejärjestelmä, jonka avulla grafiikan teko oli ainakin jossain määrin helpompaa. Mitä sitten spritet ovat?

Spritet ovat kuvia, joissa ei ole taustaa. Tai onhan kaikissa kuvissa tausta, mutta spriteissä taustaväriä ei piirretä. Tällöin kuva ei siis sottaa koko aluetta, jolle se piirretään, vaan taustalle jää vanha kuva.

Peleissä spritet ovat usein välttämättömiä. Seuraava kuvapari toimii esimerkkinä asiasta: ensimmäisessä kuvassa kuva on kopioitu suoraan taustakuvan päälle, toisessa kuva on sprite läpinäkyvällä taustavärillä.

Miten sprite-grafiikkaa tehdään?

PC ei sisällä valmiina sprite-grafiikkatukea, joten sen ohjelmoiminen on tehtävä itse. Tässä oppaassa esitettävä menetelmä ei välttämättä ole paras mahdollinen, mutta ainakin yksinkertainen ja helposti eri ympäristöihin sovellettava.

Sprite koostuu kahdesta kuvasta, itse spritestä ja maskista. Sprite on muuten kuin tavallinen kuva, paitsi että tausta on musta. Maskissa taas kaikki muu on mustaa, paitsi se osa, joka on spritessä taustaa. Esimerkissä kuvana on vinottainen sininen neliö. Kolmas kuva on tausta, jonka päälle sprite piirretään.

Spriten muodostaminen aloitetaan kopioimalla maski taustan päälle. Maskia ei kuitenkaan kopioida tavanomaisesti, vaan sen jokaista pistettä verrataan taustakuvan vastaaviin pisteisiin and-operaattorilla.

Nyt esimerkiksi kuvan vasemmassa ylänurkassa maskin pikseliväri on 15 (valkoinen) ja taustan 2 (vihreä). 15 and 2 on 2, joten pisteen väriksi tulee 2. Vastaavasti pisteen väri maskin kohdassa (x=5, y=2) on 0 (musta) ja taustassa samassa kohtaa 2 (vihreä). 0 and 2 on 0, joten pisteen väriksi tulee 0.

Tällä tavalla käydään koko kuva läpi ja tuloksen pitäisi olla seuraavankaltainen:

Tämän jälkeen sprite kopioidaan uuden taustan päälle, tällä kertaa xor-operaattorilla vertaillen. Vasemmassa ylänurkassa spriten väri on 0 (musta) ja uuden taustan 2 (vihreä). 0 xor 2 on 2, joten tausta jää ennalleen. Pisteessä (x=5, y=2) spriten väri on 1 (sininen) ja taustan 0 (musta). 1 xor 0 on 1, joten pisteestä tulee sininen.

Näin jatkaen kuvasta tulee seuraavanlainen, ja kuinka ollakaan, sprite näkyy nyt taustakuvan päällä oikein, spriten taustaväri ei ole sotkenut kuvaa.

Käytännössä pikseleiden värejä ei lasketa itse yksi kerrallaan, vaan grafiikan kopiointikäskyissä voi usein valita kopiointitavan (yleensä ainakin tavallinen, and, or ja xor). Mutta on hyvä tietää, kuinka tämä tapahtuu pikselitasoltakin.

Spritet animaatiossa

Peleissä spritet useimmiten animoidaan, eli ne vaihtavat paikkaa ruudulla. Jotta kuva ei sekoitu, jokaisen animaation vaiheen alussa vanha sprite on pyyhittävä pois. Tähän on kaksi tapaa:

• ottamalla ennen jokaisen spriten piirtoa sen alla oleva taustakuva talteen, ja palauttamalla sitten nämä kuvat paikoilleen, käänteisessä piirtojärjestyksessä
• piirtämällä koko taustakuva uudestaan

Spritejen määrästä riippuu, kumpaa tekniikkaa kannattaa käyttää. Jos spritejä on vain muutama, ne kannattaa pyyhkiä erikseen, mutta jos kuvaruutu on täynnä spritejä, voi olla nopeampaa piirtää koko kuva kerran uudestaan.

Esimerkkiohjelmia

• QBasicille GET- ja PUT-käskyillä (0,8kt)
• Visual Basicille BitBlt:n avulla kaksoispuskuroinnilla (2,2kt)