Programmera spel i C++ för nybörjare/Animationsteori


Animationsteori redigera

Denna text gäller inte bara för SFML utan för spelprogrammering i allmänhet.

Rörelser och animationer redigera

Du måste skilja på rörelse och animation. Det ena utesluter inte det andra, men de skall behandlas på två olika sätt. Rörelse är enkelt i spelvärlden. En rörelse är när något rör på sig. Du kan t.ex. ha en bild på en tennisboll som rör sig när den träffas av ett racket som rör sig upp och ner i spelet. Rörelsen är inte en animation.

En animation är när en spelpjäs/sprite byter bild med ett fast tidsintervall. Vanligtvis 60 gånger i sekunden. I exemplet med boll och racket har racketen en enda bild och bollen har också en enda bild. En sprite med en animation kan däremot stå helt stilla samtidigt som animationen pågår. Tänk dig ett hus där rök kommer ur en skorsten. Huset står stilla, det gör faktiskt ingenting alls mer än att det har rök som bolmar upp som är animerad.

Vanligtvis har man en kombination av rörelse och animation eftersom vi människor helt enkelt tycker att det är roligare att se något som är animerat. Det går dock att göra spel helt utan animationer med bara rörelser, vilket är enklast. Tänk dig t.ex. att du gör ett racerbil spel där man ser bilarna uppifrån. Då behöver inte bilarna vara animerade, de kan röra sig ändå.

Enklast möjliga animation i SFML redigera

Enklast möjliga animation, två bildrutor som laddas in från varsin bildfil som alternerar, med kod från SFML. I det här enklaste fallet används inga sprite sheets:

sf::Clock Clock; //En spelklocka för att hålla reda på just den här animationen
                //Du måste ha en klocka för varje sprite med animation i spelet

sf::Image player1;//Hjälte bild 1 i animationen - storlek 32x32
sf::Image player2;//Hjälte bild 2 i animationen

sf::Sprite sprite; //Spriten med vår hjälte

player1.LoadFromFile("bildfil1.png"); //Bild ett i animationen
player2.LoadFromFile("bildfil2.png"); //Bild två i animationen

if ((Clock.GetElapsedTime() > 0.0) && (Clock.GetElapsedTime() < 0.1)) sprite.SetImage(player1);
if ((Clock.GetElapsedTime() > 0.1) && (Clock.GetElapsedTime() < 0.2)) sprite.SetImage(player2);
if (Clock.GetElapsedTime() > 0.2) Clock.Reset();
// Om den tid som gått är större än 0 och mindre än 0.1 sekund visas bild 1.
// Om den tid som gått är större än 0.1 och mindre än 0.2 sekunder visas bild 2.
// Loopen skapas genom att återgå till bild 1 om tiden som passerat är längre än 0.2 sekunder.

Sprite sheet redigera

 

Visserligen kan man skapa en bild för varje bildruta i animeringen och ladda in alla dessa hundratals bilder i datorns minne vid programstart, men det är ett slöseri på resurser och spelarens tid och lämpar sig bara för extremt enkla animeringar. Ett exempel är spelet ”Pac man” där huvudfigurens mun bara består av två bilder (öppen och stängd) och spökenas ögon består av två bilder (sneglar vänster och sneglar höger). Istället brukar man använda något som kallas ”sprite sheet”. Det är en enda stor bildkarta som innehåller småbilder som representerar alla olika animationsbilder som man kan behöva, beroende på spel. Vanligtvis har alla bilder exakt samma storlek, och du kan göra det till en vana själv att göra så om du skapar egna sprite sheets. Då räcker det med att du vet var vänster överhörn finns på den bild du vill ha på sprite sheeten för att matematiskt kunna räkna ut var de andra tre hörnen finns. Om bilderna däremot har olika storlek måste du alltid ange samtliga fyra hörns positioner vilket blir omständligt i onödan.

En annan god vana är att alltid ha en rörelse på en bildrad. ”Gå uppåt” = alla bilderna på en rad, liksom ”Skjut vänster” = alla bilderna på en rad. Om du låter bilderna till animationen gå över mer än en rad blir det genast mer komplicerat att beräkna. Ibland måste man göra så ändå, en explosion blir t.ex. väldigt futtig om man bara har ett fåtal bilder som visar upp den.


Anta att du har en "sprite sheet", dvs. en karta med bilder där man visar flera bilder från samma karta. Man måste fortfarande ha en sprite, en klocka och en bild, men nu är det en hel bildkarta. Anta att du har fyra bilder i rad på en spriteshet där alla bilder har 32 i bildhöjd och hela sheetens bredd är 128, dvs. 32 breda. Vill man då att den första bilden skall visas skriver man:

sprite.SetSubRect(sf::IntRect(0,0,32,32)); 

Vad är siffrorna i parentesen? Det två första siffrorna = x,y koordinaterna för övre vänstra hörnet (0,0 här i exemplet) och de två andra siffrorna är koordinater för det nedre högra hörnet i den bildruta du vill ge spriten (32,32 här i exemplet).

Kod redigera

sf::Clock Clock; //En spelklocka för att hålla reda på just den här animationen
                //Du måste ha en klocka för varje sprite med animation i spelet

sf::Image player1;//Hjälte i animationen, bildhållare
player1.LoadFromFile("bildfil1.png"); //Bildfil med många bilder på samma: sprite sheet
                                     // - storlek =  4 bilder i rad 32x32
sf::Sprite sprite; //Spriten med vår hjälte
sprite.SetImage(player1); // Ge hela bildkartan som bild till spriten

if ((Clock.GetElapsedTime() > 0.0) && (Clock.GetElapsedTime() < 0.1)) 
sprite.SetSubRect(sf::IntRect(0,0,32,32)); //Visa  bild 1 i serien

if ((Clock.GetElapsedTime() > 0.1) && (Clock.GetElapsedTime() < 0.2)) 
sprite.SetSubRect(sf::IntRect(32,0,64,32)); //Visa  bild 2 i serien

if ((Clock.GetElapsedTime() > 0.2) && (Clock.GetElapsedTime() < 0.3)) 
sprite.SetSubRect(sf::IntRect(64,0,96,32)); //Visa  bild 3 i serien

if ((Clock.GetElapsedTime() > 0.3) && (Clock.GetElapsedTime() < 0.4)) 
sprite.SetSubRect(sf::IntRect(96,0,128,32)); //Visa  bild 4 i serien

if (Clock.GetElapsedTime() > 0.4) Clock.Reset();
//Mer än så hamnar klockan på 0 igen.

Funktion redigera

Att göra så här för varje animerad sak i hela spelet blir naturligtvis väldigt stökigt. Det är bättre att ha en funktion som tar utt x- och y- koordinaterna i animationen. Det räcker med att du vet det övre vänstra hörnets koordinater om bilderna är kvadratiska. Den kan se ut så här:

int vaeljXellerY(float starttid, float tidnu, int bildstorlek, int XellerY)
{ 
float animationshastighet = 0.5f; //Hur snabbt skall bilderna växlas?
float elapsedtime = tidnu - starttid; //Hur lång tid har gått från animationsstarten?

if ((elapsedtime  > 0.0) && (elapsedtime  < animationshastighet )) 
{ //bild 1, koordinater för övre vänstra hörnet
x = 0;
y = 0;
}

if ((elapsedtime > animationshastighet ) && (elapsedtime   < animationshastighet * 2)) 
{ //bild 2, koordinater för övre vänstra hörnet en bild in
x = bildstorlek;
y = 0;
}

if ((elapsedtime  > animationshastighet * 2) && (elapsedtime < animationshastighet * 3)) 
{ //bild 3, koordinater för övre vänstra hörnet två bilder in
x = bildstorlek * 2;
y = 0;
}

if ((elapsedtime  > animationshastighet * 3) && (elapsedtime < animationshastighet * 4)) 
{ //bild 4, koordinater för övre vänstra hörnet tre bilder in
x = bildstorlek * 3;
y = 0;
}

if (XellerY == 1)
//om en är 1 får vi tillbaka x koordinaten, annars får vi y koordinaten
return x;
else
return y;

}

Om vi vill få fram en speciell bild i spritesheeten så använder vi koden:

int x = 0;
int y = 0;
x = vaeljXellerY(starttid, tidnu, 32, 1);
y = vaeljXellerY(starttid, tidnu, 32, 2);
sprite.SetSubRect(sf::IntRect(x,y,x+32,y+32)); //Visa  bild i serien

Bool och enum redigera

Vi måste tala om för spelet att vi bara visar en enda sorts animation. För att få det att fungera kan man använda sig av sk. ”Enumerated states” eller boolska värden som bara kan vara sant eller falskt. T.ex. initieringskoden här nedanför:

bool left, right, up, down; //Fyra olika riktningar att gå
left = right = up = down = false; //Avgör om animationen skall visas eller inte 

Vi hade lika gärna kunnat skriva:

bool Walk_Left, Walk_Right, Walk_Up, Walk_Down //Fyra olika riktningar att gå

Om man har en animation för att gå som piltangenterna på tangentbordet är det här ett enkelt men effektivt sätt att inte köra två olika animationer samtidigt. När man t.ex. vill att animationen skall gå uppåt anger man:

up = true; //Figurens animation för att gå uppåt kan visas 
left = right = down = false; //De andra riktningarna blir falska

Poängen är dock att du måste ha en ”state” för varje sorts animation du vill visa. Om du t.ex. har en spelare som är en japansk ninja måste du dessutom ha: hopp, stöta med svärd, svinga svärd, slå med knuten näve, slå med öppen näve, framåtspark, sidospark osv.

Ett annat sätt är att redan i förväg definiera vilken ”state” man kan ha spelaren i:

enum player_state { 
       standstill,
       dead,
       walk_up,
       walk_right, 
       walk_down, 
       walk_left,
       hiding, 
       shoot_up
       shoot_right, 
       shoot_down, 
       shoot_left,
};

Egentligen är dessa ”states” samma som en lista med siffror som börjar på 0 och det är fullt möjligt att både göra beräkningar och jämförelser där man antar att de är int/heltal istället. Genom att ange olika ”states” kan man också ange spelarens hastighet beroende på vilken ”state” den har. Man kan t.ex. anta att om spelaren stillastående eller död är farten 0. Antagligen om den skjuter också. Om den går har den normal fart och om den gömmer sig har den halv fart.

Mardrömmen redigera

Sådana här states kan lätt bli en mardröm för den som gör grafiken. Ta bara exemplet skjuta. Man kan gå och skjuta, stå och skjuta, springa och skjuta, hoppa och skjuta, stå på knä och skjuta, ligga och skjuta. Samtliga dessa states skall också ha fyra olika riktningar med säg fem bilder i varje i varje animation. 5*4=20 bilder per state och 6 states =120 bilder, för en enda figur i spelet. Det finns en anledning till att man i spelet Quake2 hoppade över animationen springa+skjuta och alla som sprang och sköt rörde sig som om de stod på skateboards i full fart när de sköt.

Bildrutor redigera

Om du vet vilka ”states” en figur kan ha kan du också definiera vilka rutor som skall visas i ditt ”sprite sheet”. Är det ”standstill”/stillastående kanske det är en enda ruta, eller två rutor där kroppen är stilla men huvudet rör sig fram och tillbaka. Ibland skall den ”loopa”, dvs. att samma sekvens av bildrutor visas om och om igen. Det är vanligt när en figur springer eller går. I andra sammanhang skall animationen bara visas en enda gång, t.ex. om det är en explosion eller om figuren skjuter ett enda skott med ett vapen.

X,Y koordinater redigera

När man skall lista ut vilken bildruta du skall ha räcker det som sagt med att du vet koordinaten för det övre vänstra hörnet, om bildstorleken är känd. Anta att du har fem bildrutor i rad som visar en animation och alla bilder är 32x32 pixels stora. Då vet du att Y hela tiden är 0 eftersom bildens överkant = 0. Du vet också att X koordinaterna blir:

  • 0 för första bilden
  • 32 för andra bilden
  • 64 för tredje bilden
  • 96 för fjärde bilden
  • 128 för femte bilden.

Om du vill visa bilderna i en annan ordning får du ha t.ex. ha en array med integers och mata den med {1,3,2,5,4} om du skall visa animationen i den ordningen. Då blir X-koordinaterna 0*32, 2*32, 1*32, 4*32 och 3*32 eftersom man börjar att räkna med 0. Att ha alla bilder lika stora och i en enda rad för en animation underlättar ditt liv som programmerare en hel del, främst för att du kan ta ut X-koordinatens värde ur en enkel funktion (du kommer väl ihåg att funktioner bara kan returnera ett enda värde) och Y-koordinaten inte ändras.

Animation med många bildrader redigera

Om du har mer än en bildrad i ditt spritesheet måste du ha någon form av kontroll när man kommit till radslutet. Anta att du har en animation på två rader, då får du tänka: "När X== 128 blir Y=32 och X återställs till 0 igen" i pseudokod.

Loop redigera

En animation baserad på tid har en starttid, från den ser man hur lång tid som gått och visar upp rätt bild i animationen utifrån den tid som passerat. Anta att man visar tio bilder i sekunden. Då skulle samtliga bilder ur exemplet ovanför visas färdigt på en sekund. Men hur gör man om man vill visa samma animation en gång till? Då resettar man starttiden till 0. Det är inte svårare än så.

Kodexempel med enkel animation redigera

  • Du måste ha en bild på en ko som heter cow.png
  • Du måste ha två bilder som heter hero.png och hero2.png som skall alterneras för att skapa en enkel animation.
  • Om du kommenterar bort klockan, sätt kod mellan /* och */, kan du pröva hero och hero2 animationerna med tangenterna A och S.
#include <iostream>
#include <SFML\System.hpp>
#include <SFML\Graphics.hpp>
#include <SFML\Window.hpp>

int main() 
   {  //Början av programkörningen

    float  SpriteX=0.0, ko1X = 0.0; //X positioner för pojke och ko
    float  SpriteY=0.0, ko1Y = 0.0; //Y positioner för pojke och ko

   sf::RenderWindow App(sf::VideoMode(800, 600, 32), "SFML grafiktest"); 
  // Skapa fönstret vi skall visa färgerna i
 
   float ElapsedTime = App.GetFrameTime(); //Skapar en konstant för att hålla hastigheten 
   likvärdig på olika datorer

    sf::Clock Clock; //En spelklocka för att hålla reda på just den här animationen
               //Du måste ha en klocka för varje sprite med animation i spelet

    sf::Image player1;//Hjälte bild 1 i animationen - storlek 32x32
    sf::Image player2;//Hjälte bild 2 i animationen

    sf::Sprite sprite; //Spriten med vår hjälte

 if (!player1.LoadFromFile("hero.png")) return EXIT_FAILURE; 
    //fyll den tomma bildhållaren med bilden hero.png
 if (!player2.LoadFromFile("hero2.png")) return EXIT_FAILURE; 
    //fyll den tomma bildhållaren med bilden hero2.png

//bilden är  en 32x32 .png jag hittade ute på Internet med en googlesökning 
        sf::Sprite Sprite(player1); //Skapar den grafiska spelpjäsen Sprite med grafiken från Image
        Sprite.SetPosition(200.f, 100.f); //Placera ut bilden

          
        /*Skapa en ko--*/

        sf::Image kobild; //skapa en tom bildhållare som heter Image
        if (!kobild.LoadFromFile("cow.png")) return EXIT_FAILURE; 
            //fyll den tomma bildhållaren med bilden cow.png
        sf::Sprite ko1(kobild); //Skapar den grafiska spelpjäsen Sprite med grafiken från Image
        ko1.SetPosition(400.f, 100.f); //Placera ut bilden på kon 
             //bilden är  en 32x32 .png jag hittade ute på   
             //  Internet med en googlesökning
       /* slut på skapa ko */

        while (App.IsOpened())  // Start spel-loopen
      {  //while 1
         sf::Event Event; 

            while (App.GetEvent(Event)) // Ta hand om händelser 
            { //while 2

              if (Event.Type == sf::Event::Closed) //kryssat på [x] symbolen? stäng programmet
              App.Close(); 

               if (Event.Type == sf::Event::KeyPressed) // En tangent har tryckts ner
                { //if 1

                if (Event.Key.Code == sf::Key::Escape) // ESC tangenten = stäng programmet
                App.Close(); 

                //Testa bild genom att trycka ner en tangent
                if (Event.Key.Code == sf::Key::A) // Visa bild 1
		 Sprite.SetImage(player1);

		 if (Event.Key.Code == sf::Key::S) //Visa bild 2
		 Sprite.SetImage(player2);
                } //slut if 1

              } //slut, while 2

      ElapsedTime = App.GetFrameTime(); //för att få en konstant hastighet på olika datorer

     if (App.GetInput().IsKeyDown(sf::Key::Left)) 
     Sprite.Move(-100 * ElapsedTime, 0); //pojke 
        //Om man trycker ner vänster piltangent går figuren 100 "steg" 
        // längre åt vänster än vad den var tidigare.
               
     if (App.GetInput().IsKeyDown(sf::Key::Right)) 
     Sprite.Move( 100 * ElapsedTime, 0); 
                                          
     if (App.GetInput().IsKeyDown(sf::Key::Up)) 
     Sprite.Move(0, -100 * ElapsedTime); 
                                         
     if (App.GetInput().IsKeyDown(sf::Key::Down)) 
     Sprite.Move(0, 100 * ElapsedTime); 
                                           
//Räkna ut hur kon jagar hjälten
  SpriteX= Sprite.GetPosition().x; // Pojkens xposition, kan användas som AI
  ko1X= ko1.GetPosition().x; // kons xposition, kan användas som AI 

  SpriteY= Sprite.GetPosition().y; // Pojkens yposition, kan användas som AI
  ko1Y= ko1.GetPosition().y; // kons yposition, kan användas som AI

  if (ko1X <= SpriteX) //pojken har sprungit förbi kon
  ko1.Move( 50 * ElapsedTime, 0); 

  if (ko1X > SpriteX) //pojken har inte sprungit förbi kon
  ko1.Move( -50 * ElapsedTime, 0); 

  if (ko1Y > SpriteY ) //kon är nedanför pojken
  ko1.Move(0, -50 * ElapsedTime);

  if (ko1Y <= SpriteY ) //kon är ovanför pojken
  ko1.Move(0, 50 * ElapsedTime); 

 //Ta fram rät bildruta av två möjliga
if ((Clock.GetElapsedTime() > 0.0) && (Clock.GetElapsedTime() < 0.1)) Sprite.SetImage(player1);
if ((Clock.GetElapsedTime() > 0.1) && (Clock.GetElapsedTime() < 0.2)) Sprite.SetImage(player2);
if (Clock.GetElapsedTime() > 0.2) Clock.Reset();
   //Måste kommenteras bort om man skall testa bildrutorna

App.Clear(sf::Color(0, 255, 0)); //rensa allt i fönstret och ersätt med grönfärg
App.Draw(Sprite); //Rita upp figuren på den yta spelaren ser
App.Draw(ko1); //Rita upp kon på den yta spelaren ser
App.Display(); //visa upp ändringarna för användaren

} //slut, while 1

return 0;
} //slut på programkörningen