Forums » Help » I'm kind of stuck with my dialog box

Hello everyone,

my game is going to have long dialogs. And many of them are too big to fit into the the dialog box. That's why i'm trying to creat a dialog system that can splitt these long dialogs into smaller parts which are at a maximum of 4 rows long. And later I want to give the player the chance to response in special situations with for example " "yes", or "no".

Currently I managed that just 4 of my 9 lines long text is getting shown but unfortunatley I can't seem to exchange the old lines with the new ones.

Can someone tell me what I'm doing wrong, or if there is a better way of archieving what I want?
Anyway here is my code:

Chattext Entity

update: function() {
		if(ig.game.pause ==false) {
			
			// conversation ended, kill this
			if(ig.game.unterhaltung==false || ig.game.reden==false){
				 this.kill();
			 }
		}
	},
	   
	 draw: function () {
     	this.chat();
	},
	
	chat: function(){
		  var row = 0;
		  var currentLine= 0;
		  var maxRow=4;
		  var xPosition = ig.system.width/5;
		  var yPosition = ig.system.height/4.8;
		  
		//draw text	
		for (i=0 ;  row < maxRow; i++) {
			
			if(row< maxRow) {
				
				this.font.draw(ig.game.npc.text[currentLine], xPosition, yPosition+30*row);
				currentLine++;
				row++;
			}
		}
		
		//if text is drawn but the end not reached draw the rest if a is pressed 
		if (row==maxRow && ig.input.pressed('a') && ig.game.ende==false) {
			 row=0;
		}
		// if end is true and a is pressed, quit this conversation
	 	if (row==maxRow && ig.input.pressed('a') && ig.game.ende==true) {
			ig.game.reden=false;
			ig.game.unterhaltung =false;
		}
		// if all text has been shown set var end on true
		if(currentLine == ig.game.npc.text.length){
			ig.game.ende=true;	
		}
		
	}

And the Text array is always stored in the specific NPC Character and is currently looking like this

npc character

ig.game.npc={
  			name:[ "> Neko <"],
			response : [false],
			
			text:["Hey" + " " +ig.game.spieler.haupcharakterName,
			"how are you doing today?",
			"I hope you are doing fine!!! Well I kind of",
			"need to talk a little bit more for testing matters. ",
			"So please excuse me for talking nonesense...",
			"I just hope everything will work out soon.... ",
			"becouse then I wouldn't get used for such stupid",
			"testing matters anymore. But oh well, I guess",
			"it can't be helped. This should be enough text for now"],
		};

Thanks for everyone who is sacrificing his time to help me :) I really appreciate every help.

Hello,

It doesn't look like you are really tracking the state of where the user is in the dialog.

for example, this is reset every call:

var currentLine= 0;

Judging from the following line I would only expect currentLine to be in the range of 0..(maxRow-1):

this.font.draw(ig.game.npc.text[currentLine], xPosition, yPosition+30*row);

Another approach to the problem might be to track what line is the top line. You could do this in the init method:

init: function() {
  this.topLine = 0;
}

And from there you can change your draw logic to something like:

this.font.draw(ig.game.npc.text[i+this.topLine], xPosition, yPosition+30*row);

And then increment the topLine as you press 'a':

this.topLine += number of lines that were being rendered

Hope this helps

First of all thanks for helping me out FragOnly :D. But I still can't seem to make it work :/

Quote from FragOnly

It doesn't look like you are really tracking the state of where the user is in the dialog.

for example, this is reset every call:

var currentLine= 0;

Upps yes you are of course right.... I didn't put these vars back after I tried rewriting everything >_>

Anyways I think I didn't described the actual problem good enough...

The text always updated itself correctly but it was only visible for an instand and then disappeared.

I tried to do it the way you said and it worked as much as the way I tried. It updated itself but then quickly dissappeared...

If i'm trying to console.log everything it is showing me these results:

maxRow of course is always staying 4.

row is rising until it is reaching the allowed maxRow number, in this case 4. after pressing a it is resetting itself to 0 again.

currentline is rising based on how much lines had been drawn.... something like this ----> 1,2,3,4 and then if 'a' has been pressed 5,6,7,8 and so on.

Would it be possible to post a minimalistic project of your system (without the impact libraries of course!)?

Of course it is!

Besides all Impact libary files I deleted everything that is not necessary for the conversation system (including all background and character graphics). So you now only have one player (the white box) with it's basic movementsand one npc character (the orange coloured box).

Pressing 'a' if you are close enough to the NPC Character should trigger the conversation to start. And if you would keep pressing 'a', the conversation should continue until there is nothing left to say (this will close the conversation box).

The entity 'chat' is simply for drawing a white box, so pretty much unimportant.

The conversation is starting in the 'main.js' file. The file 'neko.js' is loading the text array and is checking if the palyer is close enough to start the conversation. And the main logic of the conversation is getting handled in 'chattext'.

I think becouse of all the deleted code and files you should easily be able to find everything important. But if something isn't clear just ask.

Anyway, thanks a lot for the help

And here is the file https://dl.dropboxusercontent.com/u/51029492/thanks_for_helping_me_out.7z

Hello,

I think you were pretty close:

I felt like you had to many if statements, some of which were very close to each other but were being called on multiple frames, so I simplified them down:

        // the user has pressed a but the chat is not over
        if(ig.input.pressed('a')) {
            this.currentLine += maxRow;

            // check to see if we are not over the chat
            if(this.currentLine >= ig.game.npc.text.length) {
                this.currentLine = 0;
                ig.game.reden=false;
                ig.game.unterhaltung =false;
            }
        }

In the above section of code I also implemented the the increment based off of the maxRow, some what like I described in my previous post.

After that I simplified the for loop logic, and based everything off of the i variable instead of updating the values, this solved a couple of issues, one of which was the flickering.

       if( this.currentLine<ig.game.npc.text.length) {
            for (i=0 ;  i < maxRow; i++) {
                var row = this.currentLine + i;

                // if the row is out of bounds of the text then stop drawing
                if(row >= ig.game.npc.text.length) {
                    break;
                }

                this.font.draw(ig.game.npc.text[row], xPosition, yPosition+30*i);
            }
        }

After those two quick changes we have the following bit of code:

    chat: function(){
        var maxRow=4;
        var xPosition = ig.system.width/5;
        var yPosition = ig.system.height/4.8;

        //draw text
        if( this.currentLine<ig.game.npc.text.length) {
            for (i=0 ;  i < maxRow; i++) {
                var row = this.currentLine + i;

                // if the row is out of bounds of the text then stop drawing
                if(row >= ig.game.npc.text.length) {
                    break;
                }

                this.font.draw(ig.game.npc.text[row], xPosition, yPosition+30*i);
            }
        }

        // the user has pressed a but the chat is not over
        if(ig.input.pressed('a')) {
            this.currentLine += maxRow;

            // check to see if we are not over the chat
            if(this.currentLine >= ig.game.npc.text.length) {
                this.currentLine = 0;
                ig.game.reden=false;
                ig.game.unterhaltung =false;
            }
        }
    }

In the demo you gave you can place that right over the existing chat method and it works. Try playing around with it and comparing the two different approaches.

Oh wow thanks a lot :D you really are my life saver .

And yes you are of course right, about me using too many if statements. When it didn't worked the way I wanted it to, I tried to add more and more uneeded code instead of solving the problem at it's core and simplifying it.

Anyway, it's good to know what I was doing wrong all the time. I think it will save me much trouble in the future.

And of course I will make sure to give you a special thanks in the credits of my game after I finished it :D (which probably will still take a while..)