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

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

Then in this part, 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)

[Tạo 2D Platformer Game với Godot]  Fork part 1: Add move button

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

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

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

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

Then open the zip file you just downloaded into Sprites.

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

Into ShadedDark.

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

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

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

As above is fine.

Knot

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

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

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

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

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

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.

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

I adjusted for the other 2.

[Tạo 2D Platformer Game với Godot]  Part 8.1: Add 33 . scroll button

Well, you guys add a new node called CanvasLayer

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

Then I will rename it 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.

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

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

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

Therefore, you go to Project -> Project Settings -> Find Pointing.
[Tạo 2D Platformer Game với Godot]  Part 8.1: Adding a 37 . scroll button

Then tick the one on the image to be able to click.[Tạo 2D Platformer Game với Godot]  Part 8.1: Adding a 38 . scroll button

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.

Leave a Reply