Help on how to do a text chart: string and buttons (Professor Layton’s game)

Processing Beginners
1

Hi, I’m a begginer at processing and I have to do some kind of videogame for university. I wanted to make a text chart, with a rect, and write on it some phrases with String. I wanted to make the phrases change when you press a button or ‘enter’, just like a Professor Layton’s kind of game. I’m frustrated because all the phrases come at the same time, and I don’t know what do I have to do.

Here’s the code

PImage piplup, cienaga, robert;
int posBotonX, posBotonY, ancho, alto;
boolean seHaPulsado;
LetrasDespacio frases;

void setup(){
size(1920, 1080);
posBotonX=width/2+350;
posBotonY=700;
ancho=50;
alto=50;

//texto
frases = new LetrasDespacio[3];
frases[0] = new LetrasDespacio(“¿QUÉ TE CREES QUE ESTÁS HACIENDO?”, 0, 550, 30, 3, color(0));
frases[1] = new LetrasDespacio(“CON DOLOR DE CABEZA”, 50, 550, 25, 5, color(0));
//frases[2] = new LetrasDespacio("MEJORESE, ADIÓS ", 0, 120, 30, 2, color(255, 0, 0));
//La última frase debe llevar espacios en blanco al final ya que cuando se termina de escribir
//el último caracter de una frase, se pasa de inmediato a reiniciar,
//y se reinicia antes de que el freno deje de tener efecto.
//Esto provoca que no se vea el último caracter de la última frase

piplup = loadImage(“piplup4genback.png”);
cienaga = loadImage(“cienaga.jpg”);
robert = loadImage(“robert.png”);

//boton
seHaPulsado = false;

}

void draw(){
imageMode(CENTER);
image(cienaga, width/2, height/2-200);
cienaga.resize(1920, 1080);
image(piplup, 400, 400);
piplup.resize(400, 600);

image(robert, 1000, height/2);
rectMode(CENTER);
pushStyle();
fill(10,40,0);
rect(width/2, height/4*3-100, 1920, 400);
popStyle();

//boton

pushStyle();
strokeWeight(10);
fill(0);
rect(posBotonX, posBotonY, ancho, alto);

popStyle();

//texto

frases[0].dibujar();
//if (frases[0].fin()) {//Esperar a que se termine de escribir la primera frase
//frases[1].dibujar();
//}
if (seHaPulsado = true){
frases[1].dibujar();
}
//if (frases[1].fin()) {//Esperar a que se termine de escribir la segunda frase
//frases[2].dibujar();
//}
//if (frases[2].fin()) {//Cuando termina de escribirse la tercera frase, se reinicializan las tres frases.
//delay(500);//retraso de medio segundo para ver la última letra de la última frase
//frases[0].reinicia();
// frases[1].reinicia();
//frases[2].reinicia();
//}
}

//void botón
void mousePressed(){
if(mouseX> posBotonX && mouseX< posBotonX+ancho && mouseY> posBotonY && mouseY< posBotonY+alto){
seHaPulsado = true;
}
}

class LetrasDespacio {
String frase;//La frase que se quiere escribir.
int posX, posY, tamanyoLetra, freno;
color c; // Guarda el color con el que se quiere dibujar la frase.

int indice;//posición posterior al último caracter a escribir.

LetrasDespacio(String f, int px, int py, int tamLetra, int fr, color cc) {
frase = f;
posX = px;
posY = py;
tamanyoLetra = tamLetra;
freno = fr;
c = cc;
indice = 0;
}

void dibujar() {
pushStyle();// Los cambios de estilo son locales a la ejecución del método
textSize(tamanyoLetra);
fill(c);
textAlign (LEFT);
textSize (tamanyoLetra);
String parteInicial = frase.substring(0, indice);
text(parteInicial, posX, posY);
if (frameCount % freno == 0) {
indice = min(indice+1, frase.length());// se incrementa indice impidiendo que tenga un valor mayor que la longitud de la frase.
}
popStyle();
}//Fin de la definición del método dibujar

boolean fin() {
return indice >= frase.length();
}

void reinicia() {
indice = 0;
}
}

thank you :slight_smile:

2

You need == here, not only one = !!!

Check reference

Also remember that draw() runs 60 times per second; it doesn’t wait somewhere.
Hence you could use an index to distinguish what button to show from the array of buttons.

1 Like
3

here is a new version where you type with keyboard (I had to remove the images)

Do you want to compare the input with a correct answer?


// images
PImage piplup, cienaga, robert;

// button 
int posBotonX, posBotonY, ancho, alto;
boolean seHaPulsado;

// sentences 
LetrasDespacio[] frases;
int index; 

//input
String input=""; 

void setup() {
  size(1920, 1080);
  posBotonX=width/2+350;
  posBotonY=700;
  ancho=50;
  alto=50;

  //texto
  frases = new LetrasDespacio[3];
  frases[0] = new LetrasDespacio("¿QUÉ TE CREES QUE ESTÁS HACIENDO?", 0, 550, 30, 3, color(0));
  frases[1] = new LetrasDespacio("CON DOLOR DE CABEZA", 50, 550, 25, 5, color(0));
  frases[2] = new LetrasDespacio("MEJORESE, ADIÓS ", 0, 120, 30, 2, color(255, 0, 0));
  //La última frase debe llevar espacios en blanco al final ya que cuando se termina de escribir
  //el último caracter de una frase, se pasa de inmediato a reiniciar,
  //y se reinicia antes de que el freno deje de tener efecto.
  //Esto provoca que no se vea el último caracter de la última frase

  piplup = loadImage("piplup4genback.png");
  cienaga = loadImage("cienaga.jpg");
  robert = loadImage("robert.png");

  //boton
  seHaPulsado = false;
}

void draw() {
  imageMode(CENTER);
  text("cienaga", width/2, height/2-200);
  // cienaga.resize(1920, 1080);
  text("piplup", 400, 400);
  // piplup.resize(400, 600);

  text("robert", 1000, height/2);
  rectMode(CENTER);
  pushStyle();
  fill(10, 40, 0);
  rect(width/2, height/4*3-100, 1920, 400);
  popStyle();

  //boton

  pushStyle();
  strokeWeight(10);
  fill(255, 0, 0);
  rectMode(CORNER);
  rect(posBotonX, posBotonY, ancho, alto);

  popStyle();

  //texto

  if (index<frases.length) {
    frases[index].dibujar();
  }

  fill(255); 
  text(input, 50, 650); 

  //if (frases[0].fin()) {//Esperar a que se termine de escribir la primera frase
  //frases[1].dibujar();
  //}
  //if (seHaPulsado == true) {
  //  frases[1].dibujar();
  //}
  //if (frases[1].fin()) {//Esperar a que se termine de escribir la segunda frase
  //frases[2].dibujar();
  //}
  //if (frases[2].fin()) {//Cuando termina de escribirse la tercera frase, se reinicializan las tres frases.
  //delay(500);//retraso de medio segundo para ver la última letra de la última frase
  //frases[0].reinicia();
  // frases[1].reinicia();
  //frases[2].reinicia();
  //}
}

//void botón
void mousePressed() {
  if (mouseX> posBotonX &&
    mouseX< posBotonX+ancho && 
    mouseY> posBotonY && 
    mouseY< posBotonY+alto) {
    //
    seHaPulsado = true;

    index++;
    println("here");
    input ="";
  }
}

void keyPressed() {
  switch(key) {

  case BACKSPACE:
    // to do 
    break; 

  case RETURN: 
  case ENTER:
    // to do
    // submit
    break; 

  default:
    if (key>=32) 
      input+=key; 
    break;
  }
}

// ==========================================================================================

class LetrasDespacio {

  String frase;//La frase que se quiere escribir.
  int posX, posY, tamanyoLetra, freno;
  color c; // Guarda el color con el que se quiere dibujar la frase.

  int indice;//posición posterior al último caracter a escribir.

  LetrasDespacio(String f, int px, int py, int tamLetra, int fr, color cc) {
    frase = f;
    posX = px;
    posY = py;
    tamanyoLetra = tamLetra;
    freno = fr;
    c = cc;
    indice = 0;
  }

  void dibujar() {
    pushStyle();// Los cambios de estilo son locales a la ejecución del método
    textSize(tamanyoLetra);
    fill(c);
    textAlign (LEFT);
    textSize (tamanyoLetra);
    String parteInicial = frase.substring(0, indice);
    text(parteInicial, posX, posY);
    if (frameCount % freno == 0) {
      indice = min(indice+1, frase.length());// se incrementa indice impidiendo que tenga un valor mayor que la longitud de la frase.
    }
    popStyle();
  }//Fin de la definición del método dibujar

  boolean fin() {
    return indice >= frase.length();
  }

  void reinicia() {
    indice = 0;
  }
  //
}//class
//