Loading...
Logo
Processing Forum
Contributed Library Questions
kalvarezunam
kalvarezu..

Problems with screens in G4P library

in Contributed Library Questions  •  7 months ago  
Hi everyone, 

I want to do a videogame or some kind of graphic interface, I have been worked with G4P library to create a nice interface but I have some problems. I need to change the screens when some button is press ( I want to have 6 screens) NOT at the same time, only when some button is press. I have this code but the screen doesn´t change, and the buttons doesn´t dissapear, does anyone have idea of who can I do? 

Cheers

import g4p_controls.*;

GImageButton btnplay, btnStart, btnSettings, btnHelp, btnScores, btnSongs, btnClose;
GLabel lblOut;
GCustomSlider sdr1;

long timer;
String[] files;

String current_screen = "start_screen";
String last_screen = "start_screen";

PImage Partitura;
PImage director;
PImage directorarriba;
PImage directorenmedio;
PImage directorabajo;

PFont titulos;
PFont autor; 

int i = 0;


void setup() {  // this is run once.   

    size(640, 480); // canvas size (Variable aren't evaluated. Integers only, please.)
  
    cursor(CROSS);
  
    start_screen(); 
    
    current_screen = "start_screen";
    last_screen = "start_screen";    
} 

void draw() {  // this is run repeatedly. 

  if((last_screen != "song_screen") && (current_screen == "song_screen"))  {
    //song_screen();
    last_screen = "song_screen";
  }
}

void start_screen(){
    
  PImage fondo;
  fondo = loadImage("fondo.jpg");
  background(fondo);
  
  cursor(CROSS);

  files = new String[]{
    "startOff.png", "startOn.png"
  };
  btnStart = new GImageButton(this, 250, 200, files);

  files = new String[]{
    "settingsOff.png", "settingsOn.png"
  };
  btnSettings = new GImageButton(this, 50, 100, files);
 
  files = new String[]{
  "helpOff.png", "helpOn.png"
  };
  btnHelp = new GImageButton(this, 1, 430, files);
  
  files = new String[]{
  "scoresOff.png", "scoresOn.png"
  };
  btnScores = new GImageButton(this, 50, 300, files);  
  
  files = new String[]{
  "songsOff.png", "songsOn.png"
  };
  btnSongs = new GImageButton(this, 470, 300, files);  
  
  files = new String[]{
  "closeOff.png", "closeOn.png"
  };
  btnClose = new GImageButton(this, 470, 100, files);
   
  lblOut = new GLabel(this, 20, 5, 610, 20, "");
  lblOut.setTextAlign(GAlign.CENTER, null);
  timer = millis() -5000;


}

void song_screen(){
  
  background(255);
  
  files = new String[]{
      "playon.png", "playoff.png"
    };
    btnplay = new GImageButton(this, 20, 20, files);
  
  Partitura = loadImage("Partitura.png");
  image(Partitura, 75, 50);
 
}

void settings_screen(){
  background(200, 200, 255);
  //cursor(CROSS);
  sdr1 = new GCustomSlider(this, 20, 20, 260, 50, "blue18px");
  sdr1.setShowDecor(false, true, true, true);
  sdr1.setNbrTicks(5);
  sdr1.setLimits(1, 1, 100);
}
  
void help_screen(){
  background(200, 200, 255);  
}

void scores_screen(){
  background(200, 200, 255);  
}

void songs_screen(){
  background(200, 200, 255);
}

void close_screen(){
  background(200, 200, 255);
}

void handleButtonEvents(GImageButton button, GEvent event){
  if(button == btnStart){
    lblOut.setText("Start");
    println("play");
    song_screen();
    // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    //btnStart.setVisible(false); 
    //btnSettings.setVisible(false);
    //btnScores.setVisible(false);
    //btnSongs.setVisible(false);
    //btnClose.setVisible(false);
    timer = millis();
  }
  if(button == btnSettings){
    lblOut.setText("Settings");
    println("settings");
    settings_screen();
    // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    //btnStart.setVisible(false);
    //btnSettings.setVisible(false);
    //btnScores.setVisible(false);
    //btnSongs.setVisible(false);
    //btnClose.setVisible(false);
    timer = millis();
  }
  if(button == btnHelp){
    lblOut.setText("Help");
    println("help");
    help_screen();
        // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    //btnStart.setVisible(false);
    //btnSettings.setVisible(false);
    //btnHelp.setVisible(false);
    //btnScores.setVisible(false);
    //btnSongs.setVisible(false);
    //btnClose.setVisible(false);
    timer = millis();
  }
  if(button == btnScores){
    lblOut.setText("Scores");
    println("scores");
    scores_screen();
        // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    //btnStart.setVisible(false);
    //btnSettings.setVisible(false);
    //btnHelp.setVisible(false);
    //btnScores.setVisible(false);
    //btnSongs.setVisible(false);
    //btnClose.setVisible(false);
    timer = millis();
  }
  if(button == btnSongs){
    lblOut.setText("Songs");
    println("songs");
    songs_screen();
        // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    /*btnStart.setVisible(false);
    btnSettings.setVisible(false);
    btnHelp.setVisible(false);
    btnScores.setVisible(false);
    btnSongs.setVisible(false);
    btnClose.setVisible(false);*/
    timer = millis();
  }
  if(button == btnClose){
    lblOut.setText("close");
    println("close");
    close_screen();
        // I HAVE TO PUT THE NEXT CODE .SETVISIBLE TO QUIT THE BUTTONS
    /*btnStart.setVisible(false);
    btnSettings.setVisible(false);
    btnHelp.setVisible(false);
    btnScores.setVisible(false);
    btnSongs.setVisible(false);
    btnClose.setVisible(false);*/
    timer = millis();
  }
}

public void handleSliderEvents(GSlider slider){
  print("integer value:" + slider.getValueI() + "float value:" + slider.getValueF());
  
}

Replies(7)

quarks
quarks

Re: Problems with screens in G4P library

7 months ago
You need to state the version of G4P and Processing you are using. This is important since the syntax you use for handling button events and the syntax for the slider come from different versions of G4P.

It seems to me that the problem is not with G4P rather with your program logic.

Effectively you want an application that has different modes (screens) and you want to move between them using image buttons. The esaiest way to do that is have an integer variable called mode and the value of this is used to decide what is displayed e.g.

Copy code
  1. int mode = 1;

  3. void draw(){
  4.   switch(mode){
  5.   case 1:
  6.     song_screen();
  7.     break;
  8.   case 2:
  9.     settings_screen();
  10.     break;
  11.   case 3:
  12.     help_screen();
  13.     break;
  14.   case 4:
  15.     scores_screen();
  16.     break;
  17.   case 5:
  18.     songs_screen();
  19.     break;
  20.   case 6:
  21.     close_screen();
  22.     break;
  23.   }
  24. }

Then in the button event handlers can be used to change the value in mode so changing the screen displayed.

To hide the controls use
Copy code
  1. G4P.setGlopalAlpha(0);
and to make them visible again use
Copy code
  1. G4P.setGlopalAlpha(255);

kalvarezunam
kalvarezu..

Re: Problems with screens in G4P library

7 months ago
Thanks Quarks, this was useful, I can change some screens, but the problem is, if I put these instruccion (switch, case) in the draw some button don't work, let me show you, I put each screen in other sketch, for example, if I put the funtion settings_screen in the draw the sliders don't work, I used a for cycle and while, but nothing happens, 

import g4p_controls.*;

GImageButton btnMain;
GLabel lblOut, lblVolumen, lblScore, lblTempo;
GCustomSlider sdrVolumen, sdrScore;
GDropList dplTempo;

long timer;
String[] files;

PImage engranes;

void setup() {  // this is run once.   

  size(640, 480); 
  //settings_screen();         
} 

void draw() {  // this is run repeatedly. 
  background(255);
  //image(engranes, 0, 0);
  for(int z=1; z<=1; z++){
  settings_screen();
  }
}

void settings_screen(){
  
  background(255);
  engranes = loadImage("engranes.jpg");
  image(engranes, 0, 0);

  cursor(CROSS);
  
  int x = width, y = 10;
  
  sdrVolumen = new GCustomSlider(this, x-550, y+15, 200, 50, null);
  sdrVolumen.setShowDecor(false, true, true, true);
  sdrVolumen.setNbrTicks(9);
  sdrVolumen.setLimits(50, 1, 100);
  lblVolumen = new GLabel(this, x-640, y+15, 80, 50, "Volumen");
  lblVolumen.setTextAlign(GAlign.RIGHT, null);
  lblVolumen.setTextBold();
  
  String[] tickLabels = new String[]{"On-", "Off"};
  sdrScore = new GCustomSlider(this, x-550, y+75, 40, 50, null);
  sdrScore.setShowDecor(false, true, true, true);
  sdrScore.setLimits(1, 1, 2);
  sdrScore.setTickLabels(tickLabels);
  lblScore = new GLabel(this, x-640, y+75, 80, 50, "Score");
  lblScore.setTextAlign(GAlign.RIGHT, null);
  lblScore.setTextBold();
  
  lblTempo = new GLabel(this, x-320, y+30, 80, 19, "Tempo");
  lblTempo.setTextBold();
  String[] items = new String[]{
    "200", "180", "160", "140", "120", "100", "80", "60", "40", "20", "1" 
  };
  dplTempo = new GDropList(this, x-240, y+30, 40, 96, 5);
  dplTempo.setItems(items, 0);
 
  files = new String[]{
    "mainOff.png", "mainOn.png"
  };
  btnMain = new GImageButton(this,x-80, 420, files);
  
  lblOut = new GLabel(this, 10, 190, 560, 20, "");
  lblOut.setTextAlign(GAlign.CENTER, null);
  timer = millis() - 5000;
}

void handleButtonEvents(GImageButton button, GEvent event){
  if(button == btnMain){
    //lblOut.setText("Main");
    //start_screen();
    println("start_screen");
  }
}

void handleSliderEvents(GSlider slider){
  print("integer value:" + slider.getValueI() + "float value:" + slider.getValueF());
  //G4P.setGlobalAlpha(0);
}

quarks
quarks

Re: Problems with screens in G4P library

7 months ago
I was right, the problem is with your code not G4P.

In your code the settings_screen() is being called from the draw method. Tis means that 60 times a second your images are being re-loaded and the G4P controls are being recreated.

ALL images should be loaded from setup() and ALL G4P controls should be created and initialised from setup.

In the code below I have create three methods for the setting screen
  1. make_settings_screen() which creates and initialises the G4P controls this should be called once from setup()
  2. settings_screen_visible(boolean visible) this can be called from anywhere in your code (after the controls have been created) to make the setting screen controls visible/invisible.
  3. settings_screen() this should be called from the draw() method, the first thing it does is make sure the controls are visible
The code works and can easily be adapted using the switch case code in my previous post

HTH

Copy code
  1. import g4p_controls.*;

  3. GImageButton btnMain;
  4. GLabel lblOut, lblVolumen, lblScore, lblTempo;
  5. GCustomSlider sdrVolumen, sdrScore;
  6. GDropList dplTempo;
  7. long timer;
  8. String[] files;
  9. PImage engranes;

  11. void setup() {  // this is run once.  
  12.   size(640, 480);
  13.   // load the image here
  14.   engranes = loadImage("engranes.jpg");
  15.   // Create the controls for the settings screen and
  16.   // make them invisible
  17.   make_settings_screen();
  18.   settings_screen_visible(false);
  19.   cursor(CROSS);
  20. }

  22. void draw() {  // this is run repeatedly.
  23.   background(255);
  24.   for (int z=1; z<=1; z++) {
  25.     settings_screen();
  26.   }
  27. }

  29. void settings_screen() {
  30.   // First make sure the controls are visible
  31.   settings_screen_visible(true);
  32.   // Now the rest of what you have to draw
  33. }

  35. // Create the controls once (this method should be called from
  36. // the setup() method
  37. void make_settings_screen() {
  38.   int x = width, y = 10;
  39.   sdrVolumen = new GCustomSlider(this, x-550, y+15, 200, 50, null);
  40.   sdrVolumen.setShowDecor(false, true, true, true);
  41.   sdrVolumen.setNbrTicks(9);
  42.   sdrVolumen.setLimits(50, 1, 100);
  43.   lblVolumen = new GLabel(this, x-640, y+15, 80, 50, "Volumen");
  44.   lblVolumen.setTextAlign(GAlign.RIGHT, null);
  45.   lblVolumen.setTextBold();
  46.   String[] tickLabels = new String[] {
  47.     "On-", "Off"
  48.   };
  49.   sdrScore = new GCustomSlider(this, x-550, y+75, 40, 50, null);
  50.   sdrScore.setShowDecor(false, true, true, true);
  51.   sdrScore.setLimits(1, 1, 2);
  52.   sdrScore.setTickLabels(tickLabels);
  53.   lblScore = new GLabel(this, x-640, y+75, 80, 50, "Score");
  54.   lblScore.setTextAlign(GAlign.RIGHT, null);
  55.   lblScore.setTextBold();
  56.   lblTempo = new GLabel(this, x-320, y+30, 80, 19, "Tempo");
  57.   lblTempo.setTextBold();
  58.   String[] items = new String[] {
  59.     "200", "180", "160", "140", "120", "100", "80", "60", "40", "20", "1"
  60.   };
  61.   dplTempo = new GDropList(this, x-240, y+30, 40, 96, 5);
  62.   dplTempo.setItems(items, 0);
  63.   files = new String[] {
  64.     "mainOff.png", "mainOn.png"
  65.   };
  66.   btnMain = new GImageButton(this, x-80, 420, files);
  67.   lblOut = new GLabel(this, 10, 190, 560, 20, "");
  68.   lblOut.setTextAlign(GAlign.CENTER, null);
  69.   timer = millis() - 5000;
  70. }

  72. // Should the settings screen controls be visible or not?
  73. void settings_screen_visible(boolean visible) {
  74.   sdrVolumen.setVisible(visible);
  75.   lblVolumen.setVisible(visible);
  76.   sdrScore.setVisible(visible);
  77.   lblScore.setVisible(visible);
  78.   dplTempo.setVisible(visible);
  79.   lblTempo.setVisible(visible);
  80.   btnMain.setVisible(visible);
  81.   lblOut.setVisible(visible);
  82. }

  84. void handleButtonEvents(GImageButton button, GEvent event) {
  85.   if (button == btnMain) {
  86.     //lblOut.setText("Main");
  87.     //start_screen();
  88.     println("start_screen");
  89.   }
  90. }

  92. void handleSliderEvents(GSlider slider) {
  93.   print("integer value:" + slider.getValueI() + "float value:" + slider.getValueF());
  94.   //G4P.setGlobalAlpha(0);
  95. }

kalvarezunam
kalvarezu..

Re: Re: Problems with screens in G4P library

6 months ago
Really thanks, I tested in each screen, and works; so the only thing that I need to do is put every screen together with the method that you told me, so when I finish with the design of the screen I'll try to do it. 

Regards
kalvarezunam
kalvarezu..

Re: Problems with screens in G4P library

5 months ago
I tried to do it but don't works, the buttons and sliders are still in the screen and don't change with the rest of the screen, I put only the main code,

import g4p_controls.*;

GImageButton btnPlay, btnOptions1, btnOptions2, btnQuit_game, btnGame_info, btnPlay1, btnPlay2, btnPlay3, btnStop, btnPause, btnSpeaker;
GLabel lblOut, lblVolumen, lblScore, lblTempo, lblSong;
GCustomSlider sdrVolumen, sdrScore;
GDropList dplTempo, dplSong;

long timer;
String[] files;


int i = 0;
int mode = 1;
//int modo1 = 1;


void setup() {  // this is run once.   

    size(640, 480); 
    background(255);
    cursor(CROSS);

    make_inicio_screen(); 
    inicio_screen_visible(false);
    make_settings_screen();
    settings_screen_visible(false);
    make_song_screen();
    song_screen_visible(false);

    
    bx1 = width ;
    bx2 = bx1+bw;
    by = height /480;
    smooth();
    //frameRate(30);
    space = loadImage("diseno.jpg"); 
    space2 = loadImage("diseno3.jpg");
    
    engranesize = loadImage("engranesize.jpg");
    cursor(CROSS);
    
    Partitura = loadImage("Partitura.png");
    directorarriba = loadImage("director1.png");
    directorenmedio = loadImage("director2.png");
    directorabajo = loadImage("director3.png");
    director = directorarriba;
    
} 

void draw() {  // this is run repeatedly. 
  switch(mode){
    case 1: 
      inicio_screen();
      break;
    case 2: 
      settings_screen();
      break;
    case 3: 
      song_screen();
      break;
  }  
}

void handleButtonEvents(GImageButton button, GEvent event){
  /////Botones InicioScreen
  if(button == btnPlay1){
    println("inicio_screen");
    mode = 3;
    //song_screen();
  }
  if(button == btnOptions1){
    println("options_screen");
    mode = 2;
    //settings_screen();
  }
  //////BotonesSettingsScreen
  if(button == btnQuit_game){
    println("quit_game");
  }
  if(button == btnPlay2){
    println("songs_screen");
    mode = 3;
    //song_screen();
  }
  if(button == btnGame_info){
    println("info_screen");
  }
  ////Botones SongScreen
  if(button == btnPlay3){
    println("Play");
  }
  if(button == btnStop){
    println("Stop");
  }
  if(button == btnPause){
    println("Pause");
  }
  if(button == btnSpeaker){
    println("Speaker");
  }
  if(button == btnOptions2){
    println("option_screen");
  }
  //G4P.setGlobalAlpha(0);
}

void handleSliderEvents(GValueControl slider, GEvent event){
  /////Slider InicioScreen
  print("integer value:" + slider.getValueI() + "float value:" + slider.getValueF());
  ////Slider SettingScreen
  if (slider == sdrVolumen)
    println(sdrVolumen.getValueS() + " " + event);
  if (slider == sdrScore)
    println(sdrScore.getValueS()+ " " + event);
  //G4P.setGlobalAlpha(0);
}
    
public void handleDropListEvents(GDropList list, GEvent event){
  System.out.println("Selected " + dplSong.getSelectedIndex() + "'" + dplSong.getSelectedText() + "'");
  System.out.println("Selected " + dplTempo.getSelectedIndex() + "'" + dplTempo.getSelectedText() + "'");
  //G4P.setGlobalAlpha(0);
}
quarks
quarks

Re: Problems with screens in G4P library

5 months ago

In draw first make all controls invisible then depending on mode make the ones you are interested in visible

Copy code
  1. void draw() {  // this is run repeatedly.
  2.   //hide all controls
  3.   inicio_screen_visible(false); 
  4.   settings_screen_visible(false);
  5.   song_screen_visible(false);

  7.   switch(mode){
  8.     case 1: 
  9.       inicio_screen_visible(true);
          inicio_screen();
  10.       break;
  11.     case 2:
                settings_screen_visible(true);
  12.       settings_screen();
  13.       break;
  14.     case 3: 
  15.       song_screen_visible(true);
  16.       song_screen();
  17.       break;
  18.   }  
  19. }

kalvarezunam
kalvarezu..

Re: Problems with screens in G4P library

5 months ago
hi, i tried but with this method does not works, the problems seem to be if you put the 

inicio_screen_visible(false);
    settings_screen_visible(false);
    song_screen_visible(false);

in the void draw(); but if you put it in the setup(); and you should put something like this 

void draw() {  // this is run repeatedly. 
  switch(mode){
    case 1: 
      inicio_screen_visible(true);
      inicio_screen();
      settings_screen_visible(false);
      song_screen_visible(false);
      break;
    case 2: 
      settings_screen_visible(true);
      settings_screen();
      inicio_screen_visible(false);
      song_screen_visible(false);
      break;
    case 3: 
      song_screen_visible(true);
      inicio_screen_visible(false);
      settings_screen_visible(false);
      song_screen();
      break;    
  }  
}

and this seems that works, thanks and I'll continue with the design, keep in touch, thanks
Top Reply

Statistics

  • 7 Replies
  • 639  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts