# Simple dialogue system

**URL:** <https://discourse.processing.org/t/simple-dialogue-system/15616>\
**Category:** Coding Questions\
**Created:** [November 18, 2019, 5:17pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616 "2019-11-18T17:17:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kinglucas](https://avatars.discourse-cdn.com/v4/letter/k/53a042/32.png) [@kinglucas](https://discourse.processing.org/u/kinglucas)\
**Post date:** [November 18, 2019, 5:17pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/1 "2019-11-18T17:17:03Z")

</div>

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.

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 18, 2019, 6:16pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/2 "2019-11-18T18:16:34Z")

</div>

```auto

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;
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 18, 2019, 6:35pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/3 "2019-11-18T18:35:46Z")

</div>

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) {`

---

<div class="post-metadata">

**Author:** ![kinglucas](https://avatars.discourse-cdn.com/v4/letter/k/53a042/32.png) [@kinglucas](https://discourse.processing.org/u/kinglucas)\
**Post date:** [November 18, 2019, 6:43pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/4 "2019-11-18T18:43:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 18, 2019, 7:09pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/5 "2019-11-18T19:09:47Z")

</div>

this version comes with different texts in Scene 1

```auto

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;
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![kinglucas](https://avatars.discourse-cdn.com/v4/letter/k/53a042/32.png) [@kinglucas](https://discourse.processing.org/u/kinglucas)\
**Post date:** [November 18, 2019, 7:36pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/6 "2019-11-18T19:36:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 18, 2019, 8:47pm UTC](https://discourse.processing.org/t/simple-dialogue-system/15616/7 "2019-11-18T20:47:47Z")

</div>

`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](https://discourse.processing.org/t/any-idea-how-to-fix-this-quiz/15418/6)