Alexx
Member
GM Version: 1.4.1757
Target Platform: Windows
Download: www.gamemakerbook.com/GMZ/Branching_Dialogue_Zip.zip
Flow-Chart:
Screenshot:
An interactive dialogue system is an essential part of an RPG.
When interacting with other characters in game you want to be able to hold up a decent conversation. Basing the dialogue on the responses that the player makes is the way to go. For example if the character asks: “How are you today?”
You may want to answer “Yes, I’m fine.”,or,”No, I’m having a bad day.”
The other character’s next response is based on whether you say yes or no. This branching is pretty logical, and this example includes a diagram, see figure above. I strongly suggest using a chart or similar method in your own games, as it can get very complicated, very quickly. For each level you add, you’ll be doubling the number of options available, ie for 5 levels, there will about 32 possible outcomes, that’s 63 different sentences!
The flow of conversation therefore can be very dynamic and engaging. As-well as providing dialogue, you can make other changes, for example give the player some gold (in this example), reward with an item, unlock a door, go to a mini quest/game, etc.
The approach shown in this example is basic, but is easy to understand and allows for quick customization. The example provides for two options for each question, but you could expand to three or more by adding more array elements.
As you can see from the above diagram, it’s all pretty logical. For clarity - a positive choice (first option) divides to left and a negative choice (second option) divides to right.
We’ll create a room room_setup with one object in it, obj_diag_set_up_and_splash.
The code for it is, in the Create Event:
We’ll dissect one element for clarity:
The first element, global.diag[1,1] is the question that is being asked.
The second element, global.diag[1,2] is the first option available, ie the positive response.
The third element, global.diag[1,3] is the second option available, ie the negative response.
The forth element, global.diag[1,4] tells where the target is if the first option, global.diag[1,2] , is selected, see the diagram where it shows this.
The fifth element, global.diag[1,5] tells where the target is if the second option, global.diag[1,3], is selected.
This is then repeated for the other elements.
You can offer one option, which is useful if you wish to offer a lot of text, ie going from question 15 to 16.:
You can also offer no options, as in question 14:
By setting the text to "". If the text is set to "" no text or button is shown.
That is all for this object and room.
The next room is room_example which has 4 objects.
The first object is obj_show_message. It has a Step Event with the code following, you won’t want to use this in your game, but will allow to restart this example quickly:
And a Draw Event with the code:
That is all for this object.
There are two button objects, the first is obj_button_one, the Left Mouse Button Pressed Event it:
Which set global.message to the next question. If global.message was 5 it will also add 1,000 gold.
And the Draw Event code, which will display an option if present, is:
The second button works in a similar way, obj_button_2 . The Left Mouse Button Pressed Event code is:
And the Draw Event is:
Finally there is an object, just as an example, obj_gold_hud with the Draw Event code:
There are also two fonts, font_message and font_message_big. Images are in the ZIP.
Target Platform: Windows
Download: www.gamemakerbook.com/GMZ/Branching_Dialogue_Zip.zip
Flow-Chart:
Screenshot:
An interactive dialogue system is an essential part of an RPG.
When interacting with other characters in game you want to be able to hold up a decent conversation. Basing the dialogue on the responses that the player makes is the way to go. For example if the character asks: “How are you today?”
You may want to answer “Yes, I’m fine.”,or,”No, I’m having a bad day.”
The other character’s next response is based on whether you say yes or no. This branching is pretty logical, and this example includes a diagram, see figure above. I strongly suggest using a chart or similar method in your own games, as it can get very complicated, very quickly. For each level you add, you’ll be doubling the number of options available, ie for 5 levels, there will about 32 possible outcomes, that’s 63 different sentences!
The flow of conversation therefore can be very dynamic and engaging. As-well as providing dialogue, you can make other changes, for example give the player some gold (in this example), reward with an item, unlock a door, go to a mini quest/game, etc.
The approach shown in this example is basic, but is easy to understand and allows for quick customization. The example provides for two options for each question, but you could expand to three or more by adding more array elements.
As you can see from the above diagram, it’s all pretty logical. For clarity - a positive choice (first option) divides to left and a negative choice (second option) divides to right.
We’ll create a room room_setup with one object in it, obj_diag_set_up_and_splash.
The code for it is, in the Create Event:
Code:
///Set Up Array To Hold Data
// 1 Question
// 2 Answer A
// 3 Answer B
// 4 Answer A Target [0 is none]
// 5 Answer B Target [0 is none]
global.diag[1,1]="Are You In A Good Mood?";
global.diag[1,2]="Yes, I'm In Great Mood.";
global.diag[1,3]="No, I'm Sad.";
global.diag[1,4]=2;
global.diag[1,5]=3;
global.diag[2,1]="That's Great!#Would You Like Some Cheese?";
global.diag[2,2]="Yes, I Love Cheese.";
global.diag[2,3]="No. I'll Pass.";
global.diag[2,4]=4;
global.diag[2,5]=5;
global.diag[3,1]="Too Bad.#Can I Sing You A Song?";
global.diag[3,2]="Yes. Sing Me A Shanty Song.";
global.diag[3,3]="No. I'd Rather You Didn't.";
global.diag[3,4]=6;
global.diag[3,5]=7;
global.diag[4,1]="Brie or Stilton?";
global.diag[4,2]="Brie, Please.";
global.diag[4,3]="Stilton, Please.";
global.diag[4,4]=10;
global.diag[4,5]=8;
global.diag[5,1]="How About Some Gold?";
global.diag[5,2]="Yes, I'm After Gold.";
global.diag[5,3]="No, I Have Enough Already.";
global.diag[5,4]=11;
global.diag[5,5]=14;
global.diag[6,1]="Yo Ho Ho & A Bottle Of Rum.#Want Some Rum?";
global.diag[6,2]="Yes. Hmm Rum.";
global.diag[6,3]="No. I Don't Drink.";
global.diag[6,4]=15;
global.diag[6,5]=12;
global.diag[7,1]="OK. Want To Go Fishing?";
global.diag[7,2]="Yes. Sounds Good!";
global.diag[7,3]="No. Fishing Is Boring.";
global.diag[7,4]=9;
global.diag[7,5]=13;
global.diag[8,1]="Yuck! I Prefer Brie.##[R To Restart]";
global.diag[8,2]="";
global.diag[8,3]="";
global.diag[8,4]=0;
global.diag[8,5]=0;
global.diag[9,1]="Awesome! I'll Get My Rod.##[R To Restart]";
global.diag[9,2]="";
global.diag[9,3]="";
global.diag[9,4]=0;
global.diag[9,5]=0;
global.diag[10,1]="Great Choice!##[R To Restart]";
global.diag[10,2]="";
global.diag[10,3]="";
global.diag[10,4]=0;
global.diag[10,5]=0;
global.diag[11,1]="Here's 1,000 Coins.##[R To Restart]";
global.diag[11,2]="";
global.diag[11,3]="";
global.diag[11,4]=0;
global.diag[11,5]=0;
global.diag[12,1]="Probably For The Best!##[R To Restart]";
global.diag[12,2]="";
global.diag[12,3]="";
global.diag[12,4]=0;
global.diag[12,5]=0;
global.diag[13,1]="OK Be Boring Then!##[R To Restart]";
global.diag[13,2]="";
global.diag[13,3]="";
global.diag[13,4]=0;
global.diag[13,5]=0;
global.diag[14,1]="No Gold! Your Choice.##[R To Restart]";
global.diag[14,2]="";
global.diag[14,3]="";
global.diag[14,4]=0;
global.diag[14,5]=0;
global.diag[15,1]="Don't Drink Too Much!##[R To Restart]";
global.diag[15,2]="Continue";
global.diag[15,3]="";
global.diag[15,4]=16;
global.diag[15,5]=0;
global.diag[16,1]="Maybe Just Have A Coffee.##[R To Restart]";
global.diag[16,2]="";
global.diag[16,3]="";
global.diag[16,4]=0;
global.diag[16,5]=0;
global.message=1;
global.gold=0;
room_goto(room_example);
Code:
// 1 Question
// 2 Answer A
// 3 Answer B
// 4 Answer A Target [0 is none]
// 5 Answer B Target [0 is none]
global.diag[1,1]="Are You In A Good Mood?";
global.diag[1,2]="Yes, I'm In Great Mood.";
global.diag[1,3]="No, I'm Sad.";
global.diag[1,4]=2;
global.diag[1,5]=3;
The second element, global.diag[1,2] is the first option available, ie the positive response.
The third element, global.diag[1,3] is the second option available, ie the negative response.
The forth element, global.diag[1,4] tells where the target is if the first option, global.diag[1,2] , is selected, see the diagram where it shows this.
The fifth element, global.diag[1,5] tells where the target is if the second option, global.diag[1,3], is selected.
This is then repeated for the other elements.
You can offer one option, which is useful if you wish to offer a lot of text, ie going from question 15 to 16.:
Code:
global.diag[15,1]="Don't Drink Too Much!##[R To Restart]";
global.diag[15,2]="Continue";
global.diag[15,3]="";
global.diag[15,4]=16;
global.diag[15,5]=0;
Code:
global.diag[14,1]="No Gold! Your Choice.##[R To Restart]";
global.diag[14,2]="";
global.diag[14,3]="";
global.diag[14,4]=0;
global.diag[14,5]=0;
That is all for this object and room.
The next room is room_example which has 4 objects.
The first object is obj_show_message. It has a Step Event with the code following, you won’t want to use this in your game, but will allow to restart this example quickly:
Code:
if keyboard_check_released(ord('R'))
{
game_restart();
}
Code:
draw_self();
draw_set_font(font_message_big);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_colour(c_black);
draw_text(x,y,global.diag[global.message,1]);
There are two button objects, the first is obj_button_one, the Left Mouse Button Pressed Event it:
Code:
///Example Do Something - ie choose yes to question 5
if global.message=5
{
global.gold+=1000;
}
//for every click
global.message=global.diag[global.message,4];
And the Draw Event code, which will display an option if present, is:
Code:
if global.diag[global.message,2]!=""
{
width=string_width(global.diag[global.message,2]);
if width>50 // adjust image size if a long text option
{
size=(250+(width-50))/250
image_xscale=size;
}
draw_self();
draw_set_font(font_message);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_colour(c_black);
draw_text(x,y,global.diag[global.message,2]);
}
Code:
global.message=global.diag[global.message,5];
And the Draw Event is:
Code:
if global.diag[global.message,3]!=""
{
width=string_width(global.diag[global.message,3]);
if width>50 // adjust image size if a long text option
{
size=(250+(width-50))/250
image_xscale=size;
}
draw_self();
draw_set_font(font_message);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_colour(c_black);
draw_text(x,y,global.diag[global.message,3]);
}
Code:
draw_set_font(font_message_big);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_colour(c_black);
draw_text(room_width/2,room_height-50,"Gold: "+string(global.gold));
Last edited: