[Tạo 2D Platformer Game với Godot] Part 8.1: Adding a scroll button

In this part, it is a fork, which means it will not be very related to the main game making, but I think there will still be people who need it.

Then in this section, I will show you how to add scrolling buttons for those who plan to export the game to mobile.

Art

The first part will be the art part, you can download it for yourself at the following link: Onscreen controls (8 styles)

You create yourself a new folder named GUI in the Assets folder.

In the GUI folder create an additional Buttons folder (this is where the buttons are).

Then open the zip file you just downloaded into Sprites.

UnshadedDark.

Copy yourself photos 24,25,26 and put them in the Buttons folder.

As above is fine.

Knot

Next, you go through the Player’s scene and add yourself a new node, TouchScreenButton (this is a dedicated touch screen button for mobile games).

Then I created 3 more TouchScreenButton nodes and renamed it Quatrai, Quaphai and Nhay respectively. Each name has its own meaning.

Here I select the button to the left then I drag the image to Normal so it shows the button. At the thường is the image when it is normal, and the Pressed is the image when you click.

You can make it more detailed by clicking the button and the image will be darker or lighter to let the user know they have clicked.

The Action is the same action as on the code Input.is_action_pressed(“ui_left”) or something but here you just need to fill it in and then click it automatically. And if on the code you use the above actions, when you click it, it will run that action on the code.

I adjusted for the other 2.

Oh, you guys add a new node called CanvasLayer

Then I will rename as GUI and leave the other 3 nodes in.

The reason I do that is because when you leave the other 3 nodes outside, it’s like the other nodes will move as usual, but if you leave them inside CanvasLayer then it will only show up in the UI section.

Mine already shows up, but you’re sure clicking it won’t work unless you run the mobile game test

Therefore, you go to Project -> Project Settings -> Find Pointing.

Then tick the one on the image to be able to click.

Then run the game and enjoy.

You should also adjust the move button so that it fits your eyes.

Summary

So in this part, I showed you how to add a scroll button in the Game.