Implementing custom name tags

[hartority]

Hi! I would like to present you a script that makes nametag and hp/armor bar look like GTA:Online's ones.

 

First, we create variables to configure the tags.

const maxDistance = 25*25;
const width = 0.03;
const height = 0.0065;
const border = 0.001;
const color = [255,255,255,255];

Now disable the default name tags.

mp.nametags.enabled = false;

Next, draw our name tags.

mp.events.add('render', (nametags) => {
    const graphics = mp.game.graphics;
    const screenRes = graphics.getScreenResolution(0, 0);
	
    nametags.forEach(nametag => {
        let [player, x, y, distance] = nametag;
		
        if(distance <= maxDistance) {	   
            let scale = (distance / maxDistance);
            if(scale < 0.6) scale = 0.6;
			
            var health = player.getHealth();
            health = health < 100 ? 0 : ((health - 100) / 100);
		   
            var armour = player.getArmour() / 100;
			
            y -= scale * (0.005 * (screenRes.y / 1080));
			
            graphics.drawText(player.name.replace('_', ' '), [x, y],	
            {	
              font: 4,	
              color: color,	
              scale: [0.4, 0.4],	
              outline: true	
            });
			
            if(mp.game.player.isFreeAimingAtEntity(player.handle)) {
                let y2 = y + 0.042;
				
                if(armour > 0) {
                    let x2 = x - width / 2 - border / 2;
					
                    graphics.drawRect(x2, y2, width + border * 2, 0.0085, 0, 0, 0, 200);
                    graphics.drawRect(x2, y2, width, height, 150, 150, 150, 255);
                    graphics.drawRect(x2 - width / 2 * (1 - health), y2, width * health, height, 255, 255, 255, 200);

                    x2 = x + width / 2 + border / 2;
				   
                    graphics.drawRect(x2, y2, width + border * 2, height + border * 2, 0, 0, 0, 200);
                    graphics.drawRect(x2, y2, width, height, 41, 66, 78, 255);
                    graphics.drawRect(x2 - width / 2 * (1 - armour), y2, width * armour, height, 48, 108, 135, 200);
                }
                else {
                    graphics.drawRect(x, y2, width + border * 2, height + border * 2, 0, 0, 0, 200);
                    graphics.drawRect(x, y2, width, height, 150, 150, 150, 255);
                    graphics.drawRect(x - width / 2 * (1 - health), y2, width * health, height, 255, 255, 255, 200);
                }
            }
        }
    })
})

This script should be put in the client_packages folder and connected to index.js.

Edited July 4, 2020 by hartority
Updated drawText

[StreetGT]

Good work mate! It's great to have custom nametags

[Mcfloy]

Would love to test this, unfortunately it's for 0.2 version...

Great job tho !

[treboR]

Very cool.

 

[PhantomX]

Sorry for being a noob, how exactly do I do the last part,' This script should be put in the client_packages folder and connected to index.js. '

Your help will be much appreciated, thanks.

[heyMad]

On 5/22/2017 at 10:23 AM, Mcfloy said:

Would love to test this, unfortunately it's for 0.2 version...

Great job tho !

Hey! I solved this:

 

[Mentanding]

@rootcause can u make a nametag like SA:MP ?

[MiMIMi]

4 hours ago, Mentanding said:

@rootcause can u make a nametag like SA:MP ?

It is possible. I made exact same version as in SAMP.

[leaks]

On 6/2/2019 at 9:38 AM, Mentanding said:

@rootcause can u make a nametag like SA:MP ?

 

Here my edit!!