Dienstag, 9 Feb, 2010
Lektion 6
Heute soll es um Spritesheets gehen. Nun was oll das denn sein? Ein Spritesheet ist ein Bild in dem mehrere Bilder sind. Aber warum das ganze? Nun stellt euch vor ihr habe viele Bilder in eurem Spiel, eigentlich müsstet ihr alle Bilder einzeln laden und blitten. Nutzt ihr Spritsheets braucht ihr nur ein Bild zu laden und entnehmt diesen die Teile die ihr braucht. Die Verwaltung von mehreren Bildern wird so wesentlich einfacher.
Ziel dieser Lektion wird sein Unsere drei Raumschiffe durch vier verschiedene zu ersetzen und das indem wir ein Spritesheet laden.
Das sind unsere Raunschiffe:
Aus diesen Bild schneiden wir uns nach dem Laden des Bildes nur das Stück raus was wir benötigen und bringen diesen Teil zur anzeige. Speichert also das neu Bild ab und verwendet es an Stelle des alten Raumschiffes, damit das ganze dann so aussieht:
Dafür brauchen wir eine zweidimensionale Struktur von SDL-Rec. Diese solle die Daten unserer Teilstücke enthalten, die wir dann beim Bliiten benötigen.
Wir deklarieren diese in Main:
//Enthält die Positionsdaten der einzelnen Bildteile SDL_Rect bildteile[ 4 ];
Als nächstes passen wir unsere Blittfunktion leicht an. Wir übergeben unserer Funktion einen weiteren Parameter und zwar den Bildteil, den wir zuvor deklariert haben.
void blit_obj( int x, int y, SDL_Surface* quelle, SDL_Surface* ziel, SDL_Rect* bildteil = NULL ) {
//Erzeugt ein temporäres Rechteck zur Positionierung der Quelle
SDL_Rect offset;
//Übergibt die Position an das SDL-Rechteck
offset.x = x;
offset.y = y;
Und als nächstes entfernen wir die Letzte noch unbekannte NULL in SDL_BlitSurface(). Es ist jetzt nicht schwer zu eraten, das dieser Parameter festlegt welcher Bereich in einem Bild geblittet werden soll.
//Bild blitten SDL_BlitSurface( source, bildteil, destination, &offset ); }
Der Nächste Arbeitsschritt bezieht sich wieder auf die Main(). Jetzt legen wir die Rechtecke nach der Datendeklaration fest. Dazu muss man noch wissen das unser Sritesheet 220Pixel Breit und Hoch ist. Das bedeutet das ein Raumschiff aus 110 x 110 Pixeln besteht.
//Raumschiff oben links bildteil[ 0 ].x = 0; bildteil[ 0 ].y = 0; bildteil[ 0 ].w = 110; bildteil[ 0 ].h = 110; //Raumschiff oben rechts bildteil[ 1 ].x = 110; bildteil[ 1 ].y = 0; bildteil[ 1 ].w = 110; bildteil[ 1 ].h = 110; //Raumschiff unten links bildteil[ 2 ].x = 0; bildteil[ 2 ].y = 110; bildteil[ 2 ].w = 110; bildteil[ 2 ].h = 110; //Raumschiff unten rechts bildteil[ 3 ].x = 110; bildteil[ 3 ].y = 110; bildteil[ 3 ].w = 110; bildteil[ 3 ].h = 110;
Jetzt bleibt nur noch unsere Blitting Funktionsaufruf anzupassen (ein Raumschiff lassen wir mal weg ;-)):
// Raumschiffe blitten blit_obj( 350,150, raumschiff, fenster, &bildteil[0] ); blit_obj( 250,250, raumschiff, fenster, &bildteil[1] ); blit_obj( 450,250, raumschiff, fenster, &bildteil[3] );
So und das wars schon wieder. Hie nochmal der gesamte Quellcode: