Captien 100 Report post Posted February 27, 2018 Hello Guys, Few months ago I made a simple HUD for something, but I kind of cancelled it. So I thought I can share it off with you guys. Server-side: Spoiler mp.events.add('playerJoin', (player) => { setInterval(() => { player.call('ping', [`${player.ping}`]); }, 1000); }); Client-side: Spoiler let cpt = 0; let fps = 0; let healthwidth, speedwidth; const localPlayer = mp.players.local; const graphics = mp.game.graphics; let active = false; mp.events.add('ping', _ping => { mp.players.local.ping = _ping; }); setInterval(() => { fps = cpt; cpt = 0; }, 1000); mp.events.add('Createhud', () => { mp.events.add('render', hud); active = true; }); mp.events.add("playerCommand", (command) => { const args = command.split(/[ ]+/); const commandName = args[0]; args.shift(); if (commandName === "hud") { if (!active) { mp.events.add('render', hud); active = true; }else { mp.events.remove('render', hud) active = false; }; }; }); function hud () { //FPS and Ping cpt++; graphics.drawText(`FPS: ${fps} Ping: ${mp.players.local.ping}`, [0.94, 0.065], { font: 7, color: [255, 255, 255, 185], scale: [0.5, 0.5], outline: false }); //time let {hour, minute, second} = mp.game.time.getPosixTime(0, 0, 0, 0, 0, 0); graphics.drawText(`${hour}:${minute}:${second} `, [0.96, 0.11], { font: 7, color: [255, 255, 255, 185], scale: [0.6, 0.6], outline: false }); if (localPlayer.vehicle) { //GPS graphics.drawRect(0.88, 0.68, 0.20, 0.035, 0, 0, 0, 200); let getStreet = mp.game.pathfind.getStreetNameAtCoord(localPlayer.position.x, localPlayer.position.y, localPlayer.position.z, 0, 0); let streetName = mp.game.ui.getStreetNameFromHashKey(getStreet.streetName); graphics.drawText(`${streetName} `, [0.88, 0.66], { font: 0, color: [255, 255, 255, 185], scale: [0.4, 0.4], outline: false }); // Speedo let maxs = mp.game.vehicle.getVehicleModelMaxSpeed(localPlayer.vehicle.model); let currents = localPlayer.vehicle.getSpeed(); maxs = maxs * 3.6; currents = currents * 3.6; speedwidth = (currents * 0.20 ) / maxs; if (speedwidth > 0.19) speedwidth = 0.20; let posX = 0.78 + speedwidth / 2; graphics.drawRect(0.88, 0.73, 0.20, 0.035, 0, 0, 0, 200); if (currents < maxs * 0.5) { graphics.drawRect(posX, 0.73, speedwidth, 0.033, 255, 0, 0, 190); } else { graphics.drawRect(posX, 0.73, speedwidth, 0.033, 0, 255, 0, 190); } graphics.drawText(`${(currents).toFixed(0)} km/h `, [0.88, 0.71], { font: 0, color: [255, 255, 255, 200], scale: [0.4, 0.4], outline: false }); //Health let hp = localPlayer.vehicle.getBodyHealth(); let engine = localPlayer.vehicle.getMaxHealth(); let health = Math.floor((hp/engine) * 100); healthwidth = (hp * 0.20) / 1000; let posx = 0.78 + healthwidth / 2; graphics.drawRect(0.88 , 0.78, 0.20, 0.035, 0, 0, 0, 200); graphics.drawRect(posx, 0.78, healthwidth, 0.033, 0, 255, 0, 200); if ( health > 75 ) { graphics.drawRect(posx, 0.78, healthwidth, 0.033, 0, 200, 0, 200); //green } else if (health < 75 && health > 45 ) { graphics.drawRect(posx, 0.78, healthwidth, 0.033, 255, 255, 0, 200); //yellow } else if (health < 45) { graphics.drawRect(posx, 0.78, healthwidth, 0.033, 255, 0, 0, 190); // red } if (health === 0) { localPlayer.vehicle.setEngineOn(false, true, true); } graphics.drawText(`Health: ${health}% `, [0.88, 0.76], { font: 0, color: [255, 255, 255, 185], scale: [0.4, 0.4], outline: false }); } } Interacting with the HUD: 1) a Command to toggle the HUD. (/hud). 2) a Event to create the hud. (Createhud). Call the event anywhere you want. Screens: The Icons aren't available At the Moment. (Will be fixed in later fixes) Thank you for seeing the topic. Having any problems? Post your issue in the topic.. Best Regards, Captien. Share this post Link to post Share on other sites
Flow 8 Report post Posted February 28, 2018 Awesome. Thanks for that! Share this post Link to post Share on other sites
Flow 8 Report post Posted March 2, 2018 Do you have any idea why there is no justify for text? It seems it only can be displayed centered as there is no option for justify: https://wiki.rage.mp/index.php?title=Graphics::drawText Share this post Link to post Share on other sites
Joshua 154 Report post Posted March 2, 2018 Great work man! Share this post Link to post Share on other sites
n0minal 26 Report post Posted March 4, 2018 Looks good Share this post Link to post Share on other sites