![[BS-07] Menu - Teaser](https://www.game-object.de/media/7417iEc1WYIlan8XRWSRkAcCbaigny1m4Aenl3Zx.png)
Interacting with a Menu
A demo of a menu to interact with.
Features
With this demo you can simply select a few options in a nested menu, while the path to the last selected item will be displayed in the center of the screen.
You can interact with the menu via the curser left clicking on the items, or use the keyboard controls.
Esc => close the current submenu (or opens the main menu if nothing is selected)
Arrow Left => close the current submenu
Arrow Right => open the currently focused submenu item
Arrow Up => circles backwards through the current options
Arrow Down => circles forward through the current options
Tab => circles forward through the current options
Enter => selects the currently focused menu item
Upcoming
I should add real behaviour to the menu items, like setting the color schema and adjusting the volume of the sound.
Details
Adding the MenuModel, MenuViewand and MenuController together with some helpers to the library.
Providing a menu of type MenuGroupModel to your Game-Model now, will automatically connect the controls to that menu.
The creation of the menu structure is also fairly abstructed, but i think still misses some improvment, that need to added later on when using it in following projects.
Currently it looks like this:
The creation of the menu structure is also fairly abstructed, but i think still misses some improvment, that need to added later on when using it in following projects.
Currently it looks like this:
const generator = new MenuGenerator(this.menu_globals);
const menu = generator
.set("x", 10)
.set("y", 10)
.compile({
name: "MM",
width: 50,
children: [
{
name: "Menu Colors",
width: 200,
children: [
{
name: "Red",
},
{
name: "Green",
},
{
name: "Blue",
},
]
},
// ...
],
});To the refresh function is necessary to update the size and position of menu elements.
And the top level menu allows us to add a listener to every selection of the menu, returning the selected item.
menu.refresh();
menu.onSelect((item: MenuModel) => {
this.current_selection = item;
});For the View a reference to the MenuView is necessary and a call to render within the render function, which receives the primary menu item.
this.menu.render(model.menu);
Releases
Related
[BS-00] Barebones
The starting point for Baby Steps In this post i talked about the Baby-Steps Series i am making. This project is the very first part and marks the base for all projects to come. Readers Notice: I am expecting you to know basic typescript and how to setup
Comments