Search the Community

Всем привет, если кому-то интересно и кто хочет поучаствовать в разработке небольшого фреймворка, то прошу https://github.com/panarama360/rager Хотелось бы увидеть или услышать мнения тех кто имеет достаточный опыт в разработке под rage, может что-то не хватает или наоборот. Может кто-то и перейдет на typescript увидев декораторы и типы)

Hi, guys! I have one question. I would like to enable a language Typescript for my client-side. How I can do it? Wiki page don't help me: https://wiki.rage.mp/index.php?title=Using_Typescript (because there is an instruction for setting up vscode, but I want to use this language in my developed) Thanks for the answer!

Hey everyone. Here are some super annoying RAGE client-server-browser communication pitfalls that most of you will probably recognize: Communication mechanisms between different contexts on RAGE are limited. The server can only communicate to clients, browser instances can only communicate to the local client, and the client can communicate with either. In order words, you can only send messages in a single step. You can't send some data to the server directly from a browser instance or vice-versa. There are a couple of things you could do, like routing every single event through the client or setting up an HTTP server on top of your game server and using AJAX calls within the browser. Let's not go there... that's really messy. Unable to get result from event triggers. RAGE treats all events in a "send it and forget it" fashion. That means you can trigger an event on a local or remote context, such as the server, but then that's it. The only way to see how the server handled the request is to make another event handler on the client, then have the server trigger the event with the result. But what if the remote event is called multiple times? How does the "result" event handler know which request it's seeing the result of? Now imagine the same situation, but you want to ask the server something directly from a CEF instance. Now, you have to send an event to the client to tell it to send an event to the server, only to get the server to send an event back to the client which also should send an event back to your browser. AND you have to keep track of different requests so that the relevant result handler gets called. Oh my god. This can get really complicated, really fast. Here's a surprise: these are now all issues of the past! Yesterday, I decided to go at these problems head-on by writing rage-rpc: a universal, asynchronous Remote Procedure Call (RPC) implementation for RAGE. For those of you who are unfamiliar with the term and don't feel like hitting that link (I don't blame you), RPC is a mechanism that lets a context call a function on a remote context, and then retrieve the result of the remote function. It's not as complicated as it sounds, trust me. Here are some feature highlights of rage-rpc: Universal. There is one small library (<5 kb) that you can include in any context: browser, client, or server. Multi-step communication. Any context can send data to any other context. Browser instances can directly message the server. The server can directly send data to any browser instance of a specific player. Asynchronous result retrieval. Registered functions can return any JSON-able value, and it will get immediately passed back to the caller in the form of a Promise. This means that the client can ask the server for something, wait for it to finish executing, and then see the result in-line. No more need to set up multiple events and track requests just to get a simple response from a remote context. The bottom line is: any context can call a function that resides in any other context and immediately get access to its return value without any extra work. Enough of the chit-chat. Let's dive into some code examples. I'll post a comment on this post with plain RAGE event versions of each example. Beware. Installation You can download the minified JS bundle from the GitHub page or install the package with NPM. npm install -S rage-rpc Example 1: Client --> Server Let's start simple. Say we want to get a list of license plates of all vehicles on the server. We could do this on the client, but it might not always work if some vehicles aren't streamed in. For reliability, we want to ask the server to provide this list for us. Here's the client-side code: /* Client */ const rpc = require('rage-rpc'); rpc.callServer('getAllLicensePlates').then(plates => { mp.gui.chat.push(plates.join(', ')); }); Yeah. That's it. Seriously. Take a look at the server: /* Server */ const rpc = require('rage-rpc'); // the callback will be called, and the result will be sent back to the client automatically rpc.register('getAllLicensePlates', () => mp.vehicles.toArray().map(veh => veh.numberPlate)); That is all. Requests are matched up all under the hood. There are no events for you to handle or request IDs to manage. The client-side code is actually 100% compatible in the CEF environment also. No code changes anywhere. Example 2: Server --> Browser Imagine we want to get/set the value of some input field defined in some CEF instance of a player, but we're on the server. There are definitely better examples than this, but this isn't a common issue to begin with. Let's dive in and start with the browser code. You can define this in any CEF instance. /* Browser */ // assuming you're loading rage-rpc via script tag, "rpc" will be a global variable. // or if you're using a bundler like Webpack: //const rpc = require('rage-rpc'); const $input = $('#input'); rpc.register('getInputValue', () => $input.val()); rpc.register('setInputValue', val => $input.val(val)); For client-side, there is no code, but the module just needs to be required somewhere. This is because the browser has to route through the client to get to the server and vice-versa: /* Client */ require('rage-rpc'); Now for the server-side part: /* Server */ const rpc = require('rage-rpc'); const player = mp.players.at(0); rpc.callBrowsers(player, 'getInputValue').then((value, info) => { // notice the "info" variable. this is an object that contains various information about the callee such as: // - id: the internal unique ID associated with the request // - player: the player who called this function, if remotely called from CEF or client // - environment: the environment that called this function. one of "cef", "client", or "server". in this case it would be "cef" console.log(`The value of ${info.player.name}'s input is ${value}!`); rpc.callBrowsers(player, 'setInputValue', 'pooooop'); }); When you use callBrowsers, the client iterates over every browser instance until it finds a browser that has defined the procedure we're looking for, then it calls the first one it finds. This is why you can define the procedure in any browser instance, because technically each CEF instance is a completely separate context. You can even use callBrowsers from inside a CEF instance to communicate with other CEF instances. The API is the same as above, but you just leave out the player parameter from callBrowsers. Changelog 0.1.0 ADD: Bundled Typescript definitions IMPROVE: CEF outgoing call returning performance IMRPOVE: callBrowsers performance on all contexts FIX: Some code simplifications 0.0.3 FIX: Bug that prevented multiple resources from using RPC at the same time FIX: False alarm for multiple CEF instances receiving the same result ADD: Extra player verification for outgoing server calls 0.0.2 FIX: UMD exposing for correct Node.js importing 0.0.1 Initial commit Conclusion Please try it out and let me know what you think. This system makes communicating with remote contexts a breeze. And remember, you can call code on ANY context from ANY other context with rage-rpc. Also as a reminder, this is the very first iteration of this library as it was only made and tested within one day. I have some ideas for more features to incorporate in the future. Check out the GitHub page for more implementation details and API documentation: https://github.com/micaww/rage-rpc If you have any questions, comments, or issues, contact me on Discord: micaww#3032 You can also use the issue tracker on the GitHub page for feature requests and bugs.

Hi guys! Please tell me how to know. Can I start server-side development in C#? And in parallel to develop the client-side in JavaScript language? I want to use 2 languages simultaneously for development. Each side has its own. How can I implement this?

Всем привет! Пожалуйста, подскажите кто знает. Могу ли я начать разработку на стороне сервера на языке C#? И параллельно разрабатывать клиент на языке JavaScript? Я хочу использовать одновременно 2 языка для разработки. На каждой стороне свой. Как я могу это реализовать?

Hey guys! Originally wrote the code on the client in C#. Unfortunately it does not support some of the features that I need. Therefore, I decided to transfer the client's side to the language of JS. But the problem arose at the very beginning of the journey. I opened the tutorial (https://wiki.rage.mp/index.php?title=Getting_Started_with_Client-side) and did everything as written there. Then I started the server and joined it and I realized that nothing works. Based on the lesson materials, I have to get a chat message. But nothing works. I would like to appeal to the multiplayer community. Can you help me solve this problem?

Can someone explain how I can import a resource (NativeUI) to client. My current setup: I have been writing my gamemode using a typescript boiler plate (https://github.com/MarkCavalli/rage-server-start-template) So files in app folder client get compliled to client_packages and same for server into packages However when I try to require a third party script (NativeUI) I get an error TypeError Point is not a constructor I'm importing it into the client via: const NativeUi = require('../libs/nativeui.js') mp.events.add("PlayerJoin", () => { const Menu = NativeUI.Menu; const Point = NativeUI.Point; const UIMenuListItem = NativeUI.UIMenuListItem; const ItemsCollection = NativeUI.ItemsCollection; const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50)); ui.AddItem(new UIMenuListItem( "List Item", "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.", new ItemsCollection(["Item 1", "Item 2", "Item 3"]) )); }) Can anyone help me? I'm completely stuck for ideas on how I can get this to work.

Would anyone be able to help me with integrating NativeUI menu. I have tried but I just get an error. My setup is setup using typescript. I seem to get an error saying the following `TypeError: Point is not a constructor` import NativeUI from '../../libs/nativeui/index' const Menu = NativeUI.Menu; const UIMenuItem = NativeUI.UIMenuItem; const UIMenuListItem = NativeUI.UIMenuListItem; const UIMenuCheckboxItem = NativeUI.UIMenuCheckboxItem; const UIMenuSliderItem = NativeUI.UIMenuSliderItem; const BadgeStyle = NativeUI.BadgeStyle; const Point = NativeUI.Point; const ItemsCollection = NativeUI.ItemsCollection; const Color = NativeUI.Color; const ListItem = NativeUI.ListItem; mp.events.add({ 'player-creator': () => { init() } }) function init() { const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50)); ui.AddItem(new UIMenuListItem( "List Item", "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.", new ItemsCollection(["Item 1", "Item 2", "Item 3"]) )); mp.keys.bind(0x71, false, () => { if (ui.Visible) ui.Close(); else ui.Open(); }); }

Requirements Rage MP server files NodeJS VS Code (or preferred IDE/text editor) Basic typescript knowledge typescript in 5 minutes typescript overview Basic js/nodeJs knowledge Rage:MP TypeScript type definition for Server-side (credit: CocaColaBear) Introduction We are going to setup a simple rage mp server using typescript Getting Started Install typescript globally > npm install -g typescript Verify that you installed typescript correctly > tsc -v //version 2.9.2 (or whatever version you installed) Download Rage MP Typescript type files from: https://github.com/CocaColaBear/types-ragemp-s Place the the following files inside server-files folder index.d.ts vehicle_hashes.d.ts ped_hashes.d.ts weapon_hashes.d.ts enums.d.ts Setting Up Environment Go inside server-files and initiate a new npm project > npm init keep pressing enter until it asks "is this ok" and type yes or press enter. Now you should have a package.json in your server-files folder. Next install typescript dev dependencies > npm install --save-dev typescript After the install is complete, open your package.json and you should see typescript under devDependencies Next create a tsconfig.json file by running the following command > tsc --init You should now have a tsconfig.json file in your server-files directory. Open tsconfig.json and replace with: { "compileOnSave": true, "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "resolveJsonModule": true, /* needed to read json*/ "esModuleInterop": true, /* needed to read json*/ "outDir": "./packages/mygamemode", /* Redirect output structure to the directory. */ "strict": true /* Enable all strict type-checking options. */ }, "files": [ "index.d.ts", "vehicle_hashes.d.ts", "weapon_hashes.d.ts", "ped_hashes.d.ts", "enums.d.ts" ], "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] } Next create a new folder called "src" inside server-files Inside of src folder create another folder called "mygamemode" or whatever your gamemode will be. Note*: make sure your "outDir": "./packages/[GAMEMODENAMEHERE]" matches your gamemode folder name in tsconfig.json Within the mygamemode create a typescript file called index.ts(this will be your initial index.js file) mygamemode/index.ts import './commands'; Next create a folder within mygamemode called commands and inside this new commands folder create a new typescript file called index.ts mygamemode/commands/index.ts function setArmour(player: PlayerMp) { player.armour = 100; } mp.events.addCommand('armour', setArmour); Compiling Now we will compile the typescript files to output to packages/mygamemode open command and type > tsc -w what this command does is it compiles your whole project first and then watches for all .ts file changes and compiles/outputs them to packages/mygamemode which is specified in the tsconfig.json. Note*: Whenever you edit a .ts file, the typescript watch (tsc -w) will automatically compile the files to packages/mygamemode. Finally run your server.exe and enjoy coding in typescript! GitHub link: https://github.com/tameemi/ragemp-typescript