GameMakerStudio 2: GUI Layer and multi-touch: Create 3 buttons (left, right, and jump) for your iOS game.

Last Update:  Feb, 2021

Released Button issue has been fixed.

Using Keyboard to control your sprite is relatively easy to implement with the function keyboard_check(key). But if you want to run your game on your mobile device, you need to implement multi touch buttons…You can find many tutorials about GUI layer and buttons on the web, but  i’ve not been able to find anything about iOS development so it  is what i’m going to try to do!

Have you ever heard about Downwell and the Gun Boots? Downwell is a very polished game. Control buttons are very responsive and fast. 3 buttons: Left, Right, and a dual action button to jump and shoot. We will try to reproduce the same mechanics except the third.  The last button will be only associated with the jump movement.

Downwell by Ojiro Fumoto @moppin

The big question is...

What is the best way to fix the position of the control buttons on the screen? If you just place the instance of your button object within the room, when the camera moves, the button moves too!

You can use 2 variables to record the position of the camera view X and Y. Then in the step event, you can set the position X and Y of all buttons relative to the camera like this:

(step event)

Xbutton = Xcam + Xoffset

So, they will move together but not really at the same time!!! If you do that, buttons will be always visible, but they won’t be fixed! You’ll see a little delay between the move of the camera and the buttons because GM has to recalculate continuously their position…wrong way!

That’s why we need to use the GUI Layer and the DrawGUI event!

Things we need to know about GUI Layer.

- All DrawGUI event won’t be affected by the view position, scale and rotation

- The coordinates do not change. (0, 0) is always on the top left of the application surface or display.

- By default, GUI layer is 1:1 with the application surface…

- GUI layer can be scaled, resized and positioned to adapt to any device size with only a few lines of code, and that as long as you base your calculations around the device screen aspect ratio you can't go far wrong.

Want to be an expert? Read the yoyogames documentation!!!

It’s time to get to the heart of the subject…

Fig. 1: Room, Camera_view, and GUI layer. To the right, see the Touch Area (TA) bounded by coordinates x1, y1 and x2,y2.

You need 3 sprites. One for the left button and so on.

Then we need to create 3 objects with these sprites. One for each button.

- Create an object to manage all objects buttons (creation, position, behavior…) and place it into the room (Fig. 2).

Fig. 2: obj_Control_GUI - Create Event

- For me, obj_Control_GUI create the buttons on the layer "BTN". Then, be sure to position them above the Touch Area (Fig. 1 & 5).

Fig. 5: fix the object button over the touch area.

- Initialize variables you may need to do something when buttons will be pressed.

Well, in the the Step event, we also need a function to tell Gamemaker to check if something happens into the Touch Area bounded by (x1, y1) and (x2, y2) of the GUI Layer (Fig. 1). If true…do something!

So we use the functions :

device_mouse_check_button_pressed(i, mb_any) to detect if you touch the screen and point_in_rectangle(device_mouse_x_to_gui(i), device_mouse_y_to_gui(i), x1, y1, x2, y2) to tell GM where is situated the active Touch Area.

 

Fig. 3: obj_Control_GUI - Step Event - Check if BTN is pressed

 

 

Fig. 4: obj_Control_GUI - End Step Event - Check if BTN is released

Update: We do not specify again the bounded area to check if BTN is released!

What else…

1 -  If you want a real multi-touch, you have to use a for loop to assign dynamically an id (0, 1, or 2) for each button. If you don’t do that…it won’t work! 

2 - If you use (i, mb_left) instead of (i, mb_any) with the first function, the button mechanics will be laggy and your game unplayable!

3 - If your game has only 2 buttons, you can use (0, mb_left) for the first button and (0, mb_right) for the second…but don’t forget to disable double-clicking assigned to the right button by default in GM. So, use device_mouse_dbclik_enable(false).

 I would like to thank @chinykian the creator of Serious Scramblers for this tip!

Where is the button? 

The touch area is invisible and sometimes bigger than your sprite button. If the touch area is too small, the player can miss the button when he touches the screen so don’t hesitate to make a large touch area.

Well, but now we need to fix the object of your button above the touch area (Fig. 5).

Fig. 6: DrawGUI event.

So, open each object button (Fig. 6) and create a DrawGUI event. Then use the function draw_self(); to fix it on the GUI layer, Don’t forget to create a Draw event and leave it blank! If not, all buttons will be cloned. Half of them will be fixed and the other part won’t be fixed.

Champagne!

Now, let’s see the result (Fig. 7)…

Fig. 7: Game test

Thank you for reading!!! Follow me on twitter @ouzzgame.