Leaderboard

Hello everyone! In this tutorial I will try to show you how to create a Web map of your server. 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) map.html (put it to server-files/webmap folder) This tutorial will be continued Have a good day!

A bit late but I found out that the index id for window tint is 55 not 46. (For all those who are still looking for it)

Summary of RAGE Multiplayer 1.1 updates since 1.1 Testing Release (*quickly* dumped from #quick-updates) API Client-side JS game methods now throw an exception (instead of 1) just pushing a notification on argument type mismatch 2) silently failing on argument count mismatch) Added client-side player.isTypingInTextChat (synchronized and works both for local and streamed remote players, intended to replace third party custom typing state synchronization that mostly was implemented *not the most optimized way*) Added mp.invoke("setTypingInChatState", state); (CEF) Updated client-/server C# libraries (server-side C# resources require recompilation) Added client-side C# RAGE.Util.MsgPack.Serialize (MsgPack library should not be used through scripts directly anymore) Added client-side C# RAGE.Util.MsgPack.Deserialize Added client-side C# RAGE.Util.Json.Serialize (unlike MsgPack, you still can use Json/XxHash libraries directly, this is just an easy to use wrapper) Added client-side C# RAGE.Util.Json.Deserialize Added client-side C# RAGE.Util.Json.DefaultSettings Added client-side C# RAGE.Util.XxHash64.Hash Added client-side C# RAGE.Util.MsgPack.ConvertFromJson Added client-side C# RAGE.Util.MsgPack.ConvertToJson Added client-side C# RAGE.Util.MsgPack.DefaultOptions CEF<->Client-side triggers now support larger strings Added: you can now spawn synchronized peds with automatic controller assignment ({dynamic: true, lockController: false}); disabled by default Added client-side playerReady event (triggered when all the server data is ready) Added mp.system.isFullscreen (RAGE.Ui.Windows.Fullscreen) Added mp.system.isFocused (RAGE.Ui.Windows.Focused) Added mp.system.notify({ title: string, text: string, attribute: string, duration: int, silent: bool }) (RAGE.Ui.Windows.Notify) Added RAGE.Ui.DefaultWindow.Call/ExecuteCachedJs Added client-side C# Input.Bind Added client-side C# Input.Unbind Added client-side C# VirtualKey enum (and Bind/Unbind/IsKeyUp/Down overloads) Added support of binding left/right buttons (L/RShift etc) separately Added missing server-side C# player own data API Added radius parameter to client-side blip constructor Added missing server-side C# Vehicle.Spawn(Vector3 position, float heading) Added: C# EntityPool.AsEnumerable() Added client-side C# Entity.GetSharedData ulong key overload Added seatId param to client-side OnPlayerLeaveVehicle event Updated: client-side playerLeaveVehicle now has vehicle param "api-threading-debugging" now also throws a C# exception, alongside with logging bad calls JS Error "Expected multiplayer object" now also throws a JavaScript exception, not crashing the server anymore if caught Fixes Fixed unoccupied vehicle synchronization related crash Fixed client-side JS intervals Fixed server crash on vehicle destroy Fixed driving synchronization glitch Fixed RAGE.Ui.Console.Verbosity not being available Fixed client-side C# damage events missing some params Fixed non-ASCII server path support Fixed "Server crashes when trying to use a command that has a player parameter, and a player cannot be found" Fixed: long initial vehicle streaming times Fixed 64-bit integers in triggers from client-side to server-side Fixed reported client-side C# events-related issues Fixed reported client-side streaming issues Fixed "Marker.Visible gets ignored on marker restreaming" Fixed dummyEntityDestroyed client-side event not fired Fixed launcher settings issues; also a bit overhauled it Fixed client-side C# receiving wrong entities from triggers Fixed "C# Server-side GetClothesDrawable and GetClothesTexture returns incorrect value" Fixed "Blips created server-side (C#) with another dimension assigned to them seem to act weird. I created some on resource start, and all of them are visible on join, including those that are in other dimensions." Fixed mp.game.invoke crash after frequent referenced array buffer usage Fixed "Launcher: open launcher -> open settings -> click on "Change path" and nothing will happen" Fixed "RAGE.Elements.Entities.Players.Streamed always return empty list" Fixed "player.stopAnimation()" Fixed client-side playerEnterVehicle 1.1 regression Fixed: client-side RAGE.Ui.Input.TakeScreenshot not available Fixed: "mp.game.gxt.get and mp.game.gxt.getDefault crashes the game if the gxt entry is unknown, should return 'NULL'" Fixed release build/anticheat conflict Unoccupied vehicle synchronization fixes Fixed mp.Pool.forEach-related issues Fixed server-side weapon anticheat blocking weapon if given exactly after taking it from the player due to a false positive Fixed client-side C# OnConsoleCommand function command argument Fixed client-side C# DummyEntity shared data getter Fixed client-side C# browser state events Fixed player vehicle data not available in server-side playerLeaveVehicle event, it's now cleaned up after the event Fixed vehicle exit animation Fixed incorrect UTF-8 to UTF-16 masterlist convert resulting in empty masterlist if specific server name used Fixed a bug when checkpoints get streamed in invisible and then collide detection doesn't get activated after making it visible without restreaming Fixed SetEntitySharedData Dictionary<string, object> overload Fixed server-side blip V/RDR2 branch regressions Fixed vehicle dimension change warping the player out of the vehicle Fixed a few vehicle-related issues Fixed server-side object rotation setter Fixed client console input Fixed arrow navigation in launcher not being enabled back after closing settings modal Fixed miscellaneous server issues Added 1.1 Linux server build to the updater image (direct link: https://cdn.rage.mp/updater/10_mNwuchuQ4ktWbR8d2N5jUzRt/server-files/linux_x64.tar.gz) Updated localisations Linux server build fixes Fixed server-side C# player.GetHeadOverlay Fixed vehicle synchronization glitches when the driver gets warped out of the vehicle Fixed vehicle damage ignored if vehicle gets re-streamed by client-side streamer without server-side streamer notification Fixed Cursor.Visible returning "freezeControl" value instead of an actual cursor state Fixes for recent C# API additions Fixed the "vehicle synchronization stop" bug Fixed several client-side streaming issues related to slow resource streaming resulting in undefined behavior in a few cases Fixed C# missing DLL error message on launch Fixed reported key bind issues Fixed reported Linux build issues Fixed regular static client-side peds flags not matching 0.3.7 Fixed entity.forceStreamingUpdate() Several server fixes of issues caught with emulated server stress tests Fixed sending expired entities through mp.events.callRemote (just null now) Fixed RAGE.Util.Json.Deserialize optional settings argument Fixed accidental vehicle respawning for its driver after leaving the car Fixed all vehicle extras enabled by default Fixed vehicle.Locked Fixed white screen popping up before UI is completely loaded Fixed vehicles tyre bug (needs confirmation?) Fixed player.playAnimation Fixed unoccupied vehicles teleport issue Decreased player/vehicle client-side streaming times Fixed history tab Fixed map object validation when it's created before player joins Fixed game freeze issue Fixed legacy/1.1 client-side C# conflict Fixed mp.storage issue Misc Added launcher option to disable Windows notifications (enabled by default) Improve launcher load times Updated: "enable-synchronization-extrapolation" has been replaced with "synchronization-extrapolation-multiplier" (0.0 to disable) Reimplemented blip naming API (solves random blip names disappearing) Handshake/initial loading stuff has been reimplemented: faster joining on many entities/data, fix of timeouts on packet lossy connections on joining; works parallel off main stuff going on Added client 0.3.7 compatibility mode (even supports launcher client packages download) Added CEF accelerated rendering toggle ability (launcher settings); it's disabled now by default as people seemed to have issues related to CEF rendering in 1.1+ Renamed /clientdata/pool_overrides.xml to: 1) pool_overrides_v.xml; 2) pool_overrides_rdr2.xml Added back RAGE Multiplayer's assets "default" pool limit overrides (custom server-sided gameconfig.xml 1.1 feature was supposed to be a more smart and flexible way but both are going to be present now) Server streamer performance optimizations Added launcher option to pick preferred voice input device A few optimizations of launcher downloader for heavy files Updater/launcher startup times improvements Optimized RAGE UI loading