Tuesday, January 11, 2011

Code::Blocks(7) RPG 1

Hello again!

After writing the first tutorial i have realized that the post got too big, so in that tutorial i will split it into smaller posts, making it easier to follow.

I'm going to start modifying the functions "SetVga" and "LoadTileset", the objectives are simples:
  • We want the "SetVga" function to set any graphic mode and Full Screen/windowed mode.
  • The function "LoadTileset" should get the path to the file we want to load instead of having it "Hard Coded" inside the Engine class.
So let's create a new project called "rpg" , then we have to add again 3 files: engine.h, engine.cpp and rpg.cpp, then we have to copy the contents of the engine class from the previous tutorial (copy+paste) and save the project.

Now we have to open engine.h and change:
void SetVga(); //Set the video mode 
To:
void SetVga(Uint16 Width, Uint16 Height, Uint8 BPP,bool FullScreen); //Set the video mode 
SetVga now accepts 4 parameters:
  1. Width of the desired video mode
  2. Height of the desired video mode
  3. BPP:Color depth 8bits, 16bits, 32bits...
  4. FullScreen: true to make it fullscreen, false to start a windowed mode

Then change:
void LoadTileset(); //loads a test tileset
To:
void LoadTileset(char *File); //loads a test tileset
Notice that we only add the parameter "File".

Save the file and open engine.cpp

Now we have to replace
void Engine::SetVga() // set video mode
{
screen = SDL_SetVideoMode(ScreenX, ScreenY, bpp,SDL_SWSURFACE|SDL_DOUBLEBUF);
/* It will set up a windowed video mode (width=screenx, height = screeny, bpp = bpp)
if we want to use a fullscreen mode we have to add
"|SDL_FULLSCREEN" after SDL_DOUBLEBUF  */
}
To:
void Engine::SetVga(Uint16 Width, Uint16 Height, Uint8 BPP,bool FullScreen) // set video mode
{
ScreenX = Width;
ScreenY = Height;
bpp = BPP;
if(FullScreen==true)
    {
        screen = SDL_SetVideoMode(ScreenX, ScreenY, bpp,SDL_SWSURFACE|SDL_DOUBLEBUF|SDL_FULLSCREEN);
    }else{
        screen = SDL_SetVideoMode(ScreenX, ScreenY, bpp,SDL_SWSURFACE|SDL_DOUBLEBUF);
// It will set up a windowed video mode (width=screenx, height = screeny, bpp = bpp)
    }
}
Before, the engine used the default parameters initialized when we create the Engine class, after we can set any video mode.

Then replace:
void Engine::LoadTileset() //loads an image into a memory (tileset), assigns the colorkey
{
    SDL_Surface* TmpSurface = NULL; //Temporary surface for loading
    TmpSurface = IMG_Load( "tileset.png"); //Load the image into a temporary surface
    if( TmpSurface != NULL )
    {
        tileset= SDL_DisplayFormat( TmpSurface );//optimize surface
        SDL_FreeSurface( TmpSurface); //free temporary surface
    }
    SDL_SetColorKey(tileset,SDL_SRCCOLORKEY | SDL_RLEACCEL,SDL_MapRGB(screen -> format, 255, 0, 255)); //set the color key
}
To:
void Engine::LoadTileset(char *File) //loads an image into a memory (tileset), assigns the colorkey
{
    SDL_Surface* TmpSurface = NULL; //Temporary surface for loading
    TmpSurface = IMG_Load(File); //Load the image into a temporary surface
    if( TmpSurface != NULL )
    {
        tileset= SDL_DisplayFormat( TmpSurface );//optimize surface
        SDL_FreeSurface( TmpSurface); //free temporary surface
    }
    SDL_SetColorKey(tileset,SDL_SRCCOLORKEY | SDL_RLEACCEL,SDL_MapRGB(screen -> format, 255, 0, 255)); //set the color key
}
We can now load any file.

Enough for now, in the next post I'll talk more about tilesets and multi-layered maps..

Monday, January 10, 2011

Code::Blocks(6) C++, SDL and Life, Putting all together

Now we have the project ready to compile, just press the "Build and run" project.



If we have configured properly Code::Blocks, installed the libraries and copied the file tileset.png on the same folder we should get that screen:


Finally we made it run! with the left mouse button  we can add more cells to the map and with the right mouse button we pause /continue the game.

Obviously the project is very simple:
(The italic comments are things we are going to change in the following tutorials to upgrade the program)
  • Initialize an instance of the (simple) engine class
  • Set the graphics mode 800x600x32bpp (Set any graphics mode and Full Screen /Windowed mode)
  • Load the tileset image(Load any tileset image)
  • Define an array to store the cells(Load a world map)
  • Process input > cell logic > Drawing
  • The drawing process has those steps:
  1. Fill the backuffer with a colour (clear screen)
  2. Draw the cells (cellmap array)
  3. Draw the mouse
  4. Flip backbuffer to the screen
You can download the complete code::block project including the tileset.png file in the new "Downloads" page in the blog.

If you have read the code from the tutorials, and the previous posts now you should be able to create a new project with code::blocks and you should have an idea about using the sdl library: Initializing a graphic mode, loading images to surfaces, blitting those surfaces to the screen..

I don't want to get deeper into those topics because other people have already made very good tutorials about that (links in the sidebar), what i really want is to play with the pieces that will build later the game , we should have learned how to build a map with an array and how to draw the map on the screen.

In the next tutorial we will go a step beyond: Draw our "hero" on the screen in a multi-layered map using keyboard to move it, controlling the obstacles in the terrain, and drawing stats on the screen (drawing), now it should look like a top-down rpg.

Feel free to play with the Life Game code before starting with the next tutorial: Change screen resolution, activate the intermediate state drawing on the screen, use bigger maps... the best way to learn is to play with the code.


Bye