Forums » Help » Building a chat bubble/dialogue.

I am in the process of building a chat bubble for my game. The problem is I can't get my head around how to properly store 3 lines of sentences within an array and move onto the next set. I managed to set all the correct width and it looks exactly like it does below on screen.

So let's say I have a total of 8 sentences for a particular dialogue.

Because my chat bubble's height will only accommodate 3 lines of sentences at any given time. I therefore would like to move onto the next set of 3 lines of sentences after the user has tapped a game key, eventually bringing them to the end of the complete dialogue and then back to the beginning to start over again.

This code is what I have so far, which displays all 8 sentences. I realise that there is a lot of missing code, but keep in mind there is an `update()` method constantly running that I have waiting for the key press to move onto the next set of sentences.

Update method:

update: function() {
    if (ig.input.pressed('shoot')) {
        console.log('Move onto next set..');
    }
}

Draw method:

draw: function() {
    var sentences = ["THE QUICK BROWN FOX",
      "JUMPS OVER THE LAZY",
      "DOG. WHILE THE QUICK",
      "FOX JUMPS OVER THE",
      "LAZY DOG. WHILE THE",
      "QUICK FOX JUMPS OVER",
      "THE LAZY DOG. WHILE",
      "THE QUICK BROWN FOX."];

    for (x = 0, y = sentences.length; x < y; x++) {
        var fontX = this.pos.x - ig.game.screen.x + this.textOffset.x;
        var fontY = this.pos.y - ig.game.screen.y + this.textOffset.y + x * yOffset;
        this.font.draw(sentences[x], fontX, fontY, ig.Font.ALIGN.LEFT);
    }
}

This is currently how it looks in game:

THE QUICK BROWN FOX
JUMPS OVER THE LAZY
DOG. WHILE THE QUICK
FOX JUMPS OVER THE
LAZY DOG. WHILE THE
QUICK FOX JUMPS OVER
THE LAZY DOG. WHILE
THE QUICK BROWN FOX.

I hope this all makes sense. If you need me to elaborate on anything else or provide any further code, please let me know.

Thanks in advance.

my guess is that you need an array of dialogs, hence an array of arrays of lines. you can store them within an array for each character, and store in another array which sentence replies to which... and it will soon become very complicated.
You need to store dialogs in a separate file (text file) that will have a structured content : which character is talking, to which dialog this dialog is a reply, ... , xml could help here, especially since you can find javascript tools to parse an xml file easily.
But to answer you question :
(i added an idle timer, because i don't see why WE suffered from waiting to confirm every 3 lines during hours in Zelda, and new players wouldn't suffer also :-) ).

allPhrases :    [  [ "Hello", "How are you ?" ],   
        ["Yes","We should go", "monsters are coming", "they will be here", "soon"  ],  
        [ "Luke", "you have to know", "Shubaka", "is","your","brother"  ] ],
bubbleLineHeight : 3 ,

isTalking : false,
currentPhrase : "",
currentStartLine : -1,
idleTimer : null,   // do not create the timer here: it would be shared by all entities
idleTime : 0.5, // delay to wait before handling user input  

// ... in the init ...
this.idleTimer=new ig.Timer(-1); 
// ...

talk : function (phraseIndex) 
{
  this.currentPhrase = this.allPrases[phraseIndex];
  this.isTalking = true;
  this.currentStartLine = 0;
  this.idleTimer.set(this.idleTime); 
},
update : function() 
{
   this.parent();
   if (this.isTalking)
      {
           if ( (this.idleTimer.delta()>0)  && (ig.input.pressed('shoot')) )
              {
                   console.log('Move onto next lines set..');
                   this.currentStartLine += this.bubbleLineHeight;
                   // ?? ended talking ??
                   this.isTalking  = (this.currentStartLine < this.currentPhrase.length);
               }
       }
},
draw: function() {
    this.parent();
    if (this.isTalking)
     {
    var lastLineIndex = Math.min( this.currentLine+this.bubbleLineHeight,  
                              this.currentPhrase.length-1 ) ;  
    var lineNumber =0;  
    for (var currLine = this.currentLine ; 
                              currLine<lastLineIndex ;        currLine++,  lineNumber++ )  
        this.drawSentenceLine( this.currentPhrase [currLine], lineNumber);  
   }       
},
drawSentenceLine: function (sentenceLine, lineIndex)
 {
    var fontX = this.pos.x - ig.game.screen.x + this.textOffset.x;
    var fontY = this.pos.y - ig.game.screen.y + this.textOffset.y   
                                                                         + lineIndex * yOffset;
    this.font.draw(sentenceLine, fontX, fontY, ig.Font.ALIGN.LEFT);
 }
  

@vincentpiel: I've grabbed a few snippets of code from your answer and a couple of different places. It's definitely helped. Thanks for pointing me in the right direction.