In this tutorial we’re going to create a quick text input box. Text input boxes are very useful in games; for example, they let the player input their name so that they can have an immersive experience where they are actually called by their name. Anyway, who likes this filler crap in articles? Let’s just get straight to the topic.
Basic Text Box
For this text box I’m going to use this 256*32 sprite…
(you may create your own or use this one)
…name it spr_textbox and make its origin at 16*16, because that’s where the text will start from – 16 pixels in the box (horizontally), at the middle (vertically).
Now let’s create an object for it – obj_textbox, and add some code:
message = "";
This initializes an empty string (text) variable called message which will store the text the user types.
message = keyboard_string;
keyboard_string is a built-in variable that stores whatever text the user types. So, we’re saying that the message variable should store what the user is typing.
draw_self(); draw_set_valign(fa_middle); draw_text(x, y, message);
First line: draw_self() will do what it says: it’ll draw the object as it is supposed to be, with the sprite we assigned and all. It’s used here because using the Draw event overrides the object’s default draw, in which case we have to specify that we want the object to be drawn.
Second line: Here we specify that we want the text’s vertical alignment to be at the middle.
Third line: draw_text() will draw some text (here, our variable message) at a place (here, the object’s default coordinates – x and y).
Now just set up a room however you want and place obj_textbox anywhere. Run the game and try typing!
Nice and all but… the text can exceed the text box. Now, there are two ways to control it: character limit (limit the number of characters) and width limit (limit the horizontal width).
Create Event: (Add the code)
limit = 20;
We’ll limit the maximum characters to 20, so create a limit variable with that value. Feel free to choose your own (for example, most games have a name character limit around 8).
Step Event: (Replace the code)
if (string_length(keyboard_string)<limit) message = keyboard_string; else keyboard_string = message;
Replace the existing “message = keyboard_string” code with this one, as this keeps checking for the character limit.
Basically, it’s asking that if the string length (number of characters) is smaller than the limit (here, 20), then keep on copying the keyboard_string value to the message variable, because that’s okay, it’s in its limits. But if not (that part comes in else), copy the message value to the keyboard_string variable (so that it does not exceed the limit and stays stopped as the message variable).
Try it out now, you can not type more than the number of characters specified in the limit variable.
String Width Limit
We have successfully implemented a character limit system, but what if we do not want to limit it by the number of characters, but by the text box’s width? We can do that, if you want, by using the string_width() function.
Step event: (Replace the code)
if (string_width(keyboard_string)<sprite_width-32) message = keyboard_string; else keyboard_string = message;
Just the condition is changed. Instead of putting a character limit, we’re checking for the width of the string (how many horizontal pixels it takes up on the screen) and only letting it type if it is smaller than the width of the sprite (the text box) minus 32 – because our horizontal origin is 16, we need to use that margin on both sides, hence 16*2 = 32.
Now try it.
We can also implement a blinking text cursor.
Create event: (Add the code)
cursor = "|"; delay = 20; alarm = delay;
the cursor variable stores the cursor character(“|“). delay stores the number of steps until the cursor appears/disappears to give a blinking effect. Then we set the alarm to the amount of delay so that the blinking loop can start.
Alarm 0 event: (Add the code)
if (cursor=="|") cursor = ""; else cursor = "|"; alarm = delay;
First line: If the cursor is “|”, change it to “” (make it disappear). If not (which suggests that it has already been disappeared), then change it back to “|” (making it reappear).
Second line: Set the alarm again to the amount of delay to keep the blink loop going.
Draw event: (Replace a line)
draw_text(x, y, message + cursor);
The only change in this line of code is the “ + cursor” part. It just tells GameMaker to also draw the cursor after the message.
You can further change the delay to suit your liking. You can also create new fonts and use them with this using draw_set_font(font_name);.
You can now store the name of the player and use it anytime you want!
So, did this help you? Need more help, or want to ask something? Use the comment section below or mail me at firstname.lastname@example.org. If it helped you out, why not share it with others and help them out too? 😉
Thanks for being here, and have a great day!