Using Scribble and Chatterbox for Dialogue in Game Maker Studio 2
Prerequisites:
- Scribble 7.1.2
- Chatterbox 2.1.0
- Crochet (Dialogue Editor, optional)
Hello! Today, I’ll be covering how to use Scribble and Chatterbox to create a combined dialogue engine in Game Maker Studio 2. This can be used for any kind of project that requires dialogue, but it’s especially useful for visual novels, RPGs, or anything that requires branching conversations. I actually covered this over a year ago, but there were some big changes to Scribble and Chatterbox in the meantime…and there’s more coming, but hopefully this will remain useful even so!
A caveat: I’m what I like to call a “utility programmer”. I know just enough to get things working, and what to look up when I’m stuck. I started making Retrace with very little coding experience and largely learned as I went along. There are probably more efficient and elegant ways to do what I’m about to show you, but this guide is primarily for fellow non-programmers.
This tutorial assumes you know the basics of Game Maker, as well as terms like “variable” and “object”. If you don’t, I recommend trying one of the Game Maker tutorial projects first to get familiar with the engine. It’s also useful to have the official Game Maker documentation open in another tab in case you need to look anything up!
You’ll also need to have downloaded the latest stable releases of Scribble and Chatterbox (7.1.2 and 2.1.0 respectively at the time of writing), and the Crochet dialogue editor (technically in alpha, but it’s fine).
Go ahead and import the .yymps files to your Game Maker project. Congrats, you now have a bunch of scripts!
This is where I’m passing the buck firmly over to the setting-up guide for Scribble. It’s pretty simple, the most fiddly part is getting the fonts set up so that Scribble can read them properly. I’m putting my font initialisation in the Creation Code for Room1 in the new project I just set up, but in a real project you should have a dedicated initialisation process. Maybe I’ll talk about that some other time.
Okay, Scribble set up? Great! Let’s make sure we’ve got some dialogue for it to show.
To do that, we’ll be opening up the Crochet editor. You can, technically, write in a plain .txt file and convert that to a .json if you want, but this is easier. You’ll see an empty node the first time you load the editor. Go ahead and write a few lines of text. You’ll definitely want to check out the Chatterbox documentation for anything more complicated, but for now we’ll focus on the most basic branching dialogue.
Here’s some example dialogue!
Those -> there are shortcut options. They’re the basic building blocks of branching in Yarn-slash-Chatterbox … which I’m not going to get into, at least in this tutorial. The dialogue after -> is displayed to the player as a choice, and under it is the “response”.
Now that you’ve got your dialogue, let’s Ctrl+S to save that baby —
…Or not. Yep, you need to go up to the top bar in Crochet and export your file. For this, we want to export it as a Yarn file, and put it in the datafiles folder of your Game Maker project. (If you don’t know where this is, go to your Asset Browser -> click the hamburger/menu icon -> go to Included Files -> “open in Explorer” and drag it in there. Once you’ve done that, reopen it as instructed. This is where your dialogue will be written!
Hoo! We’ve got some text! Now we want to show it to the player. For this we’ll need an object, so go ahead and create one. Mine’s called oDialogueShower, because I am very literal in my naming conventions. We’ll need three actions: Create, Step and Draw (or Draw GUI — if you don’t know what that means then ignore it for now. That’s a whole other tutorial.)
This is where we’re gonna bring Scribble into the mix. Think of it like this: you put your text into Chatterbox (via Crochet). It turns that into a file that Game Maker can read and know how to display things like choices, send players to the right dialogue after a choice, things like that. Then, you use Scribble to tell Game Maker how it should display that dialogue. Scribble’s a very powerful tool that you can do a lot with, but we’ll keep it simple again for now.
Here’s your create event:
//Load your file.
ChatterboxLoadFromFile("scribbox_test.yarn"); //or whatever you called yours// Create Chatterbox
global.chatterbox = ChatterboxCreate("scribbox_test.yarn");
// Initialise Chatterbox by jumping to a node ("Start")
ChatterboxJump(global.chatterbox,"Start");
// Get Content from Chatterbox
text = ChatterboxGetContent(global.chatterbox,0);
nodeTitle = ChatterboxGetCurrent(global.chatterbox);
Or, in plaintext: “Create a Chatterbox using the .yarn file specified. Go to the node “Start” in the Chatterbox global.chatterbox. Set the variables “text” and “nodeTitle” to the content and the current node (we’ll use them later).”
(It may be useful here to know that “a Chatterbox”, as in the noun separate from Chatterbox-the-dialogue-engine, is the aforementioned version of your Yarn file transformed so that Game Maker can read it. It has a bunch of information stored inside it in the form of a struct. If you don’t know what that is, don’t worry about it yet. It’s a thing that stores information, like any other variable.)
So that happens when our object spawns. What should it do after that? We define that in our Step event:
//If Chatterbox is waiting for input, see if it has any!
if ChatterboxIsWaiting(global.chatterbox){//You can use any key here. I like Space.
if keyboard_check_pressed(vk_space)
{
ChatterboxContinue(global.chatterbox);
text = ChatterboxGetContent(global.chatterbox,0);
nodeTitle = ChatterboxGetCurrent(global.chatterbox); }
}
else if (ChatterboxGetOptionCount(global.chatterbox)) //If Chatterbox is presenting the user with some options, check for that
{
var _select = undefined; // What the user selected.
//You'll need more of these if you have more than three options, of course!
if (keyboard_check_released(ord("1"))) _select = 0; if (keyboard_check_released(ord("2"))) _select = 1; if (keyboard_check_released(ord("3"))) _select = 2;//If we've pressed a button, select that optionif (_select != undefined) {
ChatterboxSelect(global.chatterbox, _select);
text = ChatterboxGetContent(global.chatterbox,0);
nodeTitle = ChatterboxGetCurrent(global.chatterbox); }
}
Here, we’re using two of the states Chatterbox can tell us it’s in: if it’s waiting for a “Continue” input, or if it’s waiting for a choice to be selected. “If it’s waiting, check if the player has pressed the Continue key (space, here), and if they have, continue the dialogue. If it has options, check for the player pressing an Option key (1,2 or 3 here), and if they have, direct the dialogue to that choice.”
Now we know what to do with our dialogue…but the player can’t see what they’re doing! Let’s fix that with our Draw event.
var _x = 100;
var _y = 100;
//Where we’re going to draw the text. Obviously, you can set it to whatever.//If the Chatterbox has run out of things to say, kill it.
if ChatterboxIsStopped(global.chatterbox){
instance_destroy(self);
}if IsChatterbox(global.chatterbox) and text != undefined{
//Making sure it exists, to avoid errors. Draw happens before Step, so sometimes the order can get a bit odd; that’s why we have safety checks!
//Same with “undefined” — I kept getting a brief frame of “undefined” before the Chatterbox closed properly, so…just don’t let it draw that!
//This is where I’d draw a dialogue box, portraits, etc…IF I HAD ONE!
//Instead let’s draw some text.
_element = scribble(text);
_element.draw(_x,_y);
//If we have options, indent them slightly, add a number indicator, and draw them.
if (ChatterboxGetOptionCount(global.chatterbox)){
_x += 30;
_y += 30;
for (var _i = 0; _i < ChatterboxGetOptionCount(global.chatterbox);_i++){
var _option = scribble(string(_i+1) +”: “ + ChatterboxGetOption(global.chatterbox, _i));
//_i starts at 0, but we want the choices to be numbered 1–2–3 not 0–1–2, so we +1 to it when we make our string to draw.
_option.draw(_x,_y);
_y+=30;
}
}
}
Well, our whitespace got a bit messed up, but you get the idea. “Set the top left corner of where we want to draw. Make sure we have something to draw, then draw it. If we have options, draw those too.”
Now, making sure Scribble is initialised, and putting our object inside the starting room, let’s try running our game…
Incredible! … Well, you can’t see my keypresses, but I promise it works! If you get an error here, the first place to check is that your dialogue file and Scribble fonts are correct. (Note: Technically, you could follow this tutorial and just use draw_text instead of Scribble if that gets too hard … But Scribble’s good! It’s worth it!) But, all going to plan, you should now have a very basic piece of branching dialogue!
Next time, I’ll talk about making it actually look like dialogue, with text boxes, typewriter-style fadeins, and even…portraits?!
Credits: Juju and everyone who worked on Scribble and Chatterbox; Faulty for Crochet; Gleeson, from whose in-progress Chatterbox tutorial I referenced a bunch of this; everyone who made my original tutorial so popular (?!)
Follow the studio at @spiderlilygames on Twitter for updates on Schrodinger’s Catgirl, and more tutorials!
