Suomipelit – 2D-Grafiikan alkeet Allegroa käyttäen

Jos olet jo lukenut edellisen tutoriaalini, Helposti C-ohjelmoijaksi, tiedät suurin piirtein mitä alkutasoa tällä kurssilla edellytän. En kovin paljoa, perustietämys C-kielestä riittää. Et tarvitse Windows- tai muita erityisohjelmointitaitoja. Kääntäjänä on edelleen DJGPP, jonka kanssa käytetään Allegro-peliohjelmointikirjastoa. Tavoitteena on, että tämän kurssin lopussa osaat piirtää palloja, viivoja, pikseleitä ja muita hauskoja kuvioita. Grafiikkakurssi kakkosessa siirrytään sitten monimutkaisempiin systeemeihin, sukelletaan spriteihin ja tehdään jotain animaatioitakin. Mutta asia kerrallaan.

Mikä Allegro? #

Allegrosta en muistaakseni siinä C-kurssissa vielä mitään ehtinyt kertoa. Nyt siis lyhyesti jotain Allegron historiasta ja nykypäivästä sekä siitä miksi sitä kannattaa käyttää.

Allegro on alunperin Shawn Hargreavesin, mutta nykyään suuremman ryhmän kehittämä peliohjelmointikirjasto. Se sisältää todella monia grafiikkafunktioita, äänifunktioita, ohjainlaitteiden hallintafunktioita ja vaikka mitä. Tällä hetkellä siitä on olemassa DOS-versio, ja melkein valmis Windows-versio. Myös X-Windows-versio on työn alla. Näin Allegroa käyttävä peli on helppo siirtää ympäristöstä toiseen. Ja Allegro on ilmainen, samoin kuin DJGPP, vapaaehtoistyönä toteutettu.

Allegron asentamisesta on kerrottu kaikki tarvittava noissa asennusohjeissa, joita löytyy DOS-ohjelmointialueelta. Ja Allegron käytöstä kerrotaan seuraavassa. Erittäin hyvä Allegro-tietolähde on Allegron helppi, jota kannattaa ahkerasti selata.

Kun alat tekemään peliä, joka käyttää Allegroa tai jotain sen osaa, ensimmäinen tehtävä on liittää mukaan otsikkotiedosto allegro.h. Se tapahtuu seuraavasti:

#include <allegro.h>

gcc foo.c -o foo.exe -lalleg

[X] 0 alleg

Ensimmäinen Allegro-ohjelmasi #

No niin. Tässä tulee yksinkertainen ohjelma, joka ei tee paljon mitään, vain sen olennaisimman. Se tekee alustukset, vaihtaa grafiikkatilaa, odottaa, että joku painaa spacea ja sitten lopettaa. Okei, käydään se läpi rivi riviltä.

#include <stdio.h>
#include <allegro.h> // allegron otsikkotiedosto

int main(void)
{

 // Ensin alustetaan Allegro
 allegro_init();

 // Sitten näppäimistö
 install_keyboard();

 // Sitten laitetaan oikea grafiikkatila
 set_gfx_mode(GFX_VGA,320,200,0,0);

 // Odotellaan näppäimen paimallusta
 while(!key[KEY_SPACE]){}

 // Lopetetaan Allegro
 allegro_exit();

 return(0);
}

Värit palettiin #

Valitsimme tuossa äsken grafiikkatilaksi VGA-tilan 320x200 eli kuten me ohjelmoijat sanomme, tilan 13h :), koska sitä on helpompi käyttää kuin useampivärisiä tiloja.. Nimittäin tässä 13h-tilassa käytettävissämme on vain 256 väriä. Se on kuitenkin enemmän kuin tarpeeksi, ainakin tässä vaiheessa.

Värit on tallennettu palettiin, jossa on nuo 256 väriä tallennettuna. Näitä värejä voit itse muuttaa, valita ne jotka sopivat tarkoitukseesi parhaiten.

Paletin värit on tallennettu RGB-structeihin, jotka ovat muotoa:

typedef struct RGB
{
   unsigned char r, g, b;
} RGB;

   RGB black = { 0,  0,  0  };
   RGB white = { 63, 63, 63 };
   RGB green = { 0,  63, 0  };
   RGB grey  = { 32, 32, 32 };
   RGB red   = { 63, 0,  0  };

// Esimerkki 2: Ohjelma, joka muuttelee värejä..
#include <allegro.h>
#include <stdio.h>

int main(void)
{
  RGB vihrea = { 0, 63, 0 };

  allegro_init();
  install_keyboard();

  set_gfx_mode(GFX_VGA,320,200,0,0);  
	 
  set_color(1,&vihrea);

  while(!key[KEY_ESC]){}

  allegro_exit();

  return(0);
}

Tehtävä #

Tutki tuota set_color-funktiota! Muuta yllä oleva ohjelma sellaiseksi, että se muuttaa väriä 0, jolloin taustan väri muuttuu. Kokeile erilaisia värejä! Tutki!

Ja pisteitä ruudulle #

Äsken muutimme palettia, mutta emme vielä piirtäneet mitään. Niinhän taiteilijatkin tekevät; ensin laitetaan palettiin värit ja sitten vasta aletaan maalaamaan. Katso hetken ajan alla olevaa kuvaa, joka esittää tietokoneen näytön koordinaatistoa.

0,0--------------->n,0
 |
 |
 |        
 V           
0,n

   putpixel(screen,0,0,1);

Toinen tehtävä #

Tee ohjelma, joka piirtää pisteen näytöltä arvottuun paikkaan! Satunnaisluvuista puhuimme C-kurssissa, katso sieltä, jos et muista.

Pisteistä eteenpäin #

No niin. Pisteet ovat pitemmän päälle aika tylsiä, mutta on tärkeää muistaa, että kaikki mitä tästä eteenpäin teemme perustuu niihin, huomaamme me sitä tai emme. Kuitenkaan ei meidän onneksi tarvitse kuvia piirtää piste kerrallaan vaan voimme käyttää apufunktioita. Tässä kurssissa käsittelemme seuraavat piirtofunktiot:

• putpixel - tämä käytiinkin jo läpi
  
• line - piirtää viivan
  
• triangle - kolmio
  
• rect ja rectfill - nelikulmio
  
• circle ja circlefill - ympyrä
  
• floodfill - täyttö
  

void line(BITMAP *bmp, int x1, int y1, int x2, int y2, int color);

  line(screen, 5, 5, 56, 100, 1);

Tehdään laatikko #

Kokeilepa tehdä funktio, joka piirtää laatikon line-käskyllä. Funktio ottaa syötteenä ylänurkan ja alanurkan koordinaatit ja laatikon värin.

No niin, nyt kun olet tehnyt oman laatikkofunktion, voin kertoa, että Alegrosta löytyy sellainen ihan omasta takaakin:

void rect(BITMAP *bmp, int x1, int y1, int x2, int y2, int color);

rect(screen,3,6,100,107,3);

rectfill(screen,10,10,50,50,4);

Ja sitten tehdäänkin jo ensimmäinen kuva #

Teepä seuraavaksi ohjelma, joka piirtää punaisen mökin käyttäen laatikko- ja viivafunktioita. Tee myös pari ikkunaa ja ovi. Voit myös keksiä muuta hienoa, vaikkapa ikkunalaudan.

Ja mökin pihallahan voisi olla hyvä olla puita, näyttää kodikkaammalta. Mutta puut eivät ole neliön muotoisia, ainakaan yleensä... Runko ehkä, mutta latvan tulee ehkä olla pyöreä tai kolmion mallinen, jos se on kuusi.

Siispä nyt tarvitaan ympyrän- ja kolmionpiirtotyökalut. Ympyrä piirretään funktiolla:

void circle(BITMAP *bmp, int x, int y, int radius, int color);

void triangle(BITMAP *bmp, int x1, y1, x2, y2, x3, y3, int color);

void floodfill(BITMAP *bmp, int x, int y, int color);

floodfill(screen,10,5,5);

Kirjaimista muodostuu sanoja #

Tämä kurssi lähenee loppuaan: osaat jo lähes kaikki grafiikkakäskyt, joita tässä kurssissa käymme läpi, ainoastaan tekstin kirjoittaminen puuttuu.

Eiköhän siis katsota nyt tuota kirjoittamista! Se tapahtuu Allegron funktioilla:

void text_mode(int mode);
void textout(BITMAP *bmp, FONT *f, unsigned char *s, int x, int y, int color);

text_mode(-1);

text_mode(15);

textout(screen,font,"Jee, nyt tulee tekstiä!!",10,150,10);

Yksinkertainen piirto-ohjelma #

Enempää piirtofunktioita en tässä kurssissa anna, mutta tehdäänpä pieni piirrustusohjelma, sellainen, jossa nuolilla liikuttamalla pystyy piirtämään. Tehdään ensin yhdessä pohja ja sitten päästän sinut kehittelemään ohjelmaa mieleiseksesi.

Mietitäänpä hetki ohjelman rakennetta:

• Allegron alustukset
  
• Grafiikkatilan vaihto
  
• Näppäimistön luku
  
• Pisteen piirtäminen
  

  if(key[KEY_LEFT]){
 	x--; // Liikutetaan vasemmalle
        putpixel(screen,x,y,vari);
  }
  if(key[KEY_RIGHT]){
 	x++; // Liikutetaan oikealle
        putpixel(screen,x,y,vari);
  }
  if(key[KEY_UP]){
 	y--; // Liikutetaan ylös
        putpixel(screen,x,y,vari);
  }
  if(key[KEY_DOWN]){
 	x--; // Liikutetaan alas
        putpixel(screen,x,y,vari);
  }

Loppukaneetti #

Nyt on tämä kurssi loppu ja toivottavasti olet oppinut tässä käsitellyt asiat ja ennenmuuta saanut lisää varmuutta ohjelmointiisi. Tähän ei kuitenkaan missään tapauksessa kannata lopettaa, olemme vasta pääsemässä alkuun 8^). Nimittäin nyt on aika siirtyä kohti Grafiikkakurssi kakkosta ja hienompia grafiikkajuttuja! Siispä, onnittelut kurssin suorittamisesta ja onnea jatkossakin!