Getting Started with Menus

From GTA Network Wiki
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

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

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

The first thing we'll need is to declare a menuPool, so let's define it as a global variable:

let menuPool = null;

Since we said that the menu had to appear whenever the player pressed the 'E' key, we'll have to use API.onKeyDown, we'll define there the menuPool

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        menuPool = API.getMenuPool();            
    }
});

Great, now 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())
    {
        menuPool = API.getMenuPool(); 
        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, and that the menu belongs to the pool. Don't worry, I got your back.

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        menuPool = API.getMenuPool(); 
        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);
        menuPool.Add(menu);            
    }
});

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

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        menuPool = API.getMenuPool(); 
        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);
        menuPool.Add(menu);

        menu.Visible = true;            
    }
});

But there's still one thing left to do, we'll need to call menuPool.ProcessMenus inside API.onUpdate

API.onUpdate.connect(function() {
    if (menuPool != null) {
        menuPool.ProcessMenus();
    }
});

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

let menuPool = null;

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        menuPool = API.getMenuPool(); 
        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);
        menuPool.Add(menu);

        menu.Visible = true;            
    }
});

API.onUpdate.connect(function() {
    if (menuPool != null) {
        menuPool.ProcessMenus();
    }
});

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

You did it!.

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

let menuPool = null;

API.onKeyDown.connect(function(Player, args) {
    if (args.KeyCode == Keys.E && !API.isChatOpen())
    {
        menuPool = API.getMenuPool(); 
        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);
        menuPool.Add(menu);

        menu.Visible = true;            
    }
});

API.onUpdate.connect(function() {
    if (menuPool != null) {
        menuPool.ProcessMenus();
    }
});