How to make the text show and hide slowly GML GameMaker

In this tutorial, we need two sprites for two button objects. We have one more object only obj_Draw_Text to display the text on the game screen. And yes, we need 1 room for testing only.

Step 1: Create two simple sprites buttons spr_hide_btn, spr_show_btn

In here, we created 96 x 32 sprites and put the text ‘HIDE TEXT’, and ‘SHOW TEXT’ for buttons.



Step 2: Create two simple objects obj_hide_btn, obj_show_btn

Note:When we click on the obj_hide_btn (Button HIDE), the text will be hidden slowly.

When we click on the obj_show_btn (Button SHOW), the text will be showed.

Step 3: We create one more object obj_Draw_Text to draw the text on the screen.

Step 4: Now, we start to add Events, Actions for these three objects. We will focus on the obj_Draw_Text object first.



This obj_Draw_Text object has four Events which are Create, Alarm0, Step and Draw.



Step 5: To display the text on the game screen, we need to add the Action Code in Draw Event



The code simple like this. Add two lines below to Action Code of Draw Event.

text = "Some Text. Hello World!";

draw_text(x,y,text);



We declare the text variable to store the text string that we want to display on the game. Then, we use the GML function draw_text(x,y,string) to draw the text. x,y are the positions that we want the text should be there. In here x,y is the position of the obj_Draw_Text in the room. Just try to put the obj_Draw_Text into the room then run the game and see the text 'Some Text. Hello World!' will be printed.

But in this game maker tutorial, we want the text should be printed on the center of the screen. To do that, we have to know the position x,y of the center of screen. We know the width and height of the room. So we just devide each by 2 and we get the x,y position.



We will modify the code a little bit to get the position x,y of the center screen, just edit the Code Action of Draw Event, save it and run the game again to see where the text displayed.

x1 = room_width/2;

y1 = room_height/2;

text = "Some Text. Hello World!";

draw_text(x1,y1,text);



The text will be displayed like the picture below. ( It's not center yet !)



We have to calculate the positions again, how to make the text margin correctly like this in the next steps.

We should know the width of the text string using string_width(str) function. In here, we will write this string_width(text) to get the width of our string "Some Text. Hello World!"



We will do the same for the height of the text, string_height(text) to get the height of the text string. Then we will devide them by 2. So the code should be changed to this

text = "Some Text. Hello World!";

x1 = room_width/2 - string_width(text)/2;

y1 = room_height/2 - string_height(text)/2;

draw_text(x1,y1,text);

Done! We know how to make the text center of the game screen window. Now, we will program for two buttons and make the text hide, show when we click on that.

Step 6: On Create Event of obj_Draw_Text, we set 2 variables hide = 0 (not hide yet - hide when this variable equal 1. we will use hide as a trigger) and opacity = 1 (opacity equal 1 will show the text clearly, equal 0 will hide the text)

If you haven't created the obj_ hide_btn and obj_show_btn yet, create them. Inside the obj_hide_btn, we add Left Released Event. Then, we add Code Action for it, copy the line of code below. It means, when we click on the button hide, we will change the variable hide of obj_Draw_Text to 1. Then, we will wait for object obj_Draw_Text makes the text hide (we will code it soon).

obj_Draw_Text.hide = 1;

Step 7: Go back to obj_Draw_Text and copy the code below put it inside Code Action of Step Event. We will set the alarm[0] by 10 steps and make the variable hide equal 0 (if we not set the hide = 0, the steps will be loop and make the alarm[0] = 10 each time and will be conflict with the Code Action of Alarm[0] Event)

if(hide == 1){

alarm[0] = 10;

hide = 0;

}

Step 8: Go to Code Action of Alarm[0] Event, copy the lines of code below. Each time after 10 steps, the Alarm[0] will decrease the opacity value by 0.1. So it means the text will be blur slowly. And if the opacity still greater than 0, we will make the alarm[0] = 10 wait 10 steps again then decrease the value of opacity.

opacity = opacity - 0.1;

if(opacity > 0){

alarm[0] = 10;

}

Now, try to run the game and click on the Hide Button to see what happens. (remember to place the Hide Button into the game room)

Step 9: Nothing happens! Because we haven't changed this function draw_text(x,y,string) to draw_text_colour(x,y,string,c1,c2,c3,c4,opacity). The old draw_text function can not make the text blur because it doesn't have opacity parameter but the second one does.

draw_text_colour(x1,y1,c_black,c_black,c_black,c_black,opacity);

Step 10: Run the game again and see what different is.