Simple dialogue system

Processing Coding Questions
1

I wanted to have a symple dialogue system for my game but I don’t know how to make the first text appear on click and then the next piece of text if you click again.

int scene = 1;

void setup() {
  size(800, 600);
}

void draw() {
  if (scene == 1) {
    Scene1();
  } else if (scene == 2) {
    Scene2();
  }
}

boolean isPointInRectangle(float px, float py, float rx, float ry, float rw, float rh) {
  if (px >= rx &&
    px <= rx + rw &&
    py >= ry &&
    py <= ry + rh) {
    return true;
  }
  return false;
}

void Scene1() {
  background(255, 0, 0);

  //drawing the text bubble
  stroke(0);
  fill(255);
  ellipse(300, 180, 300, 100);
  triangle(220, 220, 300, 220, 170, 300);  
  noStroke();
  rect(220, 220, 100, 10);
  //end of text bubble

  //drawing the arrow only when the text is finished
  if (message1 == true) {
    fill(0);
    triangle(750, 300, 750, 340, 790, 320);
  }
  //end of the arrow


  if (mousePressed & isPointInRectangle(mouseX, mouseY, 750, 300, 40, 40)) {
    scene = scene + 1;          // if you click on the triangle on the screen you go to the next scene
  }

  if (message1 == true) {          
    textSize(19);                //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("This is test scene1", 220, 190);
  }
 
  fill(0);
  textSize(19);
  text("Click on the screen", 300, 590);
}

boolean message1 = false;


void mousePressed() {
  message1 = true;
}
1 Like
2 


int scene = 1;
boolean message1 = false;

void setup() {
  size(800, 600);
}

void draw() {
  if (scene == 1) {
    Scene1();
  } else if (scene == 2) {
    Scene2();
  } else {
    background(5, 0, 220);
    textSize(19);                // End for now. 
    fill(0);
    text("The END", 220, 190);
  }
}

//-----------------------------------------------------------------------------

boolean isPointInRectangle(float px, float py, 
  float rx, float ry, 
  float rw, float rh) {
  if (px >= rx &&
    px <= rx + rw &&
    py >= ry &&
    py <= ry + rh) {
    return true;
  }
  return false;
}

void Scene1() {
  background(255, 0, 0);

  //drawing the text bubble
  stroke(0);
  fill(255);
  ellipse(300, 180, 300, 100);
  triangle(220, 220, 300, 220, 170, 300);  
  noStroke();
  rect(220, 220, 100, 10);
  //end of text bubble

  //drawing the arrow only when the text is finished
  if (message1) {
    fill(0);
    triangle(750, 300, 750, 340, 790, 320);
  }
  //end of the arrow

  if (message1) {          
    textSize(19);      //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("This is test scene1", 220, 190);
  }

  if (!message1) {
    fill(0);
    textSize(19);
    text("Click on the screen", 300, 590);
  }
}

void Scene2() {
  background(255, 220, 0);

  //drawing the text bubble
  stroke(0);
  fill(255);
  ellipse(300, 180, 300, 100);
  triangle(220, 220, 300, 220, 170, 300);  
  noStroke();
  rect(220, 220, 100, 10);
  //end of text bubble

  //drawing the arrow only when the text is finished
  if (message1) {
    fill(0);
    triangle(750, 300, 750, 340, 790, 320);
  }
  //end of the arrow

  if (message1) {          
    textSize(19);                //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("!!!This is test scene2 !!!", 220, 190);
  }

  if (!message1) {    
    fill(0);
    textSize(19);
    text("Click on the screen", 300, 590);
  } else {
    fill(0);
    textSize(19);
    text("Click on the Arrow", 300, 590);
  }
}

void mousePressed() {
  if (message1 && mousePressed & 
    isPointInRectangle(mouseX, mouseY, 750, 300, 40, 40)) {
    scene = scene + 1;          // if you click on the triangle on the screen you go to the next scene
    message1 = false; // reset
  } else {
    message1 = true;
  }
}
//
3

This version goes to the next page when you click the triangle >

Or do you want to have multiple different texts within the same scene?

Remark

This

if (message1 == true) {

is the same as

if (message1) {

4

Hey, thanks for your help but I meant different texts for the same scene yes.

5

this version comes with different texts in Scene 1


int scene = 1;
int messageCounter=0; 
boolean message1 = false;

void setup() {
  size(800, 600);
}

void draw() {
  if (scene == 1) {
    Scene1();
  } else if (scene == 2) {
    Scene2();
  } else {
    background(5, 0, 220);
    textSize(19);                //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("The END", 220, 190);
  }
}

//-----------------------------------------------------------------------------

boolean isPointInRectangle(float px, float py, 
  float rx, float ry, 
  float rw, float rh) {
  if (px >= rx &&
    px <= rx + rw &&
    py >= ry &&
    py <= ry + rh) {
    return true;
  }
  return false;
}

void Scene1() {
  background(255, 0, 0);

  if (!message1) {
    //drawing the text bubble
    stroke(0);
    fill(255);
    ellipse(300, 180, 300, 100);
    triangle(220, 220, 300, 220, 170, 300);  
    noStroke();
    rect(220, 220, 100, 10);
    //end of text bubble
  }

  //drawing the arrow only when the text is finished
  if (message1 == true) {
    fill(0);
    triangle(750, 300, 750, 340, 790, 320);
  }
  //end of the arrow

  if (messageCounter==0) {          
    textSize(19);      //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("This is test scene1", 220, 190);
  } else if (messageCounter==1) {          
    textSize(19);      //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("   Yes    ", 220, 190);
  } else if (messageCounter==2) {          
    textSize(19);      //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("    No ", 220, 190);
  } else if (messageCounter==3) {          
    message1=true;
  }

  if (!message1) {
    fill(0);
    textSize(19);
    text("Click on the screen", 300, 590);
  } else {
    fill(0);
    textSize(19);
    text("Click on the Arrow", 300, 590);
  }
}

void Scene2() {
  background(255, 220, 0);

  if (!message1) {
    //drawing the text bubble
    stroke(0);
    fill(255);
    ellipse(300, 180, 300, 100);
    triangle(220, 220, 300, 220, 170, 300);  
    noStroke();
    rect(220, 220, 100, 10);
    //end of text bubble
  }

  //drawing the arrow only when the text is finished
  if (message1) {
    fill(0);
    triangle(750, 300, 750, 340, 790, 320);
  }
  //end of the arrow

  if (messageCounter==0) {          
    textSize(19);                //test dialogue for now. If you press the mouse there is dialogue
    fill(0);
    text("!!!This is test scene2 !!!", 220, 190);
  } else if (messageCounter==1) {
    // 
    message1=true;
  }

  if (!message1) {    
    fill(0);
    textSize(19);
    text("Click on the screen", 300, 590);
  } else {
    fill(0);
    textSize(19);
    text("Click on the Arrow", 300, 590);
  }
}

void mousePressed() {
  messageCounter++;
  if (message1 && mousePressed & 
    isPointInRectangle(mouseX, mouseY, 750, 300, 40, 40)) {
    scene = scene + 1;          // if you click on the triangle on the screen you go to the next scene
    message1 = false; // reset
    messageCounter=0;
  } else {
    //  message1 = true;
  }
}
//
1 Like
6

Wow man thank you so much I will read through it and see if I understand everything.

1 Like
7

messageCounter is just doing the different texts. When messageCounter reaches maximum we say message1=true;

to be honest though, would that be a very long winded and erroneous way if you have multiple screens and multiple messages.

In this case, arrays would be better.

for a similar sketch with arrays see here: Any idea how to fix this? Quiz

1 Like