Game Maker Draw Text Box
Today's coffee-break tutorial covers a bang-up consequence that is useful in a wide variety of situations. Making a dialogue object that has lines of text that appear a letter of the alphabet at a time, just like it was existence written on a typewriter! How to brand an effect similar this is a recurrent question we run into come upwardly on the forums and other social platforms, and while there are a number of keen avails out in that location that will permit you to do this. Nosotros idea we would prove you how this can exist washed in the simplest form, so you can learn and have base to build your own text systems.
Annotation: This tutorial is for people that use GML. If y'all prefer to use DnD to brand your games, nosotros accept a companion article for you lot hither.
GETTING STARTED
For this tutorial, you volition need to create a new project in GameMaker Studio ii as we'll be starting from scratch. In this projection yous should add a new font asset and give it a name (in this tutorial nosotros'll be calling it merely fnt_dialog), and and then add together a new object asset and name it obj_dialog):
We'll be adding all our lawmaking into the dialog object and the idea is that we'll be creating an array of text, where each item in the array is a complete sentence or paragraph of text, and and so nosotros'll be taking that text and drawing simply a department of information technology each step, advancing the section to show a new alphabetic character little by trivial to create the typewriter effect. So, allow's become started...
THE STRING_WRAP Function
Before nosotros add together any code into our dialog object, nosotros need to first ascertain a function that we'll need to deal with wrapping text that is too long for the space we want to draw it in. Now, GameMaker Studio two has a GML function draw_text_ext that can be used to automatically wrap text when information technology overflows a given length, and in many cases that will exist perfectly fine to use. However, since nosotros volition be drawing our text a letter of the alphabet at a time, this function causes an upshot where words volition start to appear on one line, then "jump" to the next every bit the GML office detects that they are now longer than the maximum width. You can see this happening in the post-obit GIF:
To prevent this from happening, we are going to take our input string and so run it through a function that will add in the required line breaks based on the position of spaces in the text. This will mean that the string will exist pre-formatted to go to a new line before information technology's even drawn.
You lot should brand a new Script asset for this and while you can name information technology anything you lot wish, for the sake of this tutorial, we'll telephone call it the same as the function information technology's going to contain: string_wrap. In the script y'all'll run into that in that location is already a base of operations function definition prepared for use and and so we'll edit it to await like this:
/// @role string_wrap(text, width); /// @param {string} text The text to wrap /// @param {real} width The maximum width of the text earlier a line intermission is inserted /// @description Take a cord and add line breaks so that it doesn't overflow the maximum width role string_wrap(_text, _width) { var _text_wrapped = ""; var _space = -1; var _char_pos = one; while (string_length(_text) >= _char_pos) { if (string_width(string_copy(_text, ane, _char_pos)) > _width) { if (_space != -one) { _text_wrapped += string_copy(_text, one, _space) + "\n"; _text = string_copy(_text, _space + 1, string_length(_text) - (_space)); _char_pos = 1; _space = -i; } } if (string_char_at(_text,_char_pos) == " ") { _space = _char_pos; } _char_pos += ane; } if (string_length(_text) > 0) { _text_wrapped += _text; } return _text_wrapped; } All this script is doing is looping through the given string a letter at a time and checking to run into if the length of the string after each letter is added to it overflows the permitted text width, while also storing the position of the last space found between words in a variable. If the text does overflow the given width, and so the function adds a line pause ("\n") into the text at the last space, then continues on, and information technology will do this for the entire length of the given text, adding as many line breaks as required.
THE CREATE Event
With that done, we can plough our attention to the dialog object and actually start to code our typewriter effect. To start with we need to add a Create Event to gear up some variables that our object will demand. We'll need quite a few variables to command things, so we've broken it into sections of variables to make it easier, so add together a Create Issue to the object now, and then add this starting time set of variables:
text[0] = "Hello Globe"; text[1] = "This is a really, actually, really, long and featherbrained string to test that the line wrapping works okay."; This starting time blog defines an array which is what nosotros'll utilize to contain each of our lines of dialogue. Here we're adding in two lines, just you can add more as you wish, just make sure that y'all increment the array position for each line. Now add the following:
text_current = 0; text_last = i; text_width = 300; text_x = 32; text_y = 32; This next prepare of variables initialises all the controller variables that will exist required to depict our text using the typewriter effect. These variables are as follows:
-
text_current: this will be used to tell GameMaker what the current text array position to utilise for the text. -
text_last: this will exist used to tell GameMaker what the last array position is, in this case ane equally nosotros take ii positions - 0 and one - in our array. For an assortment with position 0, 1, 2, and 3, and so this variable would be set to three. -
text_width: this is the maximum width that we want the text to be drawn before it wraps to a new line -
text_x: the 10 position where nosotros desire to draw the text in the room -
text_y: the Y position where we want to draw the text in the room
The last set up of variables to add looks like this:
char_current = i; char_speed = 0.25; These two variables will command the currently terminal character of the text being fatigued, and the timing of when each character is fatigued. Past changing the variable char_speedyou can change how fast or dull the text appears on the screen.
The last thing to exercise in our Create Event is to call the function nosotros created earlier on the showtime line of text we'll be cartoon so that it wraps correctly within the given width:
text[text_current] = string_wrap(text[text_current], text_width); KEY PRESS "Infinite" Effect
Most typewriter effects permit y'all to skip the effect in some way, then nosotros'll exist adding this into our own instance. We desire the skip outcome to work in two different means:
-
If the current line hasn't finished being drawn, then pressing skip will describe the whole line right to the end instantly
-
If the current line has finished beingness drawn, then pressing skip will go to the next line and first cartoon that
We'll do this using the Space key on the keyboard, but you can use whatever input method you lot desire as the code we'll evidence will be the aforementioned. And so, add a Keyboard Pressed - Space event to the dialog object now. First, we'll check the length of the whole string being drawn against the current position of what is actually being drawn, like this:
var _len = string_length(text[text_current]); if (char_current < _len) { char_current = _len; } All this does is set the currently last grapheme being drawn to the last character in the whole string, so the whole string will instantly exist displayed. If the whole string is already being displayed, then we need to use an elseand add into that the following:
else { text_current += 1; if (text_current > text_last) { room_restart(); } else { text[text_current] = string_wrap(text[text_current], text_width); char_current = 0; } } Here nosotros advance the variable that tells GameMaker which assortment position to get the text from, and and then nosotros check to meet if we've advanced exterior of the size of the array. If we accept, so nosotros restart the room, but that's just for this tutorial. Commonly you'd so destroy the dialog object or have your game perform some action here. If at that place is even so more text in the assortment, so we call our string_wraprole to add together line breaks to the next line to be displayed and reset the currently final graphic symbol to the starting time of the cord ready to display it letter-past-letter once more.
THE Describe Event
The draw event is probably the simplest of all to set up and nosotros'll start by setting how we want the text to be displayed past choosing a font, position and color. Add a Describe Consequence now and requite information technology this code to prepare the text formatting:
draw_set_font(fnt_dialog); draw_set_halign(fa_left); draw_set_valign(fa_top); draw_set_colour(c_white); With that washed, information technology'southward time to actually draw our dialogue text! First, we need to check the current last graphic symbol of the text existence drawn, and if it's not the terminal character of the whole text, advance it by the speed that we set in the create result:
var _len = string_length(text[text_current]); if (char_current < _len) { char_current += char_speed; } To draw the text, we simply use the string_copy() function to copy the section of the total text from the beginning to the electric current terminal character and and so draw that, like this:
var _str = string_copy(text[text_current], 1, char_current); draw_text(text_x, text_y, _str); SUMMARY
You can add the dialog object to a room now and run the game and the results should be something similar this:
With this, you now accept a dialog object that you tin can apply at whatsoever time in a game! How do yous ask? Well, all you need to do is set the dissimilar variables every bit the object is created. For case, in out exam project, you tin create a controller object and give information technology a key or mouse event, and in that consequence, you lot can add together something like this:
var _inst = instance_create_layer(x, y, layer, obj_dialog); with(_inst) { text[0] = "This is some text"; text[i] = "This is more text"; text[2] = "This is withal more than text"; text[3] = "I talk besides much!"; text_last = iii; text_width = 150; text_x = x; text_y = y; text[text_current] = string_wrap(text[text_current], text_width); } Hither we are creating a dialog instance and and so using the with command to ready the text, number of lines, and the width and position of the dialog object. Yous could even create a new function that does all this for you using this lawmaking as a template.
That's it for this Coffee-break Tutorial, and we hope it's been useful to yous!
Happy GameMaking!
Source: https://www.yoyogames.com/en/blog/coffee-break-tutorial-easy-typewriter-dialogue-gml
0 Response to "Game Maker Draw Text Box"
Post a Comment