Game menu with images

vamo1986

Hi everyone! i am really really reaaaaalllly new at processing. I am trying to build a menu for my game in which the user clicks the mouse button and the game shows an image. The problem is that when I run the program it show the first image and then when i clikc on an specific area it shows the las image, excluding states 1 and 2. Can anyone tell me whats wrong with my code? Thanks a lot!

PImage img1;
PImage img2;
PImage img3;
PImage img4;
final int empezar = 0;
final int roles = 1;
final int instrucciones = 2;
final int asignar = 3;
int paginaActual = 0;
boolean botonPresionado = false;

void setup () {
  size (648, 480);
  img1 = loadImage ("Titulo2.jpg");
  img2 = loadImage ("Roles.jpg");
  img3 = loadImage ("Instrucciones.jpg");
  img4 = loadImage ("Asignar.jpg");
}

void draw () {

  switch (paginaActual) {

  case empezar:

    drawParaEmpezar ();
    break;

  case roles:

    drawParaRoles ();
    break;

  case instrucciones:
    drawParaInstrucciones ();
    break;

    //  case asignar:
    //   drawParaAsignar ();
    //  break;

  default: 
    println ("estado no identificado");
    break;
  }
}
void drawParaEmpezar () {
  image (img1, 0, 0);
  if (botonPresionado) 
  {
    drawParaRoles ();
  }
}

void drawParaRoles () {
  image (img2, 0, 0);
  if (botonPresionado) 
  {
    drawParaInstrucciones ();
  }
}

void drawParaInstrucciones () {
  image (img3, 0, 0);
  if (botonPresionado) 
  {
    image (img4, 0, 0);
  }
}

// void drawParaAsignar () {
//   image (img4, 0, 0);
// }

void mousePressed()
{ 
  switch (paginaActual) {

  case empezar:
    mousePressedParaEmpezar ();
    break;

  case roles:
    mousePressedParaRoles ();
    break;

  case instrucciones:
    mousePressedParaInstrucciones ();
    break;
  }
}

void mousePressedParaEmpezar () {
  if (  mouseX > 250 && mouseX < 391 && mouseY > 277 && mouseY < 325 ) 
  {
    botonPresionado = !botonPresionado;
  } else {
  }
}

void mousePressedParaRoles () {
  if (  mouseX > 473 && mouseX < 620 && mouseY > 408 && mouseY < 456 ) 
  {
    botonPresionado = !botonPresionado;
  } else {
  }
}

void mousePressedParaInstrucciones () {
  if (  mouseX > 473 && mouseX < 620 && mouseY > 408 && mouseY < 456 ) 
  {
    botonPresionado = !botonPresionado;
  } else {
  }
}

KevinWorkman

I'm not sure I understand your question (screenshots would help), but one thing that occurs to me is that you're never clearing out old frames, so any images you draw will stay visible. You might want to call the background() function at the beginning of draw() to clear out old frames.

vamo1986

I´m trying to make a menu, wich would work as a startscreen

First state = empezar

here the player clicks on the button. Then it change to another image that explains game´roles

after that, the player clicks again on "SIGUIENTE" and it takes him to the next image tha explains how to play

finally after clicking again on "SIGUIENTE" the game shows another image that prepare the player to start playing

the thing is that when i click on the first image it takes me to the last one.

Eeyorelife

In the switch() in your mousePressed() function, you are changing 'botonPresionado' to true (the first time you press at least).

'paginaActual' still holds the value 'empezar'. So in the switch() in draw(), the function drawParaEmpezar() is run.

In the drawParaEmpezar() function you say

if (botonPresionado)
  {
    drawParaRoles ();
  }

The statement is true, so you jump to drawParaRoles(). And in that function:

 if (botonPresionado) 
  {
    drawParaInstrucciones ();
  }

Which is true, so let's move to the drawParaRoles():

if (botonPresionado) 
  {
    image (img4, 0, 0);
  }

BotonPresionado is still true, so the last image is drawn. You do this every single frame of draw. So even though 'paginaActual' is always in the case empezar, you will draw keep drawing the last picture until you click the mouse button again.

Eeyorelife

final int empezar = 0;
final int roles = 1;
final int instrucciones = 2;
final int asignar = 3;
int paginaActual = 0;
boolean botonPresionado = false;

void setup () {
  size(648, 480);
}

void draw () {
  background(0);
  fill(255);
  textSize(50);

  switch (paginaActual) {
  case empezar:

    text(empezar,width/2,height/2);
    break;

  case roles:

    text(roles,width/2,height/2);
    break;

  case instrucciones:
    text(instrucciones,width/2,height/2);
    break;

  default: 
    println ("estado no identificado");
    break;
  }
}


void mouseClicked(){

  //this does basically what you want
  //paginaActual += 1;


  //this is more complicated
  //and more useful
  switch (paginaActual) {
  case empezar:
    paginaActual = roles;
    break;

  case roles:

    paginaActual = instrucciones;
    break;

  case instrucciones:
    paginaActual = empezar;
    break;

  default: 
    println ("estado no identificado");
    break;
  }
}

vamo1986

THANKS A LOT!!!! you solved it!