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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.