การพัฒนาเกมด้วย SDL บทที่ 1: โหลดภาพ และ ทดสอบพื้นผิว

หลังจากที่เรารู็วิธีการ ตั้งค่า Environment ของอุปกรณ์ที่จะช่วยพัฒนาเกม อย่าง SDL และ Dev C++ ในบทความ เส้นทางการเป็นนักพัฒนาเกม: ติดตั้ง DevC++ และ SDL เพื่อพัฒนาเกม ไปแล้วครั้งนี้เราก็จะเริ่มต้นเขียนโปรแกรมเรียกใช้งาน รูปภาพจาก ไฟล์มาโชว์ และ ใช้วิธีการวางภาพ วัตถุให้อยู่บน ภาพแบล็คกราวน์ (Backgroud and Sprite) ซึ่งหากทำไปแล้วจะ Compile โปรแกรมออกมาได้ดังรูปภาพตัวอย่างของบทความ

มาเริ่มกันเลยดีกว่าก่อนอื่นนะครับ เราต้องทำการ Copy ไฟล์ SDL.dll ใน Folder ของ Library SDL ที่เราวางไว้ในเครื่องซะก่อน ซึ่งเครื่องผมผมวางโฟลเดอร์ SDL ไ้ว้ที่

C:SDLSDL-1.2.14bin

ทำการ Copy File ดังภาพด้านล่าง

สร้างโฟลเดอร์ใหม่ที่ เครื่องคุณที่คุณต้องการเป็น โฟลเดอร์เกมของคุณ แล้ว ทำการวางไฟล์ SDl.dll ลงไป เพื่อเวลาที่ compile แล้วโปรแกรมจะเรียกใช้ได้ทันที

เปิด DevC++ ขึ้นมาแล้วทำการ New และสร้าง Empty Project

Add new file โปรแกรมชื่อ game.cpp

เริ่มเขียน Code C++ ลงไปในไฟล์นี้ โดยเรียกไฟล์รูปภาพ ตัวอย่าง สร้างโฟลเดอร์เก็บไล์รูปภาพ Background และ Sprite ไว้ชื่อ images
โหลดรูปภาพนี้จากเว็บ ไปที่โฟล์เดอร์ images ครับ

• https://www.daydev.com/images/stories/sdl-lesson1/background.bmp
• https://www.daydev.com/images/stories/sdl-lesson1/pikachu.bmp

//Credit: Lazy Foo
#include "SDL/SDL.h"
#include <string>

//The attributes of the screen
const int SCREEN_WIDTH = 800;
const int SCREEN_HEIGHT = 600;
const int SCREEN_BPP = 32;

//The surfaces that will be used
SDL_Surface *message = NULL;
SDL_Surface *background = NULL;
SDL_Surface *screen = NULL;

SDL_Surface *load_image( std::string filename )
{
    //Temporary storage for the image that's loaded
    SDL_Surface* loadedImage = NULL;

    //The optimized image that will be used
    SDL_Surface* optimizedImage = NULL;

    //Load the image
    loadedImage = SDL_LoadBMP( filename.c_str() );

    //If nothing went wrong in loading the image
    if( loadedImage != NULL )
    {
        //Create an optimized image
        optimizedImage = SDL_DisplayFormat( loadedImage );

        //Free the old image
        SDL_FreeSurface( loadedImage );
    }

    //Return the optimized image
    return optimizedImage;
}

void apply_surface( int x, int y, SDL_Surface* source, SDL_Surface* destination )
{
    //Make a temporary rectangle to hold the offsets
    SDL_Rect offset;

    //Give the offsets to the rectangle
    offset.x = x;
    offset.y = y;

    //Blit the surface
    SDL_BlitSurface( source, NULL, destination, &offset );
}

int main( int argc, char* args[] )
{
    //Initialize all SDL subsystems
    if( SDL_Init( SDL_INIT_EVERYTHING ) == -1 )
    {
        return 1;
    }

    //Set up the screen
    screen = SDL_SetVideoMode( SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_BPP, SDL_SWSURFACE );

    //If there was an error in setting up the screen
    if( screen == NULL )
    {
        return 1;
    }

    //Set the window caption
    SDL_WM_SetCaption( "Hello World", NULL );

    //Load the images
    message = load_image( "images/pikachu.bmp" );
    background = load_image( "images/background.bmp" );

    //Apply the background to the screen
    apply_surface( 0, 0, background, screen );
    apply_surface( 800, 0, background, screen );
    apply_surface( 0, 600, background, screen );
    apply_surface( 800, 600, background, screen );

    //Apply the pikachu to the screen
    apply_surface( 180, 140, message, screen );

    //Update the screen
    if( SDL_Flip( screen ) == -1 )
    {
        return 1;
    }

    //Wait 5 seconds
    SDL_Delay( 5000 );

    //Free the surfaces
    SDL_FreeSurface( message );
    SDL_FreeSurface( background );

    //Quit SDL
    SDL_Quit();

    return 0;
}

ทำการ Compile ดูครับ แล้วจะได้แบบที่ เห็นในตัวอย่าง

พิจารณา

//Apply the pikachu to the screen
    apply_surface( 180, 140, message, screen );

จะเห็นว่า ระบุแก้ไข 180 และ 140 นั่นคือระยะของแกน X และ Y ของตัว การ์ตูน หรือ Sprite ครับ

หรือตัวอย่าง Source Code สามารถดาวน์โหลดที่นี่

https://www.daydev.com/download/lesson1.rar