Intro

Let's create a simple textbox for NPC dialogs to replace our ugly on-screen text.

Adding the textbox panel

We'll begin by creating a panel, with a group (just for better looks!) and a text element. The panel will be initially hidden, and the text will be empty:

if !(ui_exists("Panel_NPC_Textbox")) {
    var _panel = new UIPanel("Panel_NPC_Textbox", 0, 30, 500, 100, glass_panel, UI_RELATIVE_TO.TOP_CENTER);
    _panel.setResizable(false).setMovable(false);
    _panel.setVisible(false);

    var _grp_margin = 20;
    var _grp = new UIGroup("Group_NPC_Textbox", 0, 0, _panel.getDimensions().width - _grp_margin, 80, lt_box_9slice_c, UI_RELATIVE_TO.MIDDLE_CENTER);
    _panel.add(_grp);

    var _txt = new UIText("Text_NPC_Textbox", 0, 0, "", UI_RELATIVE_TO.MIDDLE_CENTER);
    _txt.setTextFormat("[fnt_UI][fa_center][fa_middle][scale,2]", true);
    _txt.setTypist(self.typist);
    _grp.add(_txt);
}

Adding a typist for the text

In order to animate the actual text and make it look even nicer, we're adding the setTypist method, that allows us to assign a Scribble typist to the text that will animate it in a typewriter style. For this to work though, we need to create and configure that typist in the Create event of the Game controller. We will set the typist speed, and we'll assign a function on animation complete that, after 3 seconds, resets the typist and hides the panel (you can take a look at the official Scribble documentation to learn more):

self.typist = scribble_typist();
self.typist.in(0.5, 0);
self.typist.function_on_complete(function() {
    call_later(60*3, time_source_units_frames, function() {
        self.typist.reset();
        ui_get("Panel_NPC_Textbox").setVisible(false);
    });
});

Creating a helper to set the text

Let's also create a helper method that sets the text. This will set the actual UIText's text value, it will also dynamically determine the width in order to resize the panel (and group) to the required size (note that getTextWidth is a method only available in 2025.11+) and it will set the panel as visible:

self.set_text_textbox = function(_text) {
    ui_get("Text_NPC_Textbox").setText(_text);
    var _w = ui_get("Text_NPC_Textbox").getTextWidth()+40;
    ui_get("Panel_NPC_Textbox").setDimensions(,,_w).setVisible(true);
    ui_get("Group_NPC_Textbox").setDimensions(,,_w - 20);
}

Setting the textbox when the NPC talks

We're almost ready to make it work. We just need to modify the NPC's process_quest method to use the aforementioned method instead of its current message logic:

Game.set_text_textbox("I need you to do some work for me!");

Game.set_text_textbox("Thanks! Here's some money...\nCome back later if you want to run more errands!");

Game.set_text_textbox("Come back when you've finished the quest!");

The final result

With this simple code, we've created a fantastic looking textbox for our NPC!

An NPC textbox ready with a few lines of gooey code.