Search the Community

Introduction 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 Then try using the combinations of Max and 123 and you should see 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

https://wiki.rage.mp/index.php?title=EventTriggeredByKey As i understood, it should give me the keyCode of the player's pressed key in the first parameter, but it gives nothing.. When this event triggers?

Moin, Ich kriege diesen Fehler: mysql:134 Error: could not locate file lib/Connection.js Class = require('./lib/Connection'); Jemand eine Idee woran das liegt?

Hey there, folks! I recently asked myself, how I can retrieve the current FPS of a client, because there is no inbuild function at all. Here's a small snippet for retrieving the current FPS in TypeScript (if you want to use it in JS just compile it with a TS transcompiler or adapt it 😐). /* Copyright 2019 Vincent Heins/TheMysteriousVincent Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class FPSCalculator { private fps = 0; constructor() { let lastFrameCount = this.getFrameCount(); setInterval(() => { this.fps = this.getFrameCount() - lastFrameCount; lastFrameCount = this.getFrameCount(); }, 1000); } public get(): number { return this.fps; } private getFrameCount(): number { return mp.game.invoke('0xFC8202EFC642E6F2') as number; // '0xFC8202EFC642E6F2' is a method of GTA5 which returns the frame count since the game was started (see http://www.dev-c.com/nativedb/func/info/fc8202efc642e6f2 for ref.) } } export const FPS = new FPSCalculator(); Or, if you prefer a Gist: https://gist.github.com/TheMysteriousVincent/42a4b00b4c34b6dd27423e48bd5c6c52 Or additionally, if you prefer the download section of RageMP: Sincerely, ~Vincent

I'm trying to add custom DLC packs for road mods on this server: GTA world based on RAGEMP. Whenever I add a DLC in the (client_resources/dlcpacks) it deletes itself. I was told this was not an accident, but instead done on purpose, why is that? basically the problem: OpenIV modifications work, but client_resources/dlcpacks .rpf files automatically delete themselves if it's not from the server.

Everytime game crashes if client-side C# code includes `Task` with `async`, `await` operators. How can I wait a long processing task or how to wait X miliseconds in a thread? --- For example: public class InputTest : Events.Script { public InputTest() { Input.Bind(RAGE.Ui.VirtualKeys.F2, true, HandleF2Button); } private void HandleF2Button() { Chat.Output("F2 pressed. See you in 5 seconds"); Task.Factory.StartNew(async () => { await Task.Delay(5000); Chat.Output("Hello from 5 seconds later..."); }); } }

If someone can tell me why this isn't working, all the other CEFs work, just this one doesn't. It all compiles withour error and when i use /testnotif it sends me a message but does not show CEF. Im using this resource: Clientside: class Notification : Events.Script { RAGE.Ui.HtmlWindow NotificationCEF = null; public Notification() { NotificationCEF = new RAGE.Ui.HtmlWindow("package://cs_packages/CEF/popup/popup.html"); Events.Add("Show_Notif_CEF", ShowNotificationPopup); ShowCEF(false); } public void ShowNotificationPopup(object[] args) { ShowCEF((bool)args[0], (string)args[1]); } public void ShowCEF(bool show, string text = "") { if(show) { NotificationCEF.ExecuteJs($"ProvideInfo({text})"); } NotificationCEF.Active = show; } } Test command: [Command("testnotif")] public void CMD_testnotif(Player player) { NAPI.ClientEvent.TriggerClientEvent(player, "Show_Notif_CEF", true, "Test"); player.SendChatMessage("Notification test"); }

Hello There! Is it possible to use L.A roads or other roads in RageMP?

Hey everyone, I encountered a problem which I was not able to find a solution to solve my issue. I want to use a JObject parsed from a .json file. I used FileStreams and StreamReaders for that and got the error "C# filestreams could not be used" on login on the client side. My code is: public static JObject GetClothData(Sex sex) { string plainText = string.Empty; using (FileStream fs = File.OpenRead($"Clothes{(sex == Sex.Male ? "M" : "F")}.json")) { using (StreamReader sw = new StreamReader(fs)) { plainText = sw.ReadToEnd(); sw.Close(); } fs.Close(); } return JObject.Parse(plainText); } Is there anything to do in advance to allow filestreams or are there any workarounds? (e.g. in JS I can require a json file) Thanks in advance! Tim.

The idle or cinematic cam that becomes active after a certain time and constantly points to other things. can be easily deactivated. I'm going to post a snippet of code here to help you disable the IDLE camera (reset the idle timer). RAGE:MP Clientside Snipped: let IdleDate = new Date(); mp.events.add('render', () => { const dif = new Date().getTime() - IdleDate.getTime(); const seconds = dif / 1000; if (Math.abs(seconds) > 29.5) { mp.game.invoke(`0xF4F2C0D4EE209E20`); //Clear Idle Timer IdleDate = new Date(); } }); Have Fun

The print.ts snippet Information Problem Disadvantages Examples Sources 1. Information: Since 1.0 we have an object mp.console which helps us to send any information to the console (F11) There it's an interface interface ConsoleMp { logInfo(message: string, save?: boolean, saveAsync?: boolean): void; logWarning(message: string, save?: boolean, saveAsync?: boolean): void; logError(message: string, save?: boolean, saveAsync?: boolean): void; logFatal(message: string, save?: boolean, saveAsync?: boolean): void; clear(): void; reset(): void; verbosity: RageEnums.ConsoleVerbosity | string; } 2. Problem: We couldn't pass two or more params into the log functions and the first argument is waiting the string type. Snippet is extending usage of that interface by passing params like the function console.log. 3. Disadvantages: Disadvantage 1: this snippet is skipping two params: [save, saveAsync] which allows you to save logdata to ragemp folder. Disadvantage 2: snippet requires npm package: [util] $ npm i --save util // or $ yarn add util 4. Examples: Lets look to usage of the snippet print.ts index.ts import { print } from './print' // print helps you to send message for log information in way like this // and also you can pass any type to this function instead of logInfo which is waiting string argument print.info(mp.players.local, "any", "parameter", "you", ...["want", "just", "simple", { foo: 'Bar' }]) // instead of usaging the mp.console mp.console.logInfo(JSON.stringify(mp.players.local)) mp.console.logInfo("any") mp.console.logInfo("parameter") mp.console.logInfo("you") mp.console.logInfo(["want", "just", "simple"].join("\n")) 5. Sources: Snippet print.ts (typescript) Snippet print.js (javascript) In-game screenshot:

Hi When I spawn or change the model of a vehicle from the clientside, in the console I get the following error. System.NullReferenceException: Object reference not set to an instance of an object. at void GTANetworkInternals.RemoteEventParser.Parse(Player sender, ulong eventNameHash, object[] args) The code works, the vehicle changes model and everything is fine, but the error appears for each model change, so I get the same error every time a user wants to buy a vehicle and choose the vehicle model. The spawn code is: auto.entity = mp.vehicles.new(mp.game.joaat(dataVehicles.Vehicles[0].Model), new mp.Vector3(-42.79771, -1095.676, 26.0117), { alpha: 255, color: [[0, 0, 0], [0, 0, 0]], locked: true, engine: false, dimension: dim }); auto.entity.setRotation(0, 0, 0, 2, true); And the change model code is: auto.entity.model = mp.game.joaat(auto.vehiclesList[value].Model); Any idea to fix the error? Thx

Hi guys, yesterday I tried this code for client side js: mp.events.add("playerSpawn", () => { mp.gui.chat.push("You just spawned"); }); and its doesnt work. Just like "playerJoin" or other events on client side. Also i tried for "render" event,and its worked just fine. Can you explain why client side events wont work? (my script is added in index.js)

Hi there, i've started recently with rage mp, developing on node. I've run into some problems with client side programming. This is my example code: require('./car/events.js'); mp.game.ui.setNewWaypoint(-400, 1300); mp.checkpoints.new(1, new mp.Vector3(-400,1150,325), 8, {color: [ 255,50,50,255], visible: true}) mp.events.add("playerEnterCheckpoint", (checkpoint) => { mp.game.fire.startScriptFire(-420, 1180, 325.8, 30, false); checkpoint.radius =+ 5; }); The waypoint and the checkpoint is visible, but the event doesn't seem to work. Attempts with other events like playerJoin in combination with simple chat outputs failed too. I'm not sure if i've missed something or are there problems with client side javascript? Exist these problems with C# too?

Hey Guys, Ive started to code with Rage:MP for some days ago. Ive already a basic Server structure, but I need some information about Clientside coding with JS. So lets get started: How could I structure/organize my clientside code? Like how could the folder structure be and so on.. How can I create NativeUI with JS on Clientside ? For example if I created a colshape and marker somewhere, and only in this area should trigger the NativeUI in case i press E.

Well, I've been stuck with a little problem for a while, I can get C# Server Side scripting working fully and have tested it but when it comes to client side I have a bit of a problem. I've created the "cs_packages" folder in the 'client_resources' folder. When it comes to actually loading the script which is in its own folder inside cs_packages and yes it is not compiled into a .dll file. The problem is when I connect to my local server it grabs all the dll packages inside the cs_packages folder but doesn't start my "Main.cs" script which has a little output with "Loading Clientside". I've looked at YouTube videos like "Stuyk" and it worked for him, for me no. Any help would be appreciated, I'll leave the code in the Main.cs in a picture below.

Hello. Is it possible to use SPA on Vue.js? I am a beginner and do not fully understand this, are there any examples? Handling events from the server on the client which is on vue?

Hey! I've been busy developing an RP server lately, and i can get the Server-side working pretty good, but the time has come to start scripting client resources also. The problem is, that i can't find a tutorial or even a wiki page on how to start with the C# client side, because i don't want to code in Javascript, that would mean learning a new language and i don't want to go trough that hassle. So, can anyone explain to me how to make my first C# client side server resource? The only one who have been doing these kinds of tutorials were Stuyk, but he had removed every video regarding this topic. Thanks in advance.

Знание каких языков требуется для создания сервера и игрового мода? Так же, как делается маппинг? Ничего не собираюсь делать, просто интересен весь этот процесс. Какие языки используют для написания клиентских и других частей сервера. Какие языки можно использовать и какие используете вы. Как пишется игровой мод. Как делается маппинг?

When working with the client side, I encountered errors and do not know how to fix this. When connecting to my server, the following errors occur: JS # 10 startup error, data storage error # 4. Left only one line on the client: mp.gui.chat.push('Hello World')