Problems with screens in G4P library

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

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.

int mode = 1;
void draw(){
switch(mode){
case 1:
song_screen();
break;
case 2:
settings_screen();
break;
case 3:
help_screen();
break;
case 4:
scores_screen();
break;
case 5:
songs_screen();
break;
case 6:
close_screen();
break;
}
}

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

G4P.setGlopalAlpha(0);

and to make them visible again use

G4P.setGlopalAlpha(255);

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

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

make_settings_screen() which creates and initialises the G4P controls this should be called once from setup()
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.
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

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);
// load the image here
engranes = loadImage("engranes.jpg");
// Create the controls for the settings screen and
// make them invisible
make_settings_screen();
settings_screen_visible(false);
cursor(CROSS);
}
void draw() { // this is run repeatedly.
background(255);
for (int z=1; z<=1; z++) {
settings_screen();
}
}
void settings_screen() {
// First make sure the controls are visible
settings_screen_visible(true);
// Now the rest of what you have to draw
}
// Create the controls once (this method should be called from
// the setup() method
void make_settings_screen() {
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;
}
// Should the settings screen controls be visible or not?
void settings_screen_visible(boolean visible) {
sdrVolumen.setVisible(visible);
lblVolumen.setVisible(visible);
sdrScore.setVisible(visible);
lblScore.setVisible(visible);
dplTempo.setVisible(visible);
lblTempo.setVisible(visible);
btnMain.setVisible(visible);
lblOut.setVisible(visible);
}
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);
}

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

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

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

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

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