Getting Started - ClonkAndre/NativeUI-IV GitHub Wiki

Getting Started

Requirements

  • Grand Theft Auto IV
  • ScriptHook
  • ScriptHookDotNet
  • NativeUI

Important info: Shipping NativeUI with your mod

If you want to develop a menu for your mod, and you are ready to publish your mod, please note that NativeUI.dll always needs to be in the main directory of GTA IV! And not in your scripts folder.

Changing settings for all menus

Inorder to navigate through your menu, you have to set your keys for the navigation.
A import to the System.Windows.Forms Namespace is needed.

C# example

UIMenu.Options.UpKey = Keys.NumPad8;
UIMenu.Options.DownKey = Keys.NumPad2;
UIMenu.Options.LeftKey = Keys.NumPad4;
UIMenu.Options.RightKey = Keys.NumPad6;
UIMenu.Options.AcceptKey = Keys.NumPad5;

VB.NET example

The C# and the VB.NET code are the same, just remove the semicolons (;).

The settings shown above are optimized to work with a NumPad.
If you want to use your arrow keys instead, these are the names for each arrow key: UP, DOWN, LEFT, RIGHT

There are also 5 more options available:
UIMenu.Options.disablePhoneWhenMenuIsOpened : This disables the phone (Best for Arrow Keys navigation).
UIMenu.Options.enableControllerSupport : This allows the user to navigate through the menu with a controller.
UIMenu.Options.enableMenuSounds : This enables sounds for the menu.
UIMenu.Options.AnimatedBannerFrameRate : This sets the frame rate wich the animated banner should run at.
UIMenu.Options.disablePlayerMovementWhenMenuIsOpened : This will disable the players movement and the phone if the menu is opened. Warning: If the player drives a vehicle and he opens the menu, this option will instantly stop the vehicle!

1. Creating your first menu

Now it's time to create your first menu!

You can create a menu by using the UIMenu class.
⚡ This class provides 1 event: OnSelectedIndexChanged

The constructor of the UIMenu class provides 2 basic paramenters: The title of the menu and the description of the menu. It also has 2 overloads wich is the banner of the menu. You can change the banner of the menu by creating a new Texture with a image of the size 432 x 97. Then you can pass your newly created Texture as the third parameter of the UIMenu coonstructor. Or since version 0.7 you can add an animated GIF Image as the third parameter of the UIMenu constructor.

Basic menu

C# example

var menu1 = new UIMenu("Title", "Description");

VB.NET example

Dim menu1 as UIMenu = new UIMenu("Title", "Description")

Menu with a static image

You need to create a new Texture object.

C# example

var texture = new Texture(System.IO.File.ReadAllBytes("PATH_TO_YOUR_FILE"));
var menu1 = new UIMenu("Title", "Description", texture);

VB.NET example

Dim texture as Texture = new Texture(System.IO.File.ReadAllBytes("PATH_TO_YOUR_FILE"))
Dim menu1 as UIMenu = new UIMenu("Title", "Description", texture)

Menu with a animated image

You need to create a new Image object.

C# example

var image = Image.FromFile("PATH_TO_YOUR_FILE");
var menu1 = new UIMenu("Title", "Description", image);

VB.NET example

Dim image as Image = Image.FromFile("PATH_TO_YOUR_FILE")
Dim menu1 as UIMenu = new UIMenu("Title", "Description", image)

(I recommend you to put the codes shown above outside of your methods inorder to access your menu everywhere in your class)

✅ Done!

2. Creating and adding new items to the menu

The current version (0.7) of NativeUI features 3 items: A normal item (also known as a button), a checkbox and a list item.

⚡ Normal item events: OnClick
⚡ Checkbox item events: OnCheckedChanged
⚡ List item events: OnClick, OnSelectedIndexChanged, OnSelectedTextChanged

Example to create and add a simple button item to the menu:

C# example

var uiMenuItem1 = new UI.UIMenuItem("Name", "Text", "Description", true/false);
menu1.AddItem(uiMenuItem1);

VB.NET example

Dim uiMenuItem1 as UI.UIMenuItem = new UI.UIMenuItem("Name", "Text", "Description", true/false)
menu1.AddItem(uiMenuItem1)

3. Working with nested menus

NativeUI Version 0.5 features a new property for default menu items: NestedMenu.

You can bind any UIMenu to this property. If the user then clicks on this item, the binded menu will be displayed. With that, you can create an easy nested menu system.

4. Getting the menu to work

You have successfully created a menu and added a item to it.
Now you just need to put the following things in its corresponding methods:

  • UIMenu.ProcessController() goes into your Tick method.
  • UIMenu.ProcessDrawing(e) goes into your PerFrameDrawing method.
  • UIMenu.ProcessKeyPress(e) goes into your KeyDown method.

If you want to capture the key presses earlier then the menu, put UIMenu.ProcessKeyPress(e) at the end of your KeyDown method.

Example scripts

Check out these example scripts if you need some more help
C# example
VB.NET example