Simple Native Draw HUD

[Captien]

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.

[Flow]

Awesome. Thanks for that!

[Flow]

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

 

 

[Joshua]

Great work man!

[n0minal]

Looks good

 

[tonihenkel]

How I can intigrated the Icons ? With a CEF ?

Edited April 21, 2019 by tonihenkel