In this tutorial, we’ll be making a menu that you can navigate using a compatible Gamepad. We’ll be using 
to navigate, and 
to select. Credit to @Awesome_E for making this possible.
Supported Gamepads:
DualShock 4
DualSense
XBOX Wireless Controllers
Nintendo Switch Joy-Cons and Pro Controller
Any iOS Gamepad (I have a GuliKit KingKong 2 Pro Controller, which works perfectly)
Why do we need this?
It’s a cool addition to have in your games. It also allows you to easily navigate in a menu while your device is being airplayed to your nearest Apple TV (if you have one).
Requirements
Testing the project
Gamepad support is only available on the modded player. Use this link (https://ae-hopscotch.github.io/hs-tools/play-project/?id= and paste your project’s UUID after the = sign.
Editing the project
explore.gethopscotch.com on Google Chrome with the “spider-chrome” extension to code. You may have to save and exit your draft and edit it again to gain access to the modding tools. Ensure that “Restrict Operator Drags” is unchecked before you start.
Chrome Extensions
You can get the extension here. Just follow the steps that Awesome_E has provided.
Getting Started
Understanding Gamepad Button codes
You can use these documents as reference. From 0 to 16, here are the buttons:
ABXY (Cross, Circle, Square, Triangle for PS), LB, RB, LT, RT, (L1, R1, L2, R2 for PS) View, Menu, (Select and Start respectively for PS) L3, R3, Up, Down, Left, Right, and XBOX/PS Button, in that order. Some XBOX controllers have an extra 18th button, but we won’t be worrying about that for this guide.
Initializing Variables
We’ll need to create a few variables to start off with:
- Menu - this determines which menu you’re on so the selection code knows where to go. This is easily useful and allows you to reuse buttons from other menus
- Select Index - a value from 0 to some number (the number of buttons - 1). This determines which button is currently being highlighted, with 0 being the top button.
- Highlighting - this is mainly if you want to show/hide the highlighter, in the event you tap the screen or press one of the D-Pad buttons on your gamepad. This variable is optional.
Adding Menu Buttons
You can use this project to help you get started.
Start off by adding some rectangles to your project, spaced out equally [1]. I recommend using clones for this to make it a little easier. Follow this tutorial by @StarlightStudios for some tips on how to make great buttons you’ll want to press.
Adding the Highlighter
This one is very simple, just add a rectangle with some invisibility. Be sure this is separate from your menu buttons. Using a color similar to your button is recommended for some extra pizazz.
This part is optional. You can opt to brighten or darken your button to show its being highlighted.
Adding Gamepad Logic
We’ll be storing all checked buttons inside a custom rule. This is so we can easily use these buttons for navigation, selection, and whatever else you want to use the Gamepad for.
Simply add a check once rule with a special » block from the secret blocks, and do the following check:
If (» _ae_webplayer_action: {“name”: “checkControllerButton”,“args”: [0,1,0]}) = 1
Inside the conditional, add a broadcast message block. I recommend naming this to the name of your button. (gamepadA) in this case. Underneath that block add a custom ability called "Wait until not pressed (code = 0)
Wait until not pressed (code = 0) { //this code runs repeatedly until the button is released
Check Once If (If (» (_ae_webplayer_action: {"name": "checkControllerButton","args": [0,1,) + (code) + (]})) = 1) {
wait 0
Wait until not pressed (code = code)
}
}
For the d-pad, you can opt to remove the custom ability and just add a wait 0.2 seconds instead.
Do this for all 17 buttons, each in their separate rules.
I recommend publishing the project after this point so you don’t loss all that progress. I’m letting you know because it happened to me as well. After publishing, you can save it to your profile again and continue from there.
Navigating the Menu
We’ll be using two broadcasts: gamepadDpadUp and gamepadDpadDown (you don’t have to name them these way, but it is highly recommended to make this easier). These are buttons 12 and 13 respectively.
When I get a message (gamepadDpadUp) {
Check Once If self clone index = 0 {
Increase select index by -1
}
}
When I get a message (gamepadDpadDown) {
Check Once If self clone index = 0 {
Increase select index by 1
}
}
When game is playing {
Check Once If (select < 0) {
Set select index to (self total clones – 1)
}
}
When game is playing {
Check Once If (select > (self total clones – 1) {
Set select index to 0
}
}
Visualizing the Navigation
using the highlighter object
This is if you want to use the highlighter you made to highlight a selection
Set position to (600 – (100 × select index) [3]
brightening / darkening the button itself
This is if you want to make the button brighter or darker to visualize it being highlighted
Check Once If (self clone index = select index) {
Set color to (highlighter color)
} Else {
Set color to (normal color)
}
Selecting the button
Here is where we’ll be using the broadcast (gamepadA)
When self is tapped {
Set select index to self clone index
broadcast message named (gamepadA) ^[for simplicity]
}
When I get a message (gamepadA) {
Check Once If (select index = 0) {
Code for button 0 select
} Else {
Check Once If (select index = 1) {
Code for button 1 select
} Else {
...
}
}
}
Example Project
Here is an example of this in action. In this example, it’ll show a prompt with which button was pressed:
Web Explorer Link:
https://explore.gethopscotch.com/p/12u4t295r6
Modded Player Link:
https://ae-hopscotch.github.io/hs-tools/play-project/?id=12u4t295r6
Permission to remix this project is granted, just be sure to give credit.
-
You can use set pos to y = (600 - (100 × self clone index)) to space clones equally //you will need to adjust these two values to see what fits best for you. ↩︎
-
the plus signs are the math operators, not part of the string. Use the example project as reference ↩︎
-
these values should be the same as those used for the buttons ↩︎