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.
GameMaker: Studio's Draw Actions tab includes Drawing Actions, Settings Actions, and Other Actions, as shown in this figure. Here is how these actions can help you make your game. The Draw tab on GameMaker: Studio. Drawing actions on the draw tab The Drawing Actions, shown in the next figure, are exactly that: They provide a. Draw 9-Slice Sprites. $3.99 USD $1.99 USD. Steady Delta Time. GameMaker Studio 2 Demos and Tutorials. Space Rocks - DnD.
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
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.
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.
The text will be displayed like the picture below. ( It's not center yet !)
Draw_text Not Working Gamemaker
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
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)
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
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.
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.
The text will be displayed like the picture below. ( It's not center yet !)
Draw_text Not Working Gamemaker
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
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).
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)
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.
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)
Draw Text Transform Text Gamemaker
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.
Combine Strings Gamemaker
Step 10: Run the game again and see what different is.
So as of GameMaker:Studio version 1.0.233 there is a brand new drawing event, dedicated to rendering on screen displays, scores, health, overlays, user interfaces and the like. GameMaker has needed this for some time, particually if your using scaled or moving views as you would have to constantly 'offset' the rendering to counteract the current room view.
So what does this do? Well the image above shows this event in action. First we have a room with a view that scales eveything down and scrolls to the right, and then we have a GUI over the top. Now normally, you would not only have to offset the rendering by the distance into the room, but unscale the rendering as well.
This is not only horrible, but can introduce some movement in the HUD as unscaling things scaling can cause floating point rounding errors.
The new event however solves all these problems.
Just like the DRAW event, everything using the new GUI event is ordered by depth, allowing you to draw multiple sections to the GUI in the correct order. But the best thing about the GUI event, is that rendering is always setup to draw 1:1 to the width and height of the screen.
This means you no longer have to offset the drawing to where the view in the room is, nor do you have to unscale it if you were shrinking the view. It will also render over the top of any views, as it's outside of the view system.
Unlike the drawing event, nothign will 'automatically' be drawn to the GUI layer, so if you want to draw anything, will have to add some script or some D&D actions, but aside from that... it's going to make on screen displays much easier to deal with.
So finally, making a GUI in GameMaker is simple, regardless of the views you use, or the position in the world you are.
