Simple Gamepad Menu Navigator Tutorial

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)

}

}

[2]

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.


@SCG


  1. 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. ↩︎

  2. the plus signs are the math operators, not part of the string. Use the example project as reference ↩︎

  3. these values should be the same as those used for the buttons ↩︎

12 Likes

math is hurting my brain /j

4 Likes

The example project has been officially tested by me and it works as expected.

Some minor fixes had to be done, but most of the problem was within the button code, not the Gamepad logic.

3 Likes

Awesome! (E)

5 Likes

I just edited the OP to make the D-Pad Up & Down Icon visible in Light Mode.

1 Like

I might actually make the full on Gamepad Logic Custom Rule, featuring Pressing, Long-Pressing, and Holding actions. Joystick Tilt Actions will also be included.

The Pressing Action will most likely be an OnRelease action so that you can use the same button for Long-Pressing Actions.

1 Like

Awesome!

1 Like

(E)

Thanks. I love gamepad support so much, which is why I incorporated it into my latest games. My latest game, being When Worlds Collide, has both gamepad and keyboard support, and if you are on keyboard (and/or a computer), you’ll have access to various shortcuts that allow you to do stuff like switch between tiles without ever opening the tile drawer, erasing a tile without switching to the eraser, quickly picking a tile, etc. Much of the shortcuts, which I sometimes call “Quick Actions” are mentioned in the short “Level Creator” Tutorial, which can be skipped. It basically tells you how to use the editor and its tools. As time goes by I’ll add even more shortcuts (including saving the level, creating a new level, testing the level (save and play), importing the level, and exporting (sharing) the level). I just need to make sure I don’t create any conflicts with existing shortcuts most web browsers and/or websites use (like CTRL+click, which acts like right-click). I can already use I for Import, S for Save, T for Test (Save and Play) and N for New, but for Share, it will be a little harder. I might be able to use Shift+S, but I’ll need to ensure the browser doesn’t already use a shortcut like that. If it does, I can use Alt+S for plan b.

Speaking of, I might change it so the tutorial is shown again after resetting all progress, since there may come a day where the tutorial is changed.

3 Likes