If you want to be stealth and raid the criminals without they notice you, this will be your solution.

The script is very simple.
 

When player enters a Emergency Vehicle, the script will work by pressing B. The silencer is also saved for future uses if you park yours car and took another one and then came back. The silencer will be waiting you.

Server-side:

mp.events.add('syncSirens', (player, vehicle) => {
    if (vehicle && mp.vehicles.exists(vehicle.id)) vehicle.setVariable('silentMode', !vehicle.getVariable('silentMode'))
});

Client-side:

let localPlayer = mp.players.local;

mp.keys.bind(0x42, true, _ => {
    if (localPlayer.vehicle && localPlayer.vehicle.getPedInSeat(-1) === localPlayer.handle && localPlayer.vehicle.getClass() === 18) {
        localPlayer.vehicle.getVariable('silentMode') ? mp.game.graphics.notify(`Silent mode is deactivated.`) : mp.game.graphics.notify(`Silent mode is activated.`);
        mp.events.callRemote('syncSirens', localPlayer.vehicle)
    }
});

mp.events.add('entityStreamIn', (entity) => {
    if (entity.type === 'vehicle' && entity.getClass() === 18 && entity.hasVariable('silentMode')) entity.getVariable('silentMode') ? entity.setSirenSound(true) : entity.setSirenSound(false);
    
});

mp.events.addDataHandler("silentMode", (entity, value) => {
    if (entity.type === "vehicle") entity.setSirenSound(value);
});

If you need any help, don't hesitate to post your problem in this topic.

You're free to use, change, copy this script. (Don't Forget some credits)

Hope you enjoyed the Tutorial.
Have a nice day!

Regards,
Captien.

Hello, So I have decided I should make this tutorial about how to use CEF alongside RAGEMP to make interactable UI because I have spent some time understanding it from examples without a clear tutorial, I am going to explain how to interact between the CEF browsers and RAGEMP client, and how to send/receive information from and to server.

This tutorial is targeting new comers in RAGEMP but who have background in scripting and know how to run and connect their server locally.

So the main points will be:

1-What is CEF

2-Sending information from CEF to RAGEMP client (and vice versa)

3-Sending information from RAGEMP to The Server (and vice versa) (I will be using C# Bridge API for working with the serverside scripting)

Before we start you are going to need the following to better understand the tutorial:

Basic knowledge in HTML, CSS and JavaScript

 (Optional – Nice to have) Bootstrap and JQuery

Let’s start!

What is CEF

CEF is abbreviation to Chromium Embedded Framework an open source framework that allow the ability to embed HTML webpages into applications.

RAGEMP already integrates the CEF so you don’t have to download anything externally to begin using it.

CEF and RAGEMP Client

So now we are going to learn how to create a browser inside the RAGEMP client and interact with it. I am going to teach by giving example, it is going to be a basic login/register system.

First download or or create your own webpage design, If you don't know how to create a webpage just use my sample (Attached to this thread) and follow the tutorial.

Start by going to RAGEMP/server-files/client_packages folder and create a new folder name it “Login” then inside the Login folder we’ve just created place the HTML,CSS and JS files that is related to the webpage inside and then create the (clientside) script we will call it “Main.js” that will be the main connecting point between the CEF browser, client and the server.

NOTE: In the Login folder you are going to place the webpage files and all dependences such as Bootstrap or JQuery libraries.

So to this point you should’ve something similar to this

Dependences folder contains the minified JQuery and Bootstrap libraries, Links below:

https://getbootstrap.com/docs/3.3/getting-started/

https://code.jquery.com/jquery-3.3.1.min.js/

So I have pre-made this simple page for the sake of this tutorial, I will link download to all of the files that I have used at the bottom of this thread.

But you can go with any page design you like.

Disclaimer: I am new to web development so it may not look that good but it does the job.

Now we need to interact with this page,

Inside the Login.html (assuming you already have made/imported a page) find the main components that you want to interact with and give them the ‘id’ attribute, in my case I need the buttons and text input elements, image below for more understanding

Also notice how we referenced the “Login.js” script.

We are going to use these inside our “Login.js” file, so Open the Login.js file and write the following:

(Code is written using JQuery)

$('#loginButton').click(() => {

    mp.trigger('loginInformationToServer', $('#loginUsernameText').val(), $('#loginPasswordText').val());
});

$('#registerButton').click(() => {

    mp.trigger('registerInformationToServer', $('#registerUsernameText').val(), $('#registerPasswordText').val());
});

So what this basically does is once the loginButton/registerButton is clicked is going to trigger (mp.trigger) an event with the given name and pass the values inside the text fields as arguments, that later we are going to catch that in our “Main.js” script. (This point is where we send information from CEF Browser to RAGEMP Client).

Now that we have send the information and they are waiting to be caught, But before we do that we are going to show the browser window when a player connect to our server.

Open “Main.js” and use mp.browsers.new(‘package://path’);

In our case: we have the html page inside our Login folder.

var loginBrowser = mp.browsers.new('package://Login/Login.html');

Now at this point when the player connects to our server this will show him our page that we’ve just made, it is still not functional yet until we catch the information that we’ve sent before.

Let’s catch them now,  inside the “Main.js” add the following:

mp.events.add('loginInformationToServer', (username, password) => {

    mp.events.callRemote('OnPlayerLoginAttempt', username, password);

});

mp.events.add('registerInformationToServer', (username, password) => {

    mp.events.callRemote('OnPlayerRegisterAttempt', username, password);

});

I am not going to go into much details here on the syntax but what we are doing is catching the 'loginInformationToServer' and 'registerInformationToServer' events (like you’d do in any other client event in ragemp) and sending them directly to the server to verify the information passed.

But before we forget go back to the client_packages folder and create or open the file ‘index.js’ and place

require('./Login/Main.js'); 

to let the server know that this file contains JavaScript codes that related to RAGEMP client (mp.events.add, mp.events.callRemote and mp.browsers.new), a complete list found on ragemp wiki https://wiki.rage.mp/index.php?title=Client-side_functions

RAGEMP Client and RAGEMP Server

Now that we have sent the information from the CEF client to the RAGEMP client, and then to the RAGEMP server via (mp.events.callRemote) we didn’t catch the event on the server yet, so let’s go ahead and do that.

It can be done in same ways but different syntax depending on which programming language you are using,

I am going to be using C# because I am more familiar with but it can be easily done with JS serverside once you are familiar with scripting in it.

So go ahead and inside any resource file that you are using type the following:

        [RemoteEvent("OnPlayerLoginAttempt")]
        public void OnPlayerLoginAttempt(Client player, string username, string password)
        {
            NAPI.Util.ConsoleOutput($"[Login Attempt] Username {username} | Password: {password}");

            if(username == "Max" && password == "123")
            {
                player.TriggerEvent("LoginResult", 1);
            }
            else player.TriggerEvent("LoginResult", 0);
        }

So The above code catch the event that is triggered when player sends the information to the server so we validate them then send back a response to the client with either success or fail depending on the player data, in ideal case we should check the information from a database but that’s out of the scope for this tutorial so I am just checking if his username is Max and password is 123 then we send information back to the client with result 1 (success) else we send the result of 0 (incorrect username/password)

Same thing apply for the register event handle.

Now you can notice a pattern here is that whenever we send an event from one place to another we need to catch it, so back to the “Main.js” and let’s handle the response sent from the server,

Add the following:

mp.events.add('LoginResult', (result) => {

    if (result == 1) {

        //Success we destroy the loginBrowser as we don't need it anymore
        loginBrowser.destroy();
        mp.gui.cursor.show(false, false);

        mp.gui.chat.push("You have successfully logged in.");

    }

    else {

        //Failed we just send a message to the player saying he provided incorrect info
        //Here you can be creative and handle it visually in your webpage by using the (browser).execute or loginBrowser.execute in our case to execute a js code in your webpage

        mp.gui.chat.push('Incorrect password or username.');

    }

});

Similar to what we did when we caught function from CEF we did for catching from server and we checked if the value passed is 1 then the player succeeds in logging in else he fails.

Now you can just run your server and connect with your client and you should see the login page appear, enter anything and hit login - it should message 

Quote

Incorrect password or username.

Then try using the combinations of Max and 123 and you should see

Quote

You have successfully logged in.

and the window should disappear.

Same practice apply to the register I will leave it for you to practice and try to implement that by yourself! Good luck!

Summary

Important things to remember:

- From CEF browser to RAGEMP client => mp.trigger caught by mp.events.add

- From RAGEMP client to RAGEMP server (C#) => mp.events.callRemote caught by [RemoteEvent()] flag and a function

Now the other way around:

- From RAGEMP server (C#) to RAGEMP client => (Client).TriggerEvent caught by mp.events.add

- From RAGEMP client to CEF browser => (Browser).execute

 For more information about the syntax for these you can check the ragemp wiki

NOTE: Sometimes you don’t need to send anything to the server,

For example a browser that contains information about your server, you just need to contact between CEF and RAGEMP client.

NOTE: Similarly if you want to use JavaScript for serverside scripting you can find the equivalent to my functions used and do the same, however everything done in clientside scripts (Main.js) should remain the same for both languages!!

The End

And here you’ve just completed the tutorial! Thanks for taking your time to read and if you have faced any problems or any question post a comment below and I will do my best to answer it.

Also feel free to correct me if there is any suggestions or any syntax/logical errors.

Happy coding!

Files used in this tutorial:

https://www.solidfiles.com/v/nYR8xn43j57jv

First, we create variables to configure the tags.

const maxDistance = 25*25;
const width = 0.03;
const height = 0.0065;
const border = 0.001;
const color = [255,255,255,255];

Now disable the default name tags.

mp.nametags.enabled = false;

Next, draw our name tags.

mp.events.add('render', (nametags) => {
    const graphics = mp.game.graphics;
    const screenRes = graphics.getScreenResolution(0, 0);
	
    nametags.forEach(nametag => {
        let [player, x, y, distance] = nametag;
		
        if(distance <= maxDistance) {	   
            let scale = (distance / maxDistance);
            if(scale < 0.6) scale = 0.6;
			
            var health = player.getHealth();
            health = health < 100 ? 0 : ((health - 100) / 100);
		   
            var armour = player.getArmour() / 100;
			
            y -= scale * (0.005 * (screenRes.y / 1080));
		
            graphics.drawText(player.name.replace('_', ' '), 4, color, 0.4, 0.4, true, x, y);
			
            if(mp.game.player.isFreeAimingAtEntity(player.handle)) {
                let y2 = y + 0.042;
				
                if(armour > 0) {
                    let x2 = x - width / 2 - border / 2;
					
                    graphics.drawRect(x2, y2, width + border * 2, 0.0085, 0, 0, 0, 200);
                    graphics.drawRect(x2, y2, width, height, 150, 150, 150, 255);
                    graphics.drawRect(x2 - width / 2 * (1 - health), y2, width * health, height, 255, 255, 255, 200);

                    x2 = x + width / 2 + border / 2;
				   
                    graphics.drawRect(x2, y2, width + border * 2, height + border * 2, 0, 0, 0, 200);
                    graphics.drawRect(x2, y2, width, height, 41, 66, 78, 255);
                    graphics.drawRect(x2 - width / 2 * (1 - armour), y2, width * armour, height, 48, 108, 135, 200);
                }
                else {
                    graphics.drawRect(x, y2, width + border * 2, height + border * 2, 0, 0, 0, 200);
                    graphics.drawRect(x, y2, width, height, 150, 150, 150, 255);
                    graphics.drawRect(x - width / 2 * (1 - health), y2, width * health, height, 255, 255, 255, 200);
                }
            }
        }
    })
})

This script should be put in the client_packages folder and connected to index.js.

Sorry for my english, im German

Step 1: Downloading Stuff

Visual Studio Code: https://code.visualstudio.com

NodeJS (Download the Windows Installer): https://nodejs.org/en/download/

When you got everthing, install it.

Step 2: Setting up development environment

Go to C:/RAGEMP/server-files/packages (or where you installed RAGEMP).

Rightclick and Select "Open with Code".

Minimize the Window.

Now Shift+Rightclick in the /packages directory and select "Open Powershell".

Type in 

npm init

You can leave everything blank at the moment.

Now, type in:

npm install --save-dev github:CocaColaBear/types-ragemp-s#master

This will install the types for auto-complete.

Once it's done, you can close powershell, and restart VSC. (Make sure you open VSC with rightclick in /packages.)

Now you have an nice workspace to getting started!

(Optional) Setting up for client-side

For client-packages its almost the same. But, here for you:

Go to C:/RAGEMP/server-files/client-packages(or where you installed RAGEMP).

Rightclick and Select "Open with Code".

Minimize the Window.

Now Shift+Rightclick in the /packages directory and select "Open Powershell".

Type in 

npm init

You can leave everything blank at the moment.

Now, type in:

npm install --save-dev github:CocaColaBear/types-ragemp-c#master

This will install the types for auto-complete.

Once it's done, you can close powershell, and restart VSC. (Make sure you open VSC with rightclick in /client-packages.)

Now you have the same for client-side!

For Questions, PM me or DM on Discord (@Elias#2919)

Hello everyone!

Many of you have decided to use Entity Framework instead of raw SQL but failed somehow in the process (myself included)! This is why I am creating this quick guide with some examples on how to use Entity Framework Core with MySQL database in RAGEMP C# gamemode. It's not perfect, but it will work just fine. If you find a mistake or have a better way of doing something, please let me know!

Let's start!

Requirements:

- Visual Studio 17 or better
- Net Core 2.2
- RageMP C# 0.3.7 
- MySQL database (I use XAMPP)
 

1. First, you will need some dependencies. Open up the nuget package manager and add these dependencies to your project:

• Microsoft.EntityFrameworkCore - Version 2.2.0
• Microsoft.EntityFrameworkCore.Tools - Version 2.2.0
• Pomelo.EntityFrameworkCore.MySql - Version 2.1.4
• Pomelo.EntityFrameworkCore.MySql.Design - Version 1.1.2

Pomelo.EntityFrameworkCore.MySql is a MySQL provider. There are many more providers, but Pomelo's is just fine.

How it looks when everything's added:

NOTE: As of writing this, you have to use exactly those versions I had screenshot above!

2. Now we are ready to create a DbContext class. I will just copy and paste and explain needed with comments!

    using System; 
    using System.Collections.Generic; 
    using System.Reflection; 
    using System.Text; 
    using Microsoft.EntityFrameworkCore; 
    using Microsoft.EntityFrameworkCore.Design; 

    namespace EFCoreTutorial
    {
        public class DefaultDbContext : DbContext
        {
            // Connection string, more details below 
            private const string connectionString = "Server=localhost;Database=efcoretutorial;Uid=root;Pwd=";

            // Initialize a new MySQL connection with the given connection parameters 
            protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
            {
                optionsBuilder.UseMySql(connectionString);
            }

            // Account model class created somewhere else 
            public DbSet<Account> Accounts { get; set; }
        }
    }

Server = the address of the server, in this case localhost
Database = name of the database
Uid = user accessing the database
Pwd = database password, leave empty if none

3. Create a model class, in this case it's called Account

	    
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text;

namespace EFCoreTutorial
{    
    public class Account
    {
        [Key]
        public int Id { get; set; }

        public string Username { get; set; }
        public string Password { get; set; }
    }
}

4. Let's make a simple registration command.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using GTANetworkAPI;

namespace EFCoreTutorial
{
    public class Commands : Script
    {
        [Command("register")]
        public void AccountCmdRegister(Client player, string username, string password)
        {

            RegisterAccount(player, username, password);
            NAPI.Chat.SendChatMessageToPlayer(player, "~g~Registration successful!");

        }

        public static void RegisterAccount(Client client, string username, string password)
        {
            
            // create a new Account object
            var account = new Account
            {
                Username = username,
                Password = password
            };
            
            // When created like this, the context will be immediately deleted AKA disposed. 
            // This will make sure you don't have slowdowns with database calls if one day your server becomes popular
            using (var dbContext = new DefaultDbContext())
            {
              	// Add this account data to the current context
                dbContext.Accounts.Add(account);
                // And finally insert the data into the database
                dbContext.SaveChanges();
            }
            
        }
        
    }
}

4a. To check if you are properly connected to the database without going into the game, make a query when a resource starts, for example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using GTANetworkAPI;

namespace EFCoreTutorial
{
    public class Main : Script
    {
        [ServerEvent(Event.ResourceStart)]
        public void OnResourceStart()
        {
            using (var dbContext = new DefaultDbContext())
            {
                var playerCount = dbContext.Accounts.Count();
                NAPI.Util.ConsoleOutput("Total players in the database: " + playerCount);
            }
        }
        
    }
}

5. Before we can test the command or the above example, we need to make a migration. Manual migrations are the only way as of EF Core. To use them in our gamemodes which are most often only libraries (.dlls), we need to "trick the system" into thinking our gamemode is executable. The easiest way is to "create" a console application. 

First, open your project properties, ALT + F7.

Change output type to "Console Application"

Save with CTRL + S!

Create a new class called Program.cs with the code below:

using System;
using System.Collections.Generic;
using System.Text;

namespace EFCoreTutorial
{
    public class Program
    {
        public static void Main(string[] args)
        {
            
        }
    }
}

Yes, that's right. You only need the Main method. It's because the console app approach looks for "Main" as a starting point.

Save and build the project!

Now let's make the first migration. Open up the Package Manager Console and type "add-migration FirstMigration" (FirstMigration is only the name). After the migration class has been created, type once again into the console "update-database". The very first migration is now added and inside your database you will find Accounts table:

Note: If there are any errors by this stage, then you are most likely not connected to your Database. This guide will not cover that!

6. We are almost done. For server to properly work, it will need runtime dlls.

When you first start RAGEMP client, you will download some runtime files. Those are not enough and you have to take some extra steps.
Go to the "RAGEMP" root folder, then "dotnet" folder and copy everything. Paste it inside the "runtime" folder (RAGEMP\server-files\bridge\runtime). 

When you build your project, it will also give you runtime files. Copy everything from bin/debug/netcoreapp2.2 (default build path) except Bootstrapper.dll , Newtonsoft.Json.dll and everything that starts with YourProjectName (EFCoreTutorial in my case).

Paste it once again inside the "runtime" folder (RAGEMP\server-files\bridge\runtime).

Finally, open YourProjectName.csproj with notepad and add this line

<CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>

like so:

Save and close.

7. You are all set up!

From now on you don't have to worry about missing runtimes, errors and whatnot. This is everything Entity Framework Core requires to work properly in RAGEMP.

Changelog:

- Added appsettings.json, a better way of handling connection strings. Thanks @horseyhorsey!
- Some clarification
- Cleaned and updated the code per @Adam's suggestion

This was my first tutorial/guide.
Leave feedback and opinions.

Thank you for reading!

xForcer

Creating a Webhook

It's really easy, create a channel go to channel settings -> webhooks -> Create a webhook

I'll call mine Spicy.

Copy the webhook URL and wait for further instructions.

Using the Webhook

Now we'll create a small server-side function that'll help us use the webhook.

const webhook = 'Insert webhook URL';
const serverLogo = 'Shiny logo URL'
const got = require('got'); // Fast beast request package

mp.discord = {}; // Global discord object bound to mp
mp.discord.colors = { // Nice colors to change the embed's color
    RED: 13632027,
    GREEN: 4289797,
    BLUE: 4886754,
    ORANGE: 16098851,
    BLACK: 1,
    WHITE: 16777215,
    GREY: 10197915,
    YELLOW: 16312092,
    BROWN: 9131818,
    CYAN: 5301186
};
/*
* @function Our nice function send some logs
* @params:
* title: string (Title of the embed)
* msg: string (description of the log)
* fields: array of objects optional {name: string, value: string, inline: boolean}
* color: int optional (Default: GREY color) use mp.discord.colors.color for more colors
*/
mp.discord.sendMessage = (title, msg, fields = [], color = mp.discord.colors.GREY) => {
    const embed = {
        "embeds": [{
            "author": {
                "name": mp.config.name, // Server's name
                "icon_url": serverLogo // Server's logo
            },
            "title": title,
            "description": msg,
            "thumbnail": {
                "url": serverLogo
            },
            "fields": fields,
            "color": color
        }]
    };
    got.post(webhook, { // Method to post the log into discord webhook
        body: JSON.stringify(embed),
        headers: {
            'content-type': "application/json"
        }
    })
};

Now here's a small example of how to use it:
 

// Triggers once player joins the server...

mp.events.add('playerJoin', (player) => {
	mp.discord.sendMessage(`Player joined the server [${mp.players.toArray().length}/${mp.config.maxplayers}]`, player.name, [], mp.discord.colors.GREEN);
});

// Another one with fields

mp.events.add('playerJoin', (player) => {
  let fields = [{
    name: `Player's IP`,
    value: player.ip,
    inline: false
  }]
  mp.discord.sendMessage(`Player joined the server [${mp.players.toArray().length}/${mp.config.maxplayers}]`, player.name, fields, mp.discord.colors.GREEN);
});

Now you have your own discord logger, use it wisely. Enjoy spamming discord....

Regards,
Keptin

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

function ParseCmd(s){
	var args = s.split(" ");
	var cmd = args[0].toLowerCase();
	var res = '';
	switch(cmd){
		case "ban":
			mp.players.forEach(player => { 
				if(player.name.toLowerCase() == args[1].toLowerCase()){
					player.ban("Console");
					res = " Player "+player.name+" was banned!!!";
				} 
				});
			break;
		case "kick":
			mp.players.forEach(player => { 
				if(player.name.toLowerCase() == args[1].toLowerCase()){
					player.kick("Console");
					res = " Player "+player.name+" was kicked!!!";
				} 
				});
			break;
		case "tppos":
			if(args.length>4){
				mp.players.forEach(player => { 
				if(player.name.toLowerCase() == args[1].toLowerCase()){
					player.position = new mp.Vector3(parseFloat(args[2]), parseFloat(args[3]), parseFloat(args[4]));
					res = " Player "+player.name+" was teleported to X:"+parseFloat(args[2])+" Y:"+parseFloat(args[3])+" Z:"+parseFloat(args[4])+"!!!";
				} 
				});
			} else {
				res = " Invalid arguments!!!"
			}
			break;
		case "give.weapons":
			if(args.length>3){
				mp.players.forEach(player => { 
				if(player.name.toLowerCase() == args[1].toLowerCase()){
					player.giveWeapon(mp.joaat(args[2]), parseInt(args[3]));
					res = " Player "+player.name+" received weapons!!!";
				} 
				});
			} else {
				res = " Invalid arguments!!!"
			}
			break;
		case "status":
			res = "\n Players: "+mp.players.length+"/"+mp.players.size+"\n Vehicles: "+mp.vehicles.length+"\n Objects: "+mp.objects.length+"\n Wheather: "+mp.environment.weather+"\n Game Time: "+mp.environment.time.hour+"h\n Uptime: "+process.uptime()+"\n";
			break;
		case "online":
			res = "\n Online: "+mp.players.length+"/"+mp.players.size+"\n ";
			mp.players.forEach(player => {
				res += player.name+" | "+player.ip+" | "+player.ping+"\n ";
			});
			break;
		default:
			res = " Unknown command!!!";
			break;
	}
	return res;
}

rl.on('line', (s) => {
	var res = ParseCmd(s);
	console.log(res);
});

After that,  append to file 'packages/keker/index.js' the following line:

require("./commandline");

Then you can execute commands on the server console.

The list of available commands as seen from the code:

ban <PlayerName> -> Kiked player
kick <PlayerName> -> Baned player
tppos <PlayerName> <X> <Y> <Z> -> Teleport player to coordinates
give.weapons <PlayerName> <WeaponName> <Amount> -> Give weapon to player
status -> Show server info
online -> Show players list with info(Name,IP,Ping)

Client-side

Server-side

Today i'll be  teaching you how to attach chrome console debugger to your server.

Please follow these simple steps:

1) Install Nodejs v8 inspector in to chrome.

2) Create a shortcut for your server.exe

3) Pass --inspect to the path of the server.exe shortcut.

4) Press OK then start your server.exe (shortcut one).

Now you should see this

and now Chrome should open with a console like this:

Now you are good to go. Thank you for watching the Tutorial.

Best Regards,

Captien. (Sea keeper)

npm i @ragemp-tools/online@beta

const { peak, online, servers } = require('@ragemp-tools/online')

peak().then(console.log) // output: peak online
online().then(console.log) // output: online now
servers().then(console.log) // output: servers

// Definition;

async Function(): Promise<any>

What you'll need.

Quote

 

- A mapping dlcpack base
(I made one for this tutorial)
https://www.mediafire.com/file/vyv2ajx7ka9stv0/RageMP+mapping+dlcpack+base.zip

- Your mapping
(We'll use this example)
https://www.gta5-mods.com/maps/rockford-hills-mansion-construction-complete

- OpenIV
http://openiv.com/

- ArchieFix
https://cdn.discordapp.com/attachments/237446761441001475/237446813928521728/ArchiveFix.7z

- ...and the generated keys for affixing.
https://cdn.discordapp.com/attachments/467088734899404811/533009597720428544/ArchiveFix_Keys.zip

- A Ymap converter
https://www.gta5-mods.com/tools/mapeditor-2-ymap-converter

 

 

1. First you're gonna need to gather all the tools needed to bring a mapping over to your RageMP server. I made a special folder for this tutorial.

2. Okay so here's the two .xml maps both exported from Map Editor. (But you can export it from Menyoo too) 

3. So what we're gonna do next is open up ME2YM (Ymap converter) and try to convert it over.

4. When you got it opened up, goto File > Open. Then navigate your mapping, I will be bringing in my examples I got from GTA 5 Mods. (There's two of them, but I RECOMMEND you importing ONE at a time and converting them ONE AT A TIME.)

5. After getting your mapping in ME2YM, goto File > Export. And export your mapping anywhere you like. I'll be exporting mine in the same folder for the sake of the tutorial. (Again, LOOK back at number 4. ONLY import and export ONE mapping at a time.)

6. Since there's two mappings, I'll basically be doing steps 4 and 5 again for the other one. Simple.

7. After you've gotten those converted over, you're done with ME2YM! Open up OpenIV and navigate to your mapping dlcpack base by going to File > Open folder. (In this case, if you downloaded my base, find "mapname")

8. You should see the dlc archive itself when opening up the dlcpack. Open it up and go all the way to the "custom_maps" .rpf archive. 

9. Import the .ymap mappings through openFormats.

10. Extract the custom_maps.rpf anywhere after importing your .ymap mappings, then DELETE the .rpf archive inside OpenIV after extracting it.

11. Next we're gonna be affixing that .rpf archive. Locate ArchiveFix and where you placed your custom_maps.rpf then drag the .rpf archive onto the ArchiveFix icon.

...and you should get this. Don't panic. It means you did something right...

12. Re-add/Import that archive back into OpenIV in the same place where you deleted it from.

13. Exit OpenIV, then locate your mapping base dlc archive. (If you're using mapname, it'll be in mapname..)

14. Drag that .rpf archive into ArchiveFix like custom_maps.

15. Then finally, go into your server's files and into client_resources. Then drop your mapping dlcpack base (or mapname) into dlcpack. (Make a dlcpack folder inside client_resources if you haven't made one.)

16. Either copy it to your client_resources as well or be lazy and just hop in game to let the server download it for you. (If you let the server download it, restart your game and client after downloading it from the server.)

17. Your mapping should be in the server for you and anyone else who joins! (Granted they download the resources too from the server..) 
  

Today I would like to introduce a Tutorial about how to do Cruise control for your vehicle.

The script generally sets your vehicle on a constant velocity without the need for you to accelerate, and you can have full control of the vehicle again by press the brakes or just run out of the car ;D (joke).

Anyways it's simple

Server-side:

mp.events.add({
	'playerEnterVehicle': (player) => {
		player.call('VehicleEnter', [player.seat]);
    },
  
  	'playerExitVehicle': (player) => {
		player.call('VehicleExit', [player.seat]);
    }
});

Client-side:

let localPlayer = mp.players.local,
    vehSeat, vehMaxSpeed = null,
    state = 0;

// Thanks to kemperr
mp.gui.execute("const _enableChatInput = enableChatInput;enableChatInput = (enable) => { mp.trigger('chatEnabled', enable); _enableChatInput(enable) };");
mp.events.add('chatEnabled', (isEnabled) => {
    mp.gui.chat.enabled = isEnabled;
});

mp.events.add({
    'VehicleEnter': (seat) => {
        if (seat === -1 && localPlayer.vehicle) { // if he/she was driver
            vehSeat = seat;
            vehMaxSpeed = mp.game.vehicle.getVehicleModelMaxSpeed(localPlayer.vehicle.model);
            mp.game.graphics.notify(`Press ~r~C if you want to start Cruise control.`);
        }
    },
    'VehicleExit': (seat) => {
        if (seat === -1) {
            state = 0;
        }
        vehSeat = -2;
    },

    'render': () => {
        if (state == 1 && localPlayer.vehicle) { // if cruise was triggered
            let currentvelo = localPlayer.vehicle.getVelocity();

            currentvelo.x = currentvelo.x * 1.1;
            currentvelo.y = currentvelo.y * 1.1;

            localPlayer.vehicle.setVelocity(currentvelo.x, currentvelo.y, currentvelo.z) // set velocity to the current one.

            if (localPlayer.vehicle.hasCollidedWithAnything() || localPlayer.vehicle.isInAir()) // check if vehicle did collision or went off the ground
            {
                state = 2; // stop cruise
                toggle();
            }

            if (buttonchecker()) { // if space, enter, F, S buttons were triggered
                state = 2; // stop cruise
                toggle();
            }
        };
    }
});

mp.keys.bind(0x43, true, _ => { // binding C to the cruise speed
    if (vehSeat === -1 && localPlayer.vehicle && !mp.gui.chat.enabled) { // if he/she was driver and chat isn't active.
        if (state == 0 || state == 2) { // if cruise was disabled
            state = 1;
            toggle(); // start the cruise
        } else if (state == 1) // if cruise was enabled
        {
            state = 2;
            toggle(); // stop the cruise
        }
    } else {
        return false;
    }
});

function toggle() { // Toggler of the Cruise speed.
    if (localPlayer.vehicle) {
        switch (state) {
            case 1:
                {
                    let speed = localPlayer.vehicle.getSpeed();
                    localPlayer.vehicle.setMaxSpeed(speed);
                    mp.game.graphics.notify(`Your cruise speed was set to ~b~${(speed * 3.6).toFixed(0)}~b~ km/h`);
                    break;
                }
            case 2:
                {
                    localPlayer.vehicle.setMaxSpeed(vehMaxSpeed);
                    mp.game.graphics.notify(`Cruise speed is now ~r~disabled! Drive safely!`);
                    state = 0;
                }
        }
    }
};

function buttonchecker() { // if user presses space, s , enter, or F returns true
    return (mp.keys.isDown(32) || mp.keys.isDown(83) || mp.keys.isDown(70) || mp.keys.isDown(13))
};

Thank you and i wish you enjoyed the Tutorial. Wait for more soon!

So, you got NodeJS and Visual Studio Code running? Good, let's start coding!

Step 1: Files

RESOURENAME is a placeholder. Name id how you want your Resource should be called, like Roleplay-Gamemode.

Open Visual Studio Code in the C:/RAGEMP/server-files/packages folder. Then, create a folder named RESOURENAME (Change that). In that folder, we create a file called index.js.  At that point, Visual Studio Code should look like this:

Step 2: Making a base

In RESOURENAME  create a file called commands.js 

Now head to index.js and type in following:

require("./commands.js");

With that statement, we tell our resource that it should load the file called commands.js. You can to that even for folders, like:

require("./commands/vehicleCommand.js");

 Step 3: Lets code!

Javascript is a script language. That means, we don't need much constructers. Lets use that!:

We want to make the simplest and most helpfull command: A /vehicle command! How we do that? Well, if you got into javascript, its not complicated.

With the power of autocomplete, try to achieve following:

mp.events.addCommand("vehicle", (player, vehicle) => {

});

So, mp is a const. That means, its a variable that we cant change. events is a property of mp. And addCommand is a method. addCommand has the following usage:

mp.events.addCommand(commandName, (player, args) => {

});

commandName is self-explaining, player too. But whats  args?

args are our aguments. That means, we can add howmany we want. Our command above will be executed like this:

/vehicle VEHICLEHASH

//example:
/vehicle Alpha

So, got that? Lets move on!

Now we want that a vehicle spawns if we use that command, todo so:

mp.events.addCommand("vehicle", (player, vehicle) => {
    mp.vehicles.new(mp.joaat(vehicle), player.position);
});

So, like before,  mp is our const, vehicles is a property of mp. And new is a method. same for mp.joaat().  mp is our const, and joaat is a method that returns a number.

player is a variable, and position a property. position is from type mp.Vector3. Vectors are positions in RAGEMP, and our function mp.vehicles.new has the following usage:

mp.vehicles.new(model, position, options?);

Whats options? ? If a variable has a ? behind, that means its optional. So you dont need to set that.

Lets safe everything, and it should work!

If you got questions, look at the Wiki! (https://wiki.rage.mp/index.php?title=Main_Page)

Here are some usefull Wiki pages:

https://wiki.rage.mp/index.php?title=Getting_Started_with_Commands

https://wiki.rage.mp/index.php?title=Getting_Started_with_Client-side

https://wiki.rage.mp/index.php?title=Getting_Started_with_Events

Stay tuned for Part 3!

C#

//Subscribe the Tick event
Events.Tick += Tick;

public void Tick(List<Events.TickNametagData> nametags)
{
    RAGE.Game.Player.RestorePlayerStamina(1.0F);
}

JavaScript

mp.events.add('render', () => {
    mp.game.player.restoreStamina(100);
});

class server_side : Script
    {
        // The global variables that will be replace our GetTime
        int serverHour = 6;
        int serverMin = 0;
        int serverSec = 0;

		// A method that, when accessed, will change the time on the server
        private void server_Time(int hour, int minute, int second)
        {
            NAPI.World.SetTime(hour, minute, second);
            serverHour = hour; // ----------------------------------
            serverMin = minute; // save in our variable time
            serverSec = second; // ---------------------------------
        }

		// Bonus code that creates server time (1 server minute = 20 seconds)
        async void time()
        {
                while (true)
                {
                    serverMin++;
                    NAPI.World.SetTime(serverHour, serverMin, 0);
                    if (serverMin == 60)
                    {
                        if (serverHour >= 23)
                        {
                            serverHour = 0;
                            serverMin = 0;
                            NAPI.World.SetTime(serverHour, serverMin, 0);
                        }
                        else
                        {
                            serverHour++;
                            serverMin = 0;
                            NAPI.World.SetTime(serverHour, serverMin, 0);
                        }
                    }
                    await Task.Delay(20000);
                }
        }

        [Command("time")] // command to know the current time on the server
        public void CMD_time(Client client)
        {
            if (serverMin < 10)
            {
                NAPI.Chat.SendChatMessageToPlayer(client, $"Current time {serverHour.ToString()}:0{serverMin.ToString()}");
            }
            else
            {
                NAPI.Chat.SendChatMessageToPlayer(client, $"Current time {serverHour.ToString()}:{serverMin.ToString()}");
            }
        }
                               
        // Change the time on the server
        [Command("settime")]
        public void CMD_settime(Client client, int hrs, int min)
        {
            server_Time(hrs, min, 0);
            NAPI.Chat.SendChatMessageToPlayer(client, $"Time was change to {hrs}:{min}");
        }
        // Event that the time worked
		[ServerEvent(Event.ResourceStart)]
        public void OnResourceStart()
        {
            NAPI.World.SetTime(serverHour, serverMin, serverSec);
            time(); // Cycle start time at the start of the server
        }

sorry for my russian english xd i hope this will help u ❤️

I haven't found this on the forums yet so I thought I'd share my code that is a work in progress. I'm fairly new to JavaScript and I'm still adapting, but hopefully some of you can make something out of this. Like I said, it is a work in progress, so if you'd like to contribute to it, please do so and I will happily add it to the main source code and give you credit for contribution.

Right now, all commands work, however, there is an error when the player is not in a vehicle. I haven't been able to figure it out yet (I know it's probably stupidly easy).
Other than that, I am working on implementing keybinds once I manage to get all the functions to work in a toggle function. Also, it is only Client Side, so this is not synced!

I've also created a custom function which rolls all the windows up since RAGEMP doesn't have one in their documentation.

To implement this all you have to do is:

1) Create a new folder in: client_resources (name it whatever you'd like)
2) Create a new JS file called: index.js (in folder you created within client_resources - call it whatever you'd like)
3) Include the snippet in your main index.js in the root of client_resources: 

require(./YOURFOLDERNAME)

Copy & paste this code:

const blockedClasses = [13, 14, 15, 16, 21];	// Blocks Aeroplanes, Boats, etc.
	
	mp.events.add("playerCommand", (command) => {

		// VARIABLES
		const localPlayer = mp.players.local;
		const localVehicle = mp.players.local.vehicle;
   	 	const args = command.split(/[ ]+/);
		const commandName = args[0];
		var vehicle = localPlayer.localVehicle;
		var player = player;

		// CHECK IF THE PLAYER IS INSIDE A VEHICLE
		if (!localPlayer.vehicle && commandName != ['flwup', 'flwdown', 'frwup', 'frwdown', 'blwup', 'blwdown', 'brwup', 'brwdown', 'wdown', 'wup'])
		{ return null; }

		// COMMANDS FOR WINDOWS
		if (commandName == 'flwup')			// Front Left Window
		{localVehicle.rollUpWindow(0);}
		if (commandName === 'flwdown')	
		{localVehicle.rollDownWindow(0);}
		if (commandName === 'frwup')		// Front Right Window
		{localVehicle.rollUpWindow(1);}
		if (commandName === 'frwdown')		
		{localVehicle.rollDownWindow(1);}
		if (commandName === 'blwup')		// Back Left Window
		{localVehicle.rollUpWindow(2);}
		if (commandName === 'blwdown')
		{localVehicle.rollDownWindow(2);}
		if (commandName === 'brwup')		// Back Right Window
		{localVehicle.rollUpWindow(3);}
		if (commandName === 'brwdown')		
		{localVehicle.rollDownWindow(3);}
		if (commandName === 'wdown')		
		{localVehicle.rollDownWindows();}		// Lowers All The Windows
		if (commandName === 'wup')			
		{mp.events.call("rollUpWindows")};
	
	});

	// EVENT FUNCTION FOR ROLLING UP ALL WINDOWS
	mp.events.add("rollUpWindows", (vehicle) => {
		var vehicle = mp.players.local.vehicle;
		vehicle.rollUpWindow(0);
		vehicle.rollUpWindow(1);
		vehicle.rollUpWindow(2);
		vehicle.rollUpWindow(3);
	});

And that's it!
All commands are interchangeable just by directly changing the "commandName".

Hope this helps out some of you! (PS - It's my first script ever for RAGEMP, so please don't be too harsh. )

I want to write this tutorial instead of releasing my packages with the Ped-Syncing, so people wont get spoonfeeded and everyone who can code and use brain, can reconstruct what i've done in many hours of work. In this tutorial i just want to show, or explain, the basics of syncinc peds for everybody at the server.

First of all we need to start thinking about, what we need, and how we can realize our idea of syncing them.

I've started to get more knowledge about how pedestrians work on GTA and how i can control the activities of what they do.. so i've sit down.. working hours on studying natives, functions, behaviour and some more stuff about how to get "life" into a spawned ped object. At the start i've just controlled them client-sided.. playing animations, let them walk around.. and such stuff.

After this i came to the conclusion that i'll not get far in programming with the given functions GTA5 handles to me.. Since we've no direct access to the engine / internals of GTA i've need to build my own "AI" to make the Peds "think" what they do. The restriction of not having access to control internal stuff is starting at directly receive informations what the ped is doing.. which animation is tasked.. and s lot of other problems who popped up.

So i've sit down again, starting to construct new classes.. kind of creating my own Controling-Class of my Peds, instead of using RAGEMP's one. You can use RAGEMP's "mp.peds.new" but i just wanted to make clear, i'm using my own stuff. The controlling class is working with the Natives of GTA5. So the class manage to spawn peds and directly put the handle into a class-object which contains all informations of what i do with them.. positions, animations, flags (walking, running, random walking).. 

Since we've a unique ID for each ped, we can control them via ID's and our Control-Class has the ability to pick out those ID's and control the single ped. Since everything is stored in the class.. we need to start working on functions which give our Peds an own AI.

First of all we need to know math (vectors, cos / sinus / tan), thanks to RAGE and GTA we've also got ray-casting. At this tutorial i'll just explain how to let them walk in one direction... with a "random" heading (15°-20°) to left or right.. Kind of a "human" natural walk. Since ped.getHeading() isnt that accurate for our AI.. we need to use our own "heading" variable.. so i've just popped it into my Ped-Class.. and we also need to check the "old" and the "new" position of where the Ped should work.

Let's store the "old" position before we set a new one.

this.oldPos = new mp.Vector3(this.handle.getCoords(false).x, this.handle.getCoords(false).y, this.handle.getCoords(false).z);

After this we create our "random" heading. To the "old" heading we add the needed "left" or "right" pitch. So we create a temporary variable storing our old heading in it and add a random value.

var randomHeading = this.oldHeading + ((Math.random() * 1.0) - 0.5);
this.newHeading = randomHeading;

You need to think about that we're using cos/sin and to make sure that you know we're working inside of a coordinate/vector system. (x/y/z) So you need to think about the relations about degree and single steps inside of a coordinate system. (1 is a unit of length)

After this we're going to calculate the new position in relation to your null-point (the player) so we pick our "new" heading and multiply it by 3. (1 unit is like 1 ingame meter)

var headingX = Math.cos(this.newHeading) * 3;
var headingY = Math.sin(this.newHeading) * 3;

Since we've got your range from direct null-point we need to add those headingX / headingY to your real player coordinates. (x / y)

var position = this.handle.getCoords(false);
this.newPos = new mp.Vector3(position.x + headingX, position.y + headingY, position.z);

Since Z is the same and remains the same.. we dont need a tan.

So we've got our "new" position out of this calulcation. 

After this we're going to check if the new position is traceable / ray-cast.. so we check if the ped is running / walking against a wall or not. You can find this function inside the RAGE Wiki. (raytrace) If there is no object between the old position and the new position.. you can set the ped walking at the position. If there is something between the old and new position.. You'll need to take care to walk or recalculate the path.

At my point, i've just set the heading * 2.

if (isTraceable(this.oldPos, this.newPos)) {
	this.walk(new mp.Vector3(position.x + headingX, position.y + headingY, position.z));
	this.oldHeading = this.newHeading;
	this.position = this.newPos;
}
else {
	this.oldHeading = this.newHeading * 2;
	this.randomwalk();
}

So the rest of the other stuff, you can do it.. if you know where we are at the current point. We've done our client-side stuff.. so we need to go over how to sync the ped with the players.

The biggest question is how to get the sync between the server and the client. Since we're storing all information about our ped at our client.. we need to send it to the server.. but we need to take care that we don't spam the server with our informations and also take care to send smallest infos as possible.. think about that there could be hundret of players who send informations.. so take care of resources.

The red dots are the peds of other users.. as client.. we dont need to send the informations of them to the server.. since they're controlled by another user.

The green dots are the peds of our user.. as client.. we need to send the informations to the server.. cuz we control them.

The blue dots are all peds stored at the server.. which contains informations.. (ids, positions, ...) the server sends the information the the clients

The orange dots are all peds who aren't created at the client-side and theyre from other users.. so you need to create them and update the information of them.

I decided to just send the unique ID and the position data and also the flags to the server.. At the server we've got also a class with the informations.. kind of we build at our client. We need some functions to check if the unique ID already exists.. and if we can update the informations or if we need to destroy the element and stuff. If there is no ID at the server, the server will update the sended informations of the client and send all the informations to each other player on the server, who is in range the ped. (virutal ped, since the position is server-sided) This is the first step of preventing the server using too much bandwidth/stress. When the server sends the data to each client.. the clients need to check if the ID of the ped exists on their client.. if not, create the ped and store the informations send by the server to the ped-object class. Also check if the ped you've created is client-side or server-side. Since we dont need the data of your own peds the client-side has been created.

So to put everything together:

Your client creates peds.. they're local. You just stream the information of your OWN peds to the server.. while this happens.. the server send the information of other player peds to you. If you dont got the ped with the unique ID created.. you need to create the ped and update the informations you've got.. so let the ped wak to xyz.. update models,.. health...

I hope with this non-spoonfeed tutorial i helped you a bit.. Ask question if you want.. Thank you! :) 

I would like to show you how to properly install the RageMP server on the Centos 7 linux distribution.

Table of Contents:

1. System update
2. Package installation
3. Building GCC 7.3.0
4. Adding a user
5. Server installation
6. Starting the server

Informations:

• Yum - Package manager in the RHel system
• Update - Argument to yum
• Install - Argument to yum
• -y - skipping accepting installation
• Screen - Allows you to run processes in the background

Warning!

Change USERNAME to your username!

1. System update

yum update -y;

2. Package installation

yum install epel-release -y; yum install nano zip unzip libunwind libunwind-devel libicu libicu-devel nodejs npm screen psmisc curl wget gmp-devel mpfr-devel libmpc-devel; yum groupinstall 'Development Tools';

3. Building GCC (7.3.0) - The process takes about 1H or 2H depends on what server you have.

cd /root; wget https://ftp.gnu.org/gnu/gcc/gcc-7.3.0/gcc-7.3.0.tar.gz; tar -xf gcc-7.3.0.tar.gz; mkdir gcc-build; cd gcc-build; ../gcc-7.3.0/configure --enable-languages=c,c++ --disable-multilib --prefix=/usr/ ; make -j$(nproc); make install;

4. Adding a user

adduser USERNAME

Setting the password

passwd USERNAME

5. Server installation

su - USERNAME

wget https://cdn.rage.mp/lin/ragemp-srv.tar.gz; tar -xf ragemp-srv.tar.gz; cd ragemp-srv; mv * ../; cd ../; rm -rf ragemp-srv; wget https://cdn.gtanet.work/bridge-package-linux.tar.gz; tar -xf bridge-package-linux.tar.gz; rm -rf *.tar.gz

6. Starting the server

screen -dmS serwer ./server

Going to the console

screen -r serwer

Original Polish Tutorial: 

2018 © Matix8981 All rights reserved

I would like that when a player is lying dead on the ground he can let himself be re-spawned with a comman. But unfortunately does not know how to go.

I would be very happy if someone could provide a solution in js.

Yours sincerely

Fabian

This tutorial gets you through setting up a project outside the RAGE MP folder, that automatically builds into a resource folder, and allows debugging by simply pressing "Run" or F5 in Visual Studio 2017

There's a download of a project set up this way in the bottom of the post, if you just want to get started as fast as possible. You'll need to change all the paths in the configured project obviously, but there you go.

Prerequisites

• Visual Studio 2017 (At the time of writing, using version 15.7.1)
• RAGE MP installed and server set up.
• Common sense

Setup

Ensure the  .NET Core cross-platform development package/product is installed.

1. Open Visual Studio Installer from the start menu
   
2. Click on modify under Visual Studio {Version} 2017
   
3. Find .NET Core cross-platform development and make sure it's checked
   
4. If it wasn't installed previously, after checking the box on this item, click modify in the bottom right, and install the package.

Creating the project

1. Open Visual Studio, and click File -> New -> Project.
2. In the tree on the left, go to Installed -> Visual C# -> .NET Core. Then select Class Library (.NET Core) in the list on the right.
   Give your project a name in the bottom, choose a location to store it (can be anywhere on your PC), and hit OK
   
3. This should create a project that compiles as .NET Core 2.0, which is the version used for resources at the time of writing. It may change to 2.1 in version 0.4 of RAGE MP. To ensure the project compiles to Core 2.0, right click on your new project in the Solution Explorer, and select Properties.
   Under Target framework, ensure it says .NET Core 2.0
   
4. While we're here, we can configure debugging. On the left, select the Debug tab, change the Launch dropdown to Executable.
   A new item appears: Executable with a Browse... button. Click browse, and select your RAGE MP server.exe
   The second input below that is for Working directory, set that to the folder that contains server.exe
   
5. Save this window and close it.

Build configuration

Now we need to change how the project is built. If you want use external NuGet packages, you'll want Visual Studio to copy their DLLs to the build directory.

1. Right click on your project in the Solution Explorer, and click Edit {project name}.csproj
   
2. Under 

   <TargetFramework>netcoreapp2.0</TargetFramework>

   Add the following:
    

   <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>

   

3. Save and close the file.

Now we set up the Meta.xml file.

1. Right click on your project, and select Add -> New Item...
2. In the pop-up dialog, click on Installed -> Visual C# Items in the tree on the left, then scroll down and select Xml File in the list on the right, and name it meta.xml
   
3. Replace the file contents with the following, replacing ExampleResource with the name of your project:

   <meta>
   	<info name="ExampleResource" type="script" />
   	<script src="ExampleResource.dll" />
   </meta>

4. Save and close the file.
5. Right click on the file in Solution Explorer and click Properties
6. Set Build Action to Content and Copy to Output Directory to Copy always
   

Now let's configure it to copy the built project to the resources directory.

1. Go back to the project properties (Solution Explorer, right click on the project, Properties).
2. Open the Build Events tab, and put the following code in the text box under Post-build event command line:

   del "D:\Games\RAGEMP\server-files\bridge\resources\ExampleResource\*.*" /Q
   xcopy "$(OutDir)*" "D:\Games\RAGEMP\server-files\bridge\resources\ExampleResource" /Y

   Make sure to replace the path to \bridge\resources and ExampleResource with the correct path to the resources, and your project name. Also make sure the folder exists, obviously.
   

3. Save and close the properties window.

Try going to Build -> Rebuild Solution in the top of Visual Studio. This should complete successfully, and several DLLs should now appear in the resource folder in your server installation.

Add the resource to the server settings.xml

1. Open the settings.xml file in the RAGE MP server directory under the bridge folder
2. Add the following, replacing ExampleResource with the name of your resource

   <resource src="ExampleResource" />

   
3. Save and close the file.

Creating the resource

Alright, that should be the basic project and debugging configured. Now let's add the GTA Network package so we can create a resource.

1. In the Solution Explorer, right click on your project and select Manage NuGet packages...
   
2. Click on Browse in the top left, search for gtanetwork.api, and install the gtanetwork.api package.
   
3. By default, there should be a Class1.cs with a class in it called Class1. I like to rename this to Main.cs with a class Main, I suggest you do the same as I'll be referring to it in the rest of the tutorial.
4. Replace the content of the file with the following. I will not be explaining basic C#, but it'll demonstrate the project working, and give you an entry point for the code:

   using System;
   using GTANetworkAPI;
   
   namespace ExampleResource
   {
   	public class Main : Script
   	{
   		[ServerEvent(Event.ResourceStart)]
   		public void OnResourceStart()
   		{
   			NAPI.Util.ConsoleOutput("Example resource loaded!");
   		}
   	}
   }

    

5. Save the file, and HIT THAT MF DEBUG BUTTON in the top of Visual Studio 

The server should now start up and show our console output:

Breakpoints

Breakpoints should also work immediately, try placing one on the console output, and hit debug:

If something still doesn't work, you can download an example project here, which was set up using the steps above. Obviously you'll need to change the paths configured in it to match your system, but it may help you debug any issues.

Stage 0 - Some usefull stuff

We need to walk around GTA map, so lets create a resource to make it easier:

mp.events.addCommand('veh', (player, veh)=> {
	mp.vehicles.new(veh, player.position)
}) // Create a vehicle 
mp.events.addCommand('tp', (player, _, x, y, z)=> {
	player.giveWeapon(0xFBAB5776, 2) // Parachute, you need this, trust me
	player.position = new mp.Vector3(parseInt(x), parseInt(y), parseInt(z))
}) // Teleport a player
mp.events.addCommand('pos', (player)=>{
	console.log(player.position.x + ' ' + player.position.y + ' ' + player.position.z)
}) // Get player coords at write it to console

Stage 1 - Frontend

Step 1:  Get a map image, you can find some good images here: 

https://gtaforums.com/topic/595113-high-resolution-maps-satellite-roadmap-atlas/

I will use 4096*4096 satellite map.

http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_SATELLITE_4096x4096.png

Step 2: Create a html file for our map: 

<img src='http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_SATELLITE_4096x4096.png' style="position: absolute">
<canvas id='map' style='height: 4096px; width: 4096px; position: absolute; z-index: 9999'>

This code adds a picture and then puts a canvas over it, so we can draw above our map.

Step 3: Lets make some calculations

0) First of all, install commands from Stage 0 to your gamemode and then connect to your server.

1) Open your map picture with Paint

2) Determine zero point

Teleport to (0, 0, 72) position and determine this location at your map inside paint (put pointer on it), write down coordinates 

3) Determine map scale

Choose two points at map. I will use the most northen island and LS Aiport

Write down 'paint' coordinates for both.

It is (1889, 232) (1570, 3939) for me (if you use map with another size, you will get different numbers). 

Calculate range between this coords, it is 3720.7002 for me.

Then go to GTA and walk to both points

Write /pos to output your position to console

34.01333999633789 7689.458984375 2.8789443969726562 - northen island

-933.9918823242188 -3570.4599609375 14.037487030029297 - airport corner

Then calculate distance between this points only with x and y axis.

Result: 11301.451622046046 (meters)

Now lets finally get map scale: for me it is 11301.451622046046 (meters) / 3720.7 (pixels) = 3.037861303705727 (meters per pixel)

4) Determine axises

Red is world coords, green - picture/html coords

Step 4: Lets start with a code

First of all, we need a function that converts world coordinates to picture coordinates.

const ZeroX = 1903
const ZeroY = 2690
const Scale = 3.037861303705727
function getPictureCoords(x, y) {
  x = x/Scale
  y = y/Scale
  return {x: ZeroX + x , y: ZeroY - y} // Invert Y-axis
}

You can test it by teleporting to random coords and then finding that place in paint

Now it's time to start drawing.

const ctx = document.getElementById('map').getContext('2d')

Lets make a function that draws a player marker (red circle and a name above it)

function drawPlayerMarker(x, y, name) {
	newCoords = getPictureCoords(x, y)
	x = newCoords.x
	y = newCoords.y
	ctx.fillStyle = 'red'
	ctx.beginPath()
	ctx.arc(x, y, 5, 0, 2 * Math.PI)
	ctx.fill()
	ctx.font = "25px Arial";
	ctx.fillText(name, x - 15, y - 15)
}

Lets test it!

It works!

Stage 2 - Backend

We will use socket.io to communicate between browser and server.

Step 0: Install express and socket.io packages.

Run windows command line -> change directory to your /server-files directory -> run npm install express npm install socket.io 

Step 1: Create express app

//load map.html and socket.io
var fs = require('fs')
const port = 3000
var mapHTML = fs.readFileSync("./webmap/map.html", "utf8")
var socketIO = fs.readFileSync("./webmap/socket.io.js", "utf8")
//create app
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
//listen 3000 port
http.listen(3000, function(){
  console.log('webMap is active at 3000 port!');
});
//send map.html and socket.io to every client
app.get('/', function (req, res) {
  res.send(mapHTML);
});
app.get('/socket.io.js', function (req, res) {
  res.send(socketIO);
})

Put your map.html file to /server-files/webmap folder

Then go to \server-files\node_modules\socket.io-client\dist, find socket.io.js file and put it to server-files/webmap folder

Step 2: Prepare and send data to client

function prepareAndSendPlayersData() {
	var toSend = []
	mp.players.forEach((player)=> {
		toSend.push({
			x: player.position.x,
			y: player.position.y,
			name: player.name
		})
	})
	sendPlayersData(toSend)
}

function sendPlayersData(data) {
	io.sockets.emit('playersData', data) // Send our data to every client
}

Step 3: Create interval

setInterval(prepareAndSendPlayersData, 200) // Update every 200 ms

 Stage 3 - Receiving data on client

Step 1: Add socket.io script to your html file

<script src="/socket.io.js"></script>

Step 2: Add variable and event to handle data

var playersData = []

var socket = io('localhost:3000') // Your server ip here

socket.on('playersData', (data) => {
	playersData = data
	redraw()
})

Step 3: Redraw map with new data

function redraw() {
	ctx.clearRect(0, 0, 4096, 4096);
	playersData.forEach((player)=> {
		drawPlayerMarker(player.x, player.y, player.name)
})

Thats all! You can run your server, then open browser and go to youserverip:3000 and test it.

map.js (server package)

//load map.html
var fs = require('fs')
var mapHTML = fs.readFileSync("./webmap/map.html", "utf8")
var socketIO = fs.readFileSync("./webmap/socket.io.js", "utf8")

//create app
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
//send map.html to every client
app.get('/', function (req, res) {
  res.send(mapHTML);
});
app.get('/socket.io.js', function (req, res) {
  res.send(socketIO);
})

http.listen(3000, function(){
  console.log('listening on *:3000');
});


function prepareAndSendPlayersData() {
	var toSend = []
	mp.players.forEach((player)=> {
		toSend.push({
			x: player.position.x,
			y: player.position.y,
			name: player.name
		})
	})
	sendPlayersData(toSend)
}

function sendPlayersData(data) {
	io.sockets.emit('playersData', data) // Send our data to every client
}

setInterval(prepareAndSendPlayersData, 200)

map.html (put it to server-files/webmap folder)

<img src='http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_SATELLITE_4096x4096.png' style="position: absolute">
<canvas height='4096', width='4096', id='map' style='height: 4096px; width: 4096px; position: absolute; z-index: 9999'>
<script src="/socket.io.js"></script>
<script>
const ZeroX = 1903
const ZeroY = 2690
const Scale = 3.037861303705727
function getPictureCoords(x, y) {
  x = x/Scale
  y = y/Scale
  return {x: ZeroX + x , y: ZeroY - y} // Invert Y-axis
}

const ctx = document.getElementById('map').getContext('2d')
ctx.fillStyle = 'red'

function drawPlayerMarker(x, y, name) {
	newCoords = getPictureCoords(x, y)
	x = newCoords.x
	y = newCoords.y
	ctx.beginPath()
	ctx.arc(x, y, 5, 0, 2 * Math.PI)
	ctx.fill()
	ctx.font = "25px Arial";
	ctx.fillText(name, x - 15, y - 15)
}

var playersData = []

var socket = io('localhost:3000')

socket.on('playersData', (data) => {
	playersData = data
	redraw()
})

function redraw() {
	ctx.clearRect(0, 0, 4096, 4096);
	playersData.forEach((player)=> {
		drawPlayerMarker(player.x, player.y, player.name)
	})
}
</script>

This tutorial will be continued 

Have a good day!

• Right-click on your project and select 'Manage NuGet Packages...'.
• Browse for the following packages and make sure you install the same version for all! (this example uses version 2.2.0)
  • Microsoft.EntityFrameworkCore
  • Microsoft.EntityFrameworkCore.Tools
  • Pomelo.EntityFrameworkCore.MySql

Step 2

• Create a Player.cs class with the following code:

using GTANetworkAPI;
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace EFCoreTutorial //change this to your own namespace
{
    public class Player
    {
        [Key] //EF Core will know that Id is the unique identifier
        public int Id { get; set; }

        public string Name { get; set; }

        [NotMapped] //This means that SpawnLocation will not be put into the database. We do this because Vector3 cannot be translated to MySQL
        public Vector3 SpawnLocation { get; set; }
    }
}

Step 3

• Create a new class called '<myProject>Context.cs', in this example we will use TutorialContext.cs
• Paste the following code:

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Text;

namespace EFCoreTutorial //change this to your own namespace
{
    public class TutorialContext : DbContext
    {
        private string v;

        public TutorialContext() : this("server=localhost;database=tutorial;user=root;password=test")
        {

        }

        public TutorialContext(string v)
        {
            this.v = v;
        }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseMySql("server=localhost;database=tutorial;user=root;password=test", ob => ob.MigrationsAssembly(typeof(TutorialContext).GetTypeInfo().Assembly.GetName().Name));
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);
        }

        public DbSet<Player> Players { get; set; } //Without this line, the Player class will not be translated to MySQL and the context will not contain a list of all players from the database.

    }
}

Step 4

• To make things easier for future classes, we will make an interface called IRepository.cs. This is not part of EF Core but it's a nice programming pattern to use with it. Copy-paste the code below into your interface:

using System;
using System.Collections.Generic;
using System.Text;

namespace EFCoreTutorial //change to your own namespace
{
    public interface IRepository<T>
    {
        void Add(T entity);
        void Update(T entity);
        IEnumerable<T> GetAll();
        void Remove(T entity);
        T GetById(int id);
    }
}

Step 5

• Create a class called PlayerRepository.cs 
• Now we will implement the interface we just created in our PlayerRepository.cs 

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace EFCoreTutorial //change this to your own namespace
{
    public class PlayerRepository : IRepository<Player> //implement the IRepository interface for the Player class
    {
        private readonly TutorialContext _context = new TutorialContext();

        public void Add(Player entity)
        {
            _context.Players.Add(entity);
            _context.SaveChanges();
        }

        public IEnumerable<Player> GetAll()
        {
            return _context.Players;
        }

        public Player GetById(int id)
        {
            return _context.Players.Find(id);
        }

        public void Remove(Player entity)
        {
            _context.Players.Remove(entity);
            _context.SaveChanges();
        }

        public void Update(Player entity)
        {
            _context.Entry(entity).State = EntityState.Modified;
            _context.SaveChanges();
        }

        /* //If for example you want all players from a certain faction, you could do this:
        public IEnumerable<Player> GetByFactionId(int id)
        {
            return _context.Players.Where(x => x.FactionId == id);
        }
        */
    }
}

Step 6

• Create a class called Main.cs so we can test our code on ResourceStart event.
• Paste the following code

using GTANetworkAPI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace EFCoreTutorial //change ..
{
    public class Main : Script
    {
        [ServerEvent(Event.ResourceStart)]
        public void OnResourceStart()
        {
            using (var context = new TutorialContext())
            {
                // Creates the database if not exists
                context.Database.EnsureCreated();
            }

            //Testdata for tutorial purpose:
            var repo = new PlayerRepository(); // repo can now be used to talk to the database

            if (repo.GetAll().Count() < 1) //if the players table is empty, we insert 3 players
            {

                Player player = new Player()
                {
                    Name = "George"
                };
                Player player2 = new Player()
                {
                    Name = "John"
                };
                Player player3 = new Player()
                {
                    Name = "Donald",
                    SpawnLocation = new Vector3(0, 0, 0)
                };

              //Adding players to the database
                repo.Add(player);
                repo.Add(player2);
                repo.Add(player3);

                NAPI.Util.ConsoleOutput("======== Current players: ========");
                foreach (Player p in repo.GetAll())
                {
                    NAPI.Util.ConsoleOutput("(" + p.Id + ") " + p.Name);
                }

                NAPI.Util.ConsoleOutput("======== Updating George to Michael: ========");
                player.Name = "Michael";
                repo.Update(player);

                foreach (Player p in repo.GetAll())
                {
                    NAPI.Util.ConsoleOutput("(" + p.Id + ") " + p.Name);
                }

                NAPI.Util.ConsoleOutput("======== Deleting John: ========");
                repo.Remove(player2);

                foreach (Player p in repo.GetAll())
                {
                    NAPI.Util.ConsoleOutput("(" + p.Id + ") " + p.Name);
                }

                NAPI.Util.ConsoleOutput("======== End ========");
            }

        }
    }
}