Leaderboard

NOTE: Requires RAGE:MP v1.1 Link: https://github.com/RageMpOpenSource/RAGE-Accounts I've created an Account System boilerplate (pretty close to my MySQL resource) which I wanted to focus on something you can drag and drop and begin making a server without worrying about setting up a whole login and registration system. This isn't uploaded as a resource yet until I feel like it's a bigger difference to my current mysql resource or I feel like it's a much more solid base(and a better name). This focuses on creating a promise based script so if this was to be used you should look into promises and async/await and how they're used. Would love if any NodeJS/Javascript developers wanted to look over and if they had any things that could be improved to create a pull request. You can also discuss more at our open source group which focuses on creating resources that are only open source. https://discord.gg/44ZuWWN Features Login & Registration Include error handling (taken usernames, incorrect passwords, already logged into accounts) Bcrypt Password Hashing Idle Kicker Players get kicked after 60 seconds if they're sitting on the login screen without any login attempts Server configuration 'settings' Setup a quick JSON file for you to create any global settings your server may need delayedInitilisation event example We've utilised this new 1.1 function and event which stops any accounts from joining a server while it's starting up until all promise functions have successfully resolved. The database contains an accounts table which holds ID Username Password (hashed with Bcrypt) email registration date last active (last time the account was logged in) social club social club ID position

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!

STERS!

Example penthouse: let phIntID = mp.game.interior.getInteriorAtCoords(976.636, 70.295, 115.164); let phPropList = [ "Set_Pent_Tint_Shell", "Set_Pent_Pattern_01", "Set_Pent_Spa_Bar_Open", "Set_Pent_Media_Bar_Open", "Set_Pent_Dealer", "Set_Pent_Arcade_Retro", "Set_Pent_Bar_Clutter", "Set_Pent_Clutter_01", "set_pent_bar_light_01", "set_pent_bar_party_0" ]; for (const propName of phPropList) { mp.game.interior.enableInteriorProp(phIntID, propName); mp.game.invoke("0x8D8338B92AD18ED6", phIntID, propName, 1); // _SET_INTERIOR_PROP_COLOR } mp.game.interior.refreshInterior(phIntID);

Not updated online in a discord when playing more than 1 person