Kirjautuminen

Haku

Tehtävät

Opasarkisto: Ohjelmointiaiheita: Sprite-grafiikka

Kirjoittaja: Antti Laaksonen. Vuosi: 2002.

Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi.

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:

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

Kommentit

KimmoKM [16.02.2003 12:50:30]

Lainaa #

Hyvä opas. Hyödyllinen.

kaviaari [18.03.2003 19:17:37]

Lainaa #

Mul tuli ongelmia kun liitin yhteen BitBlitin ja näppäimistö handelin =(

odys [01.07.2003 14:38:18]

Lainaa #

Ihan hyvä opas.. en vaan oikein ymmärtänyt noiden funktioiden käyttötarkoitusta/toimintaa.. Ehkä noita funktioita olisi voinut vähän selventää.

DumTom [29.10.2003 22:33:11]

Lainaa #

Löytyykö muka esim funktiosta fmemcpy() parametri jolla saa aikaan and tai xor operaation?
Pitänee muuten tutkia itse....

hunajavohveli [17.01.2004 16:29:44]

Lainaa #

AND ja XOR rupeaa sekoittamaan värejä, jotka menee yli 15.

setä [22.01.2004 22:47:08]

Lainaa #

Tuossa VB-esimerkissä onkin Xorin tilalla Invert, miksi?
Eikä Xor kelpaa jostain syystä?

CCDA [25.02.2004 19:26:56]

Lainaa #

Ja miten saisi näppäinkoodit toimimaan yhdessä BitBlt:n kanssa? Kokeilin laittaa formin keydown aliohjelmaan select case keycode -valikon ja tunkea tapahtumat sinne. Miksei pelitä?

CCDA [28.02.2004 12:53:34]

Lainaa #

Unohtakaa...

gamehouse [27.06.2007 12:35:21]

Lainaa #

Ei pysty lataamaan tiedostosta: VBSPITE.log

Dude [04.08.2007 13:55:14]

Lainaa #

hyvä opas. esimerkkikuvan ukkelin silimistä näkyy läpi.

Pollapoju [23.05.2008 09:18:32]

Lainaa #

hauska juttu mutta selitettävissä sillä että kaikki valkoinen on spritattu

pienipoika [06.08.2008 15:48:28]

Lainaa #

hunajavohveli kirjoitti:

AND ja XOR rupeaa sekoittamaan värejä, jotka menee yli 15.

tämä ei pidä paikkaansa. esimerkissä on käytetty lukua 15 koska (2^4)-1=15 (binäärinä 1111) musta on aina 0 ja valkoiseksi kelpaa mikä tahansa luku jossa kaikki bitit ovat "päällä" esim (2^3)-1=7 (binäärinä 111) tai (2^5)-1=31 (binäärinä 11111) jne... toisin sanoen valkoisen arvo+1 (muista musta!) käytännössä kertoo vain montako eri värimahdollisuutta on.

black cat [05.01.2010 12:24:26]

Lainaa #

voiko joku näyttää esimerkin ja missä vois opetella noi AND , XOR ja Or

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta