Tasohyppelypeli 7: bittikarttatiedostojen lataaminen ja spritejen piirtäminen

Aiemmissa osissa on keskitytty siihen, että koodausprojektimme tuntuisi peliltä, mutta nyt pääsemme tekemään pelistämme myös pelin näköisen. Hylätäänpä siis kentän osalta harmaat, punaiset ja siniset neliöt ja korvataan ne bittikarttagrafiikalla!

Suunnitelma on seuraava:

Ladataan spritearkki (eli sprite sheet) bmp-tiedostona, joka sisältää neljä erilaista seinäpalasta, grafiikan kahdelle erilaiselle piikkiansalle sekä kerättävälle timantille.
Jaetaan ladattu arkki yksittäisiin spriteihin.
Muutetaan map-taulukon alkioita vastaamaan spritearkin lohkoja, jotta kullekin alkiolle valitaan piirrettäväksi oikea lohko.
Muutetaan kentänpiirtämisfunktiota niin, että aiempien neliöiden sijaan piirretään spritearkin spritet.

Spritearkki

Tässä käyttämämme spritearkki, jonka spritet on toteuttanut PiiXL (ks. https://piiixl.itch.io/platformer ja https://piiixl.itch.io/textures). Arkki luetaan vasemmalta oikealle ja ylhäältä alas, eli vasemman yläkulman sprite saa map-taulukon alkioarvon 1, oikean yläkulman 2, jne.

Eli:

kiinteä seinä piirretään alkioarvoilla 1–4
piikkiansat piirretään alkioarvoilla 5–6
kerättävät timantit piirretään alkioarvolla 7.

Huomaa oikean alakulman sprite, joka esittää hahmoa. Tätä spriteä ei ole tarkoitus piirtää pelissä, vaan sitä hyödynnetään myöhemmin kenttäeditorissa, jossa määritetään pelaajan aloitussijainti alkioarvolla 8.

Main.h

Koska spritearkki on jaettu kahdeksaan spriteen, lisää main.h-otsikkotiedostoon vakio NUM_MAP_SPRITES ja anna sille arvo 8.

#define NUM_MAP_SPRITES 8

Ja jälleen seuraa mälsää kartan muokkausta. Erityisesti seinätiilien (spritearkin alkiot 1–4) kanssa saa olla tarkkana, että kuhunkin ruutuun valitaan piirrettäväksi spritearkista oikea tiili.

Päivitä map-taulukkoa siis seuraavalla tavalla:

vaihda arvot 2 arvoihin 5 ja 6;

5 on siis lattialla seisovia piikkiansoja varten ja 6 katosta roikkuvia

vaihda arvot 3 arvoihin 7
vaihda osa arvoista 1 arvoihin 2, 3 tai 4;

jos kuvitellaan kolmen tiilin korkuinen palkki, niin:

arvoa 1 käytetään sen yläosassa
arvoa 2 käytetään sen keskiosassa
arvoa 3 käytetään sen alaosassa.

Ai että, miten sekavaa! Olemme koko ajan lähempänä sitä hetkeä, kun kenttien piirtämiseksi otetaan käyttöön jokin editori.

int map[MAP_HEIGHT][MAP_WIDTH] =
{
    {2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2},
    {2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,2},
    {2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,2,2,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,2},
    {2,6,0,0,0,0,0,0,0,0,0,0,7,0,0,1,5,5,1,2,2,0,0,0,0,0,0,0,0,0,0,0,7,0,0,1,5,5,1,2},
    {2,0,0,0,0,7,5,0,0,0,0,4,4,0,0,3,4,1,2,2,2,0,0,0,0,7,5,0,0,0,0,4,4,0,0,3,4,1,2,2},
    {2,0,0,0,0,4,1,1,1,0,0,0,0,0,0,0,0,3,2,2,2,0,0,0,0,4,4,1,1,0,0,0,0,0,0,0,6,3,2,2},
    {2,0,0,0,0,0,3,2,2,0,0,0,0,0,0,0,0,0,3,3,3,0,0,0,0,0,0,3,3,0,0,0,0,0,0,0,0,0,3,2},
    {2,0,0,0,0,0,0,3,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,0,0,1,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,4,0,2,0,0,0,0,6,0,0,0,0,0,0,0,0,0,0,1,1,4,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,0,0,2,1,0,0,0,0,0,0,0,0,0,0,4,1,0,0,2,2,0,0,2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,2},
    {2,7,0,2,2,1,0,7,7,0,0,0,0,0,0,0,2,5,7,2,2,7,0,2,2,2,1,7,7,0,0,0,0,0,0,0,0,5,7,2},
    {2,1,1,2,2,2,1,1,1,1,1,1,1,1,1,1,2,1,1,2,2,1,1,2,2,2,2,1,1,1,1,0,0,0,0,1,1,1,1,2}
};

Lisää BITMAP-muuttujat *mapSpriteSheet ja *mapSprites[NUM_MAP_SPRITES].

*mapSpriteSheet on siis koko spritearkin bittikartta, kun taas *sprites[NUM_MAP_SPRITES] sisältää spritearkista poimitut yksittäiset spritet.

BITMAP *mapSpriteSheet;
BITMAP *mapSprites[NUM_MAP_SPRITES];

Muuta sitten DrawMap-funktioesittelyä niin, että sen argumentiksi jää ainoastaan int mapArrayIndex. Koska emme enää piirrä kenttää värikkäinä neliöinä, emme tarvitse jälkimmäistä argumenttia, jolla määritettiin piirrettävän neliön väri.

void DrawMap(int mapArrayIndex);

Luo vielä LoadMapSprites-funktioesittely.

int LoadMapSprites();

Main.c

Koska laitoimme map-taulukkomuuttujan alkioarvot uuteen uskoon, myös muuta koodia pitää muuttaa, jotta seinät, piikkiansat ja esineet käsitellään oikein.

Tee siis main.c-lähdekooditiedoston GetPositions-funktiomäärittelyyn seuraava muutos, jossa nollataan laskuri aina kun map-taulukkomuuttujan alkioarvon tyyppi vaihtuu joksikin toiseksi. Eli:

kasvatetaan laskuria kun mapArrayIndex-muuttujan arvo on 1–4 eli seinätiilet
kun saavutetaan mapArrayIndex-muuttujan arvo 5 eli ensimmäinen piikkiansa (mapArrayIndex == 5), nollataan laskuri (count = 0)
kun saavutetaan mapArray-muuttujan arvo on 7 eli kerättävä esine, nollaus tehdään taas.

Näin kaikki kolme erilaista spritetyyppiä kerätään omiksi sarjoikseen eikä niitä sekoiteta toisiinsa.

void GetPositions(int mapArrayIndex, struct Tile *positions, int *numPositions)
{
    int i, j;

    int count;

    if (mapArrayIndex == 1 || mapArrayIndex == 5 || mapArrayIndex == 7)
        count = 0;

    for (i = 0; i < MAP_HEIGHT; i++)
    {
        for (j = 0; j < MAP_WIDTH; j++)
        {
            if (currentMap[i][j] == mapArrayIndex)
            {
                positions[count].x1 = j * TILE_SIZE + tile.x1;
                positions[count].y1 = i * TILE_SIZE;
                positions[count].x2 = (j + 1) * TILE_SIZE + tile.x1;
                positions[count].y2 = (i + 1) * TILE_SIZE;

                positions[count].mapIndexX = j;
                positions[count].mapIndexY = i;

                count++;
            }
        }
    }

    *numPositions = count;
}

Tee sitten seuraava muutos DrawGame-funktiomäärittelyyn, jossa GetPositions-funktiokutsuilla haetaan sijainti map-taulukon alkioarvoille 1–7 sekä piirretään ne ruudulle DrawMap-funktiokutsuilla, joissa on nyt vain yksi parametri aiemman kahden sijaan.

void DrawGame()
{   
    clear_to_color(buffer, COLOR_GAME_BG);
        GetPositions(1, tilePositions, &numTilePositions);
    GetPositions(2, tilePositions, &numTilePositions);
    GetPositions(3, tilePositions, &numTilePositions);
    GetPositions(4, tilePositions, &numTilePositions);

    GetPositions(5, enemyPositions, &numEnemyPositions);
    GetPositions(6, enemyPositions, &numEnemyPositions);

    GetPositions(7, itemPositions, &numItemPositions);

    GetMapBounds();

    DrawMap(1);
    DrawMap(2);
    DrawMap(3);
    DrawMap(4);

    DrawMap(5);
    DrawMap(6);

    DrawMap(7); 
 
    if (player.isDead)
    {
        textout_centre_ex(buffer, font, TEXT_DEATH_01, SCREEN_W / 2, SCREEN_H / 2,
        makecol(255,255,255), makecol(255,0,0));
        textout_centre_ex(buffer, font, TEXT_DEATH_02, SCREEN_W / 2,
        SCREEN_H / 2 + 8, makecol(255,255,255), makecol(255,0,0));
    }
    else if (player.won)
    {
        DrawPlayer();

        textout_centre_ex(buffer, font, TEXT_WIN_01, SCREEN_W / 2, SCREEN_H / 2,
        makecol(255,255,255), makecol(0,0,255));
        textout_centre_ex(buffer, font, TEXT_WIN_02, SCREEN_W / 2, SCREEN_H / 2 + 8,
        makecol(255,255,255), makecol(0,0,255));
    }
    else
    {
        DrawPlayer();

        DrawHUD(); 
    }
}

Muuta sitten GetItems-funktiomäärittelyn currentMap[i][j]-tarkistuksen arvoksi 7 aiemman 3:n sijaan. Eli aina, kun currentMap-taulukosta löytyy alkioarvo 7, lisätään se kentästä löytyvien esineiden yhteismäärään.

void GetItems()
{
    int i, j, itemCount = 0;

    for (i = 0; i < MAP_HEIGHT; i++)
    {
        for (j = 0; j < MAP_WIDTH; j++)
        {
            if (currentMap[i][j] == 7)
            {
                itemCount++;
            }
        }
    }

    itemsInMap = itemCount;
}

Tee sama muutos myös CollectItems-funktiomäärittelyn Collided-tarkistukseen. Eli aina, kun pelaajahahmo törmää currentMap-taulukkomuuttujan alkioarvoon 7, kerätään pelaajan taskuun esine ja poistetaan se kentästä.

void CollectItems()
{
    if (Collided(&player, itemPositions, numItemPositions, &mapIndexX,
    &mapIndexY, 0, 0) && currentMap[mapIndexY][mapIndexX] == 7) 
    {
        currentMap[mapIndexY][mapIndexX] = 0;

        player.collectedItems++;

        if (player.collectedItems == itemsInMap)
        {
            player.won = 1;
        }
    }
}

Näin on tehty kaikki muutokset, jotka liittyvät kentän päivitettyihin alkioarvoihin.

Spritejen lataaminen bittikarttatiedostosta

Lisää main.c-lähdekooditiedostoon määrittely LoadMapSprites-funktiolle, jossa:

ladataan load_bitmap-funktiokutsulla tiles.bmp-bittikarttatiedosto mapSpriteSheet-muuttujan arvoksi
tarkistetaan, onnistuiko bittikarttatiedoston lataaminen; jos ei, tulostetaan virheilmoitus allegro_message-funktiokutsulla
luetaan mapSpriteSheet-muuttujaan ladatun bittikarttatiedoston sarakkeet (cols) ja rivit (rows) ja kerrotaan ne yhteen, jotta saadaan selville, kuinka paljon niitä on yhteensä (total)
lopuksi käydään mapSpriteSheet-muuttuja läpi ja "kerätään" sen yksittäiset bittikartat sprites[]-taulukkomuuttujan alkioarvoiksi create_sub_bitmap-funktiokutsun avulla.

int LoadMapSprites()
{
    mapSpriteSheet = load_bitmap("tiles.bmp", NULL);

    if (mapSpriteSheet == NULL)
    {
        set_gfx_mode(GFX_TEXT, 0, 0, 0, 0);
        allegro_message("Unable to load 'tiles.bmp'!\n%s\n", allegro_error);
        return -1;
    }

    int i;
    int cols = mapSpriteSheet->w / TILE_SIZE;
    int rows = mapSpriteSheet->h / TILE_SIZE;
    int total = cols * rows;

    for (i = 0; i < total; i++)
    {
        int x = (i % cols) * TILE_SIZE;
        int y = (i / cols) * TILE_SIZE;

        mapSprites[i] = create_sub_bitmap(mapSpriteSheet, x, y, TILE_SIZE, TILE_SIZE);
    }
}

Lisää sitten LoadMapSprites-funktiokutsu SetupProgram-funktiomäärittelyyn.

int SetupProgram()
{
    if (allegro_init() != 0)
        return 1;

    fade_out(FADE_DURATION);
    
    if (set_gfx_mode(GFX_AUTODETECT, SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0) != 0)
    {
        if (set_gfx_mode(GFX_SAFE, SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0) != 0)
        {
            set_gfx_mode(GFX_TEXT, 0, 0, 0, 0);
            
            allegro_message("Unable to set any graphic mode!\n%s\n", allegro_error);
            
            return 1;
        }
    }

    install_keyboard();

    install_int_ex(TimerHandler, BPS_TO_TIMER(60));
        
    LOCK_FUNCTION(TimerHandler);
        
    LOCK_VARIABLE(thCounter);

    LoadMapSprites();
    
    buffer = create_bitmap(SCREEN_WIDTH, SCREEN_HEIGHT);

    activeGameState = MENUSTATE;
    selectedMenuItem = NEW_GAME;

    allowStartupFadeIn = 1;

    return 0;
}

Lisää vielä Terminate-funktiomäärittelyyn mapSprites- ja mapSpriteSheet-bittikarttamuuttujien vapauttaminen muistista destroy_bitmap-funktiokutsun avulla.

void Terminate()
{
    int i;

    fade_out(FADE_DURATION);

    set_gfx_mode(GFX_TEXT, 0, 0, 0, 0);
    
    allegro_message(TEXT_ENDMESSAGE);
 
    for (i = 0; i < NUM_MAP_SPRITES; ++i)
    {
        destroy_bitmap(mapSprites[i]);
    }
 
    destroy_bitmap(mapSpriteSheet);

    allegro_exit();
}

Ja näin on spriten lataaminen toteutettu!

Spritejen piirtäminen

Tee DrawMap-funktiomäärittelyyn seuraava muutos, jossa aiempien rectfill-funktiokutsuilla piirrettyjen neliöiden sijaan piirretään nyt bittikarttaspritet funktiokutsulla draw_sprite.

Poista myös funktiomäärittelyn jälkimmäinen parametri int paletteIndex niin, että jäljelle jää vain int mapArrayIndex.

void DrawMap(int mapArrayIndex)
{
    int i, j;

    for (i = 0; i < MAP_HEIGHT; i++)
    {
        for (j = 0; j < MAP_WIDTH; j++)
        {
            if (currentMap[i][j] == mapArrayIndex)
            {
                draw_sprite(buffer, mapSprites[mapArrayIndex - 1], j * TILE_SIZE + tile.x1,
                i * TILE_SIZE);
            }
        }
    }
}

Ja näin. Suoraan sanottuna: vau. Aika huikea parannus aiempaan.

Huomaa myös tummempi taustan väri sekä timanttien väritykseen sopiva HUD.

DOSsittelua