Creating menus for keyboard or gamepad input

16

Index

Attached Files

The following files have been attached to this tutorial:

.c3p

simplegridmenu.c3p

Download now 125.82 KB
.c3p
.c3p

Stats

8,673 visits, 20,019 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 28 Apr, 2020. Last updated 12 May, 2020
.C3P

This is the second style of menu in this tutorial, and I don’t know if Carousel is the right name for this style, but I’m sticking with it.

The functionality is largely the same as the previous examples, however the options are laid out in a ring shape and appear to scroll around the ring. The placeholder objects also shrink and reduce their capacity to give the idea that they’re further away.

This menu style doesn’t use a global variable to track the selection but uses an instance variable, OptionID on the MenuAnchor object instead. The menu’s six options are arrange in four rows mimicking a ring, and the Anchor objects in each row have a different size and opacity. The give the impression that the objects are changing, we change the animation frames when we change the OptionID value.

So, as before when pressing one of the directional inputs, we change the value of OptionID:

Condition

Keyboard ▶︎ On right arrow key pressed

OR

Gamepad ▶︎ On D-pad right pressed

Action

MenuAnchor ▶︎ Add 1 to OptionID

Condition

Gamepad ▶︎ Left analog stick X axis > 50

System ▶︎ Trigger once while true

Action

MenuAnchor ▶︎ Add 1 to OptionID

The MenuAnchor object has an animation frame to match each OptionID, so we use that to make sure we’re showing the correct ‘option’ in each menu spot:

Condition

System ▶︎ Every tick

Action

MenuAnchor ▶︎ Set animation to “Animation ” & Self.OptionID

The good thing with only having two directions and a continuous loop, is that this only requires two limits to keep the OptionID values in check:

Because we’re changing the animation frames to ‘move’ the menu, the selector object doesn’t need to move either. But we need to make sure that when the player presses the select key or button, that they get taken to the correct layout. This turns the selector events into:

Condition

Keyboard ▶︎ On Z key pressed

OR

Gamepad ▶︎ On A button pressed

Action

System ▶︎ Set MenuOpen to false

System ▶︎ Got to layout “Option” & MenuSelection

As before, this action sends the player to a dummy layout from which they can return to the main layout by either clicking the number, hitting the backspace key or the B button on the gamepad.

Now, onto a third menu type - List Style!

  • 9 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thank you Laura for sharing this tutorial. I was a bit in trouble a few months ago regarding analog values. I dindn't really know which values to set to get a up, right, down, and left movement detection. It took me some time to run a couple of tests and find out. Hopefully now there is a tutorial to explain that. I bookmarked it for later use/references. ✌️

  • Thanks Laura and team for putting this together, these are good examples and well explained. Another great resource for/from the community!

  • thank you this was great!

  • nice work on this.

  • Nicely done!

  • Load more comments (4 replies)