Creating a Text Input Box in GameMaker: Studio

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…

spr_textbox.png (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:

Create event:

message = "";

This initializes an empty string (text) variable called message which will store the text the user types.

Step event:

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 event:

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!

gif1.gif

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).

Character Limit

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.

gif2.gif

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.

gif3.gif

Text Cursor

We can also implement a blinking text cursor.

Create event: (Add the code)

cursor = "|";
delay = 20;
alarm[0] = 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[0] to the amount of delay so that the blinking loop can start.

Alarm 0 event: (Add the code)

if (cursor=="|") cursor = ""; else cursor = "|";
alarm[0] = 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[0] 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.

gif4.gif

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);.

Conclusion

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 gurpreetsingh793@gmail.com. If it helped you out, why not share it with others and help them out too? 😉

Join your fellow GameMakers on GameMaker’s Guild (Facebook) or on the GameMaker Community (YoYo Games forum).

Thanks for being here, and have a great day!

 

 

 

Advertisements

One thought on “Creating a Text Input Box in GameMaker: Studio

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s