Suomipelit – Grafiikkakurssi 2

Tämä grafiikkakurssi 2 on jatkoa edelliselle grafiikkakurssilleni, 2D-grafiikan alkeet Allegroa käyttäen. Ykkösosassa opetttelimme yksinkertaisia piirtofunktioita ja piirsimme kuvia. Tässä kakkososassa menemme hieman pidemmälle. Opettelemme käyttämään Allegron BITMAP:pejä ja piirustusohjelmilla piirrettyjä pcx- ja bmp-kuvia. Lopuksi luomme pienen katsauksen peleissä käytettyihin kikkoihin.

Virkistetään muistia #

Oletan, että olet lukenut ykköskurssin grafiikasta ja käyn siksi nämä perusasiat Allegron käyttämisestä vain nopeasti läpi. Jos kaipaat tarkempaa selvitystä, löydät sen artikkelista, 2D-grafiikan alkeet Allegroa käyttäen.

[DEFTABLE]
[D]allegro_init();[/D]
[E]Tämä funktio alustaa Allegron niin, että se on valmis käytettäväksesi. Muista kutsua tätä ennen kuin käytät muita Allegron funktioita[/E]

[D]set_gfx_mode();[/D]
[E]Tällä funktiolla asetat grafiikkatilan haluamaksesi.[/E]

[D]allegro_exit();[/D]
[E]Muista laittaa tämä funktiokutsu ohjelmasi loppuun. Se lopettaa Allegron käytön.[/E]

[D]install_keyboard();[/D]
[E]Jos haluat käyttää Allegron näppäimistöfunktioita, kutsu tätä funktiota ohjelmasi alussa.[/E]
[/DEFTABLE]

Nuo ovat ne asiat, jotka sinun on ykkösosasta muistettava, muita pohjatietoja et tarvitse. Ja sitten asiaan!

Mitä ovat bitmapit? #

Kurssin edellisessä osassa en vielä viitsinyt sekoittaa sinua bitmapeillä, mutta silti tietämättäsi (tai tietoisesti) niitä käytit. Nimittäin aina kun kirjoitit johonkin kohtaan screen käytit yhtä bitmappien erikoistyyppiä, joka esittää näyttöä. Mutta eiköhän selvitetä tämä bitmap-asia nyt alusta alkaen...

Allegrossa oikeastaan kaikkien grafiikkafunktioiden pohjana on BITMAP, joka tarkoittaa bittikarttaa. Oikeastaan sitä voisi ajatella jonkinlaisena piirtopohjana. DirectX:ssä niitä nimitetäänkin pinnoiksi. En halua sinua sekoittaa, mutta toivoin tuon selkeyttävän asiaa. Siis, kun piirrät, piirrät aina jollekin bitmapille, piirtopinnalle.

Voit luoda itse bitmappejä esittelemällä ne ikäänkuin muuttujina seuraavaan tapaan:

BITMAP *kuva;

kuva=create_bitmap(320,200);

destroy_bitmap(kuva);

Syvemmälle paletteihin #

Myös paletteja katsoimme pikkuisen ja niiden perusperiaatteen taisinkin jo selittää. Puhuimme niistä RGB-structeista ja laittelimme palettiin värejä. Se oli kuitenkin vielä suhteellisen hankalaa.. Nyt katsomme paletteja hieman tarkemmin ja otamme käyttöön helpompia tapoja käyttää paletteja.

Siis muistathan, että jokainen paletin 256 väristä esitetään RGB-structeissa ilmoittamalla niiden punaisen, vihreän ja sinisen värin komponentit.

Paletti on Allegrossa 256 RGB-structin taulukko, joka on nimeltään PALETTE. Jos siis haluat tehdä uuden paletin, esittelet sen muuttujana seuraavasti:

PALETTE oma_paletti;

Ladataan kuva #

Jees. Alku tähän asti on kaikki ollut oikeastaan johdantoa kuvien lataamiselle. No, onhan noista asioista muutenkin hyötyä, mutta ainakin nyt pääsemme tekemään hauskempia juttuja..

Kuvan, jonka nyt lataamme on oltava 256-värinen BMP- tai PCX-kuva. Lataamme sen omaan bitmappiinsä ja otamme myös kuvan paletin talteen. Tehdään tästä kokonainen ohjelma vaikkakin paloittain.. Nyt se alkaa:

  #include <allegro.h>
  #include <stdio.h>
 
  int main(void)
  {
	BITMAP *kuva;

  	PALETTE paletti;

	// Allegron alustukset
	allegro_init();
	install_keyboard();
	set_gfx_mode(GFX_AUTODETECT,640,480,0,0); 

	// Ladataan kuva
	kuva=load_bitmap("kuva.pcx",&paletti);

	// valitaan käytettävä paletti
	set_palette(paletti);

	// piirretään kuva näytölle
	blit(kuva,screen,0,0,0,0,kuva->w,kuva->h);

	// odotellaan että joku painaa spacea
	while(!key[KEY_SPACE]){}
	
	// lopetetaan Allegro
	allegro_exit();
	
	return(0);
}

Länttäillään kuvat ruudulle #

Kun olemme ladanneet kuvan tai kuvia, on ne tietenkin piirrettävä ruudulle. Tähän tarkoitukseen Allegro tarjoaa kaksi funktiota, itse voit tietenkin kehitellä niitä lisää.. Mutta pitäydytään nyt vielä Allegron funktioissa.

Yksinkertaisin kuvanruudullepiirtofunktio on blit, joka vain länttää kuvan haluamaasi paikkaan toisessa bitmapissä. Eiköhän siis jätetä jaarittelut väliin ja mennä käytäntöön.

Siis... Blit-funktiolla voit kopioida yhdestä bitmapistä haluamasi kokoisen palan toiseen funktioon. Otetaan esimerkki samantien.

blit(kuva,screen,0,0,100,100,30,30);

Liikkuvia kuvia, eli spritejä #

No niin. Nyt siis olisi tarkoitus tutustua spriteihin. Käytännössä sprite on bitmappi. Ennenmuinoin, silloin kuusnelosten aikaan, spritet olivat jotain aivan erilaista, mutta ei siitä sen enempää. Jos se aika kiinnostaa, varmaan netistä löytyy paljonkin kuusnelosasiaa, ja täälläkin ehkä joskus saatan niistä jutuista kirjoitella.

Siis. Sprite on Allegrossa bitmappi, ei sen kummempaa. Usein spriteihin liitetään myös ajatus siitä, että ne ovat ikäänkuin pelin liikkuvia objekteja. Näin saattaa usein olla, mutta ei suinkaan aina.

Okei, enköhän ole sekoittanut sinua jo aivan tarpeeksi. Unohda kaikki edelläoleva spritehöpinä. Ei vaineskaan, kyllä ne voit muistaa, mutta niillä ei ole käytännön kanssa paljonkaan tekemistä.

Se mitä tässä kappaleessa varsinaisesti haluan selittää, on Allegron toinen bitmapinpiirtofunktio, draw_sprite. Se on muuten aika samanlainen kuin blit, mutta se sisältää läpinäkyvän värin.. Kaikki mikä bitmapissä on piirretty paletin värillä 0 näkyy läpinäkyvänä eli ei näy. Tämä on tosi hyödyllistä esimerkiksi, jos haluamme piirtää toisen kuvan päälle pelaajan ukon tai auton tai raketin tai vaikka mitä.

Ai että mitenkö se tehdään? Helppoa:

draw_sprite(screen,kuva,20,20);

Tehtävä #

Äskeisessä tehtävässä siis latasit kaksi kuvaa ja piirsit toisen taustaksi ja toisen siihen päälle draw_spritellä. Kuvia et kuitenkaan pystynyt liikuttelemaan. Nyt korjataan se puute ja lisätään tehtävän ohjelmaan liikettä.

Tarkoituksena on siis, että tausta pysyy edelleen paikallaan, mutta pienempää kuvaa, spriteä pystyy liikuttelemaan taustan päällä nuolinäppäimillä.

Mitä tarvitsemme tämän tehtävän suorittamiseen? Ensinnäkin kaksi muuttujaa säilyttämään spriten paikkaa ruudulla. Olkoot ne vaikka x ja y, inttejä tietysti. Toiseksi tarvitsemme tietysti kuvat, ne voi piirtää vaikka Paint Shop Prolla. Ja kolmanneksi tarvitsemme while-silmukan, jonka aikana luetaan näppäimistösyötettä (nuolet) ja liikutellaan kuviota sen mukaan.

Luulisin, että osaat tehdä sen itsekin, joten olkoon se tehtävä. PS. Jos kaikki ei näytä aivan oikealta, älä huolestu sillä seuraavassa kappaleessa tulee ratkaisu taustaongelmaan :).

Korjataan taustaongelma #

Kuten ennen tehtävää lupasin, tulee nyt ratkaisu sinua varmaankin pitkään askarruttaneeseen ongelmaan. Eikös vain käynytkin niin, että kun liikutit spriteä, jäi vanha kuva taustakuvaan "kiinni" ja seurauksena oli vain sotkua? Jos näin ei käynyt, olet luultavasti huijannut ja piirtänyt taustankin joka kerta uudestaan. Sehän ei toki ole kiellettyä, mutta paljon hitaampaa. Siksi tässä tulee nyt nopeampi ratkaisu.

Idea on yksinkertainen: Ennen kuin piirrät spriten uuteen paikkaan, piirrä vanhan paikan tausta takaisin ja laita talteen uuden paikan tausta. Okei, ei kuulostanut kauhean yksinkertaista, mutta sitä se on. Katsotaan asiaa kaikessa rauhassa esimerkkiohjelman avulla:

  int main(void)
  {
	BITMAP *tausta; // semmoinen iso kuva jonka päälle piirretään
	BITMAP *sprite;
	BITMAP *spriten_taus; // spriten tausta
	PALETTE pal;

	int x=10;
	int y=50;

         allegro_init();
         install_keyboard();
         set_gfx_mode(GFX_AUTODETECT,320,200,0,0);

	// kuvien lataaminen
         tausta=load_pcx("taus.pcx",&pal);
         set_palette(pal);
         sprite=load_pcx("sprite.pcx",&pal);

	// Ja tässä on nyt sitten sitä uutta asiaa
	spriten_taus=create_bitmap(sprite->w,sprite->h);

	blit(tausta,spriten_taus,x,y,0,0,spriten_taus->w,spriten_taus->h);
	
	draw_sprite(tausta,sprite,x,y);

	while(!key[KEY_ESC]){
		blit(spriten_taus,0,0,x,y,spriten_taus->w,spriten_taus->h);

                if(key[KEY_LEFT]) x--;
                if(key[KEY_RIGHT]) x++;
                if(key[KEY_UP]) y--;
                if(key[KEY_DOWN]) y++;

blit(tausta,spriten_taus,x,y,0,0,spriten_taus->w,spriten_taus->h);

		draw_sprite(tausta,sprite,x,y);

		// Ja koko komeus näytölle	
		blit(tausta,screen,0,0,0,0,tausta->w, tausta->h);
    	}

        allegro_exit(0);

	return(0);
    }

Ja sulavuutta kaksoispuskurilla #

Jaahas! Nyt olemme päässeet siihen vaiheeseen, että on sopivaa puhua kaksoispuskuroinnista. Kokeile allegron esimerkkiohjelmaa ex8.exe. Siitä saat hyvän kuvan kaksoispuskuroinnin hyödyllisyydestä. Ohjelmassa pallo kulkee ruudun poikki ensin ilman kaksoispuskurointia, niin, että se piirretään suoraan näytölle (screen-bitmappiin). Toisella kerralla se piirretään kaksoispuskurointia käyttäen. Huomaat eron, ilman kaksoispuskurointia kuvan katsominen oli suorastaan sietämätöntä, kaksoispuskuroinnin kanssa jo ihan siedettävää.

Mutta arvaas mitä! Tuo hienous on niin helppoa, että ihan naurattaa.. Sinäkin olet jo käyttänyt kaksoispuskurointia, tietämättäsi. Yllätyitkö? Se oli tuossa edellisessä kappaleessa. Siinä teimme kaikki piirtämiset tausta-bitmapillä ja lopussa vain blittasimme sen näytölle. Kuulostaako tutulta? Eikä todellakaan ole vaikeaa. Kaksoispuskurointi tarkoittaa siis sitä, että mitään ei piirretä suoraan näytölle vaan aina ensin kaksoispuskuriin, joka sitten lopuksi yhdellä nopealla blitillä heitetään näytölle.

Nyt varmaan mietit, että miten tuollaisella pikkujutulla voi olla näin suuri vaikutus. Se johtuu vain siitä, että näyttömuistiin piirtäminen on paljon hitaampaa kuin tavalliseen perusmuistiin. Jos käytämme draw_spriteä screen-bitmapin kanssa on se siis paljon hitaampaa kuin vaikkapa tausta-bitmapillä. Siinä on kaksoispuskuroinnin salaisuus.

Olisikohan nyt pelien aika? #

Oho, tämäkin kurssi meni nopeasti. Kirjoitinkin sen oikeastaan yhdessä päivässä - niin, ja korjailin hieman nyt pari vuotta kirjoittamisen jälkeen. Korjauksia joudun varmaan vieläkin tekemään, mutta kaipa tämä on valmis. Pääasia on, että nyt hallitset blittailut ja paljon muuta. Mikään ei enää estä sinua tekemästä ensimmäistä peliäsi. Voit tehdä sen vaikka nyt, mutta muista, älä aloita liian vaikeasta!

Tietenkään sinun ei ole pakko jatkaa peliohjelmoinnin suuntaan vaikka sinne sinua jatkuvasti tyrkinkin (anteeksi siitä..), voit ihan yhtä hyvin tehdä vaikka kuvannäyttelyohjelman tai jotain muuta hyödyllistä.

Joka tapauksessa, valitsit sitten minkä tahansa suunnan tästä eteenpäin, toivotan onnea ja toivon voivani auttaa sinua edelleen!