Sign in to follow this  
Captien

Simple Native Draw HUD

Recommended Posts

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:

obvcUjZ.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.