Getting Started with Menus

From GT-MP
Jump to: navigation, search

Getting Started with Menus

Menus are a very powerful resource, and that's why having a good understanding of how they work is so important.

Creating a basic menu

Dialog-warning.png Note: This tutorial is outdated / not accurate for the next release. An updated version will be released with the next update


ATTENTION: I'll be using ECMAScript 2015 for this tutorial.

Let's create a basic menu with some options, and it will be visible whenever the player presses the letter 'E'.

Let's define a menu, a menu contains items, we'll create some items as well.

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        let menu = API.createMenu("Test", 0, 0, 6);
        let item1 = API.createMenuItem("Item1", "");
        let item2 = API.createMenuItem("Item2", "");
        let item3 = API.createMenuItem("Item3", "");
    }
});

But we need to declare, somehow, that the items belong to that menu. Don't worry, I got your back.

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        let menu = API.createMenu("Test", 0, 0, 6);
        let item1 = API.createMenuItem("Item1", "");
        let item2 = API.createMenuItem("Item2", "");
        let item3 = API.createMenuItem("Item3", "");

        menu.AddItem(item1);
        menu.AddItem(item2);
        menu.AddItem(item3);           
    }
});

Much better now, but the menu is still invisible! No biggie,

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        let menu = API.createMenu("Test", 0, 0, 6);
        let item1 = API.createMenuItem("Item1", "");
        let item2 = API.createMenuItem("Item2", "");
        let item3 = API.createMenuItem("Item3", "");

        menu.AddItem(item1);
        menu.AddItem(item2);
        menu.AddItem(item3);

        menu.Visible = true;            
    }
});

If you have followed my steps properly, your script should look similar to this one:

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        let menu = API.createMenu("Test", 0, 0, 6);
        let item1 = API.createMenuItem("Item1", "");
        let item2 = API.createMenuItem("Item2", "");
        let item3 = API.createMenuItem("Item3", "");
        
        menu.AddItem(item1);
        menu.AddItem(item2);
        menu.AddItem(item3);

        menu.Visible = true;            
    }
});

And if you press 'E', a menu like this should appear:


Okay. We have our menu but how to interact with it?

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        let menu = API.createMenu("Test", 0, 0, 6);
        let item1 = API.createMenuItem("Item1", "");
        let item2 = API.createMenuItem("Item2", "");
        let item3 = API.createMenuItem("Item3", "");

        // This is how you handle menu item selection
        item1.Activated.connect(function(menu, item) {
            API.sendChatMessage("You clicked on first item!");
        });
        
        menu.AddItem(item1);
        menu.AddItem(item2);
        menu.AddItem(item3);

        menu.Visible = true;            
    }
});