Change the image of sdl window with a new one

Question

I will make a game and it has 3 buttons on its menu. Those buttons supposed to change the picture the background of the menu

When i click on play, another picture should appear like so

I found a solution which is closing the current program and starting another one that has the comming soon picture but what i would like to do is to only change the picture without the need to close the program and start another one , Here is my code for the menu screen:

#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>

  int continuer=1;
  SDL_Event event;

int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *imageDeFond = NULL, *sapin = NULL;
    int continuer=1;
    SDL_Event event;
    SDL_Rect positionFond,positionSapin;

    positionSapin.x = 0;
    positionSapin.y = 0;
    positionFond.x = 0;
    positionFond.y = 0;

    SDL_Init(SDL_INIT_VIDEO);

    ecran = SDL_SetVideoMode(800, 600, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Chargement d'images en SDL", NULL);

    /* Chargement d'une image Bitmap dans une surface */
    imageDeFond = SDL_LoadBMP("menu.bmp");
    /* On blitte par-dessus l'écran */
    SDL_BlitSurface(imageDeFond, NULL, ecran, &positionFond);

    SDL_Flip(ecran);
    SDL_FreeSurface(imageDeFond);


    while(continuer)
 { SDL_WaitEvent(&event);
   switch(event.type)
   {      
       case SDL_QUIT:
        continuer=0;
       break ;
       case SDL_KEYDOWN: 

     switch (event.key.keysym.sym)

      {

          case SDLK_ESCAPE:  

              continuer=0;

          break;

       }

      break;
    case SDL_MOUSEBUTTONUP:
       if (event.button.button == SDL_BUTTON_LEFT)
        {
            positionFond.x = event.button.x;

            positionFond.y = event.button.y;
             if (event.button.x> 150 && event.button.x < 320 && event.button.y > 340 && event.button.y < 415 )
              { 
               continuer = 0;
              }
              else if (event.button.x> 150 && event.button.x < 320 && event.button.y > 105 && event.button.y < 180 )
                  {
                     continuer=0;
                      SDL_Quit();
                    int status = system("./cs");

                    }

        } 

     break ;

  } 
   } 

    SDL_Quit();

    return EXIT_SUCCESS;
}

Here is my second code when i click on the play button:

#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>

  int continuer=1;
  SDL_Event event;

int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *imageDeFond = NULL, *sapin = NULL;
    int continuer=1;
    SDL_Event event;
    SDL_Rect positionFond,positionSapin;

    positionSapin.x = 0;
    positionSapin.y = 0;
    positionFond.x = 0;
    positionFond.y = 0;

    SDL_Init(SDL_INIT_VIDEO);

    ecran = SDL_SetVideoMode(800, 600, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Chargement d'images en SDL", NULL);

    /* Chargement d'une image Bitmap dans une surface */
    imageDeFond = SDL_LoadBMP("menujouer.bmp");
    /* On blitte par-dessus l'écran */
    SDL_BlitSurface(imageDeFond, NULL, ecran, &positionFond);

    SDL_Flip(ecran);
    SDL_FreeSurface(imageDeFond);


    while(continuer)
 { SDL_WaitEvent(&event);
   switch(event.type)
   {      
       case SDL_QUIT:
        continuer=0;
       break ;
       case SDL_KEYDOWN: 

     switch (event.key.keysym.sym)

      {

          case SDLK_ESCAPE:  

              continuer=0;
                SDL_Quit();
           int status = system("./menu");

          break;

       }
 } 
   } 

    SDL_Quit();

    return EXIT_SUCCESS;
}

Is there any solution to make it in the same program without closing and reopning an other program because when i tried it the problem was the buttons of the first picture(menu image) was still active so when i click on the zone of quit it closes the program even though the menu image is hidden under the second.

Answer 1

You will need to have the program keep track of which screen it is on and respond differently depending on the screen. You can do this similarly to the way your programs are keeping track of whether they should stop running or not, with the continuer variable.

So you can add another variable. I will call it screen_number but you can call it whatever you like in your code.

First we set it to 1.

   int screen_number = 1;

   int continuer=1;

Then when we respond to mouse clicks, we make it so that we only do that if screen_number is 1. That is we replace this:

case SDL_MOUSEBUTTONUP:
       if (event.button.button == SDL_BUTTON_LEFT)
        {
            positionFond.x = event.button.x;

            positionFond.y = event.button.y;
             if (event.button.x> 150 && event.button.x < 320 && event.button.y > 340 && event.button.y < 415 )
              { 
               continuer = 0;
              }
              else if (event.button.x> 150 && event.button.x < 320 && event.button.y > 105 && event.button.y < 180 )
                  {
                     continuer=0;
                      SDL_Quit();
                    int status = system("./cs");

                    }

        } 

     break ;

with something like this:

case SDL_MOUSEBUTTONUP:
    if (screen_number == 1) {
       if (event.button.button == SDL_BUTTON_LEFT)
        {
            positionFond.x = event.button.x;

            positionFond.y = event.button.y;
             if (event.button.x> 150 && event.button.x < 320 && event.button.y > 340 && event.button.y < 415 )
              { 
               continuer = 0;
              }
              else if (event.button.x> 150 && event.button.x < 320 && event.button.y > 105 && event.button.y < 180 )
                  {
                     continuer=0;
                      SDL_Quit();
                    int status = system("./cs");

                    }

        } 
    }
     break ;

Then when we switch to the other screen, we set the screen_number to 2.

  if (event.button.x> 150 && event.button.x < 320 && event.button.y > 340 && event.button.y < 415 )
  { 
    screen_number = 2;
  }

So now if you click on the button it will only work once and the quit button will do nothing since the screen_number is 2.

Now, in order to draw the "menujouer.bmp" image at the right time you will need to load both images and in the while loop check what screen_number is and draw the right image

if (screen_number == 1) {
    /* draw "menu.bmp" */
} else if (screen_number == 2) {
    /* draw "menujouer.bmp" */
}

It sounds like you were able to draw one image on top of the other before so hopefully you can figure it out from there. If not, you can always ask another question!

This next part isn't strictly necessary, but it is helpful for when you come back to the code after a break.

It can be hard to remember which screen is which, so you can give names to the numbers to help you remember.

#define MENU 1
#define MENUJOUER 2

with these lines near the top of your program, whenever you write MENU it will be exactly as if you had written 1. So you can change everything that looks like screen_number == 1 to screen_number == MENU. Similarly you can change everything that looks like screen_number == 2 to screen_number == MENUJOUER, and the program will act exactly the same. This makes it easier to remember how the program works later. You can change MENU or MENUJOUER to something else if you like too.