Make a healthbar for player in javascript


#1

ok so thnx to yseour I now know how to code alittle better and I love coding now but I have a problem I tried using a canvas to draw the shape but it didnt work so I need help adding a healthbar that appears onscreen.Thnx :smile:


#3

wait what its just a question


#4

I know im making an example project to show u how to make a healthbar ok?
For now try looking at this old script in a game im developing called kallen supremacy (helping develop):

pc.script.attribute('maxHealth', 'number', 36);
pc.script.attribute('maxMana', 'number', 4);
pc.script.attribute('barHeight', 'number', 1.77);
pc.script.attribute('remainingMaterial', 'asset', [], {
    type: 'material',
    max: 1
});
pc.script.attribute('emptyMaterial', 'asset', [], {
    type: 'material',
    max: 1
});
pc.script.attribute('remanaMaterial', 'asset', [], {
    type: 'material',
    max: 1
});

pc.script.create('Phealth', function (app) {
    // Creates a new Health instance
    var Phealth = function (entity) {
        this.entity = entity;
    };

    Phealth.prototype = {
        
        startingset: function() {
            this.stat=app.root.findByName('Top').script.player_stat;
            this.maxHealth=this.stat.hp;
            this.maxMana=this.stat.mana;
            this.currentHealth=this.maxHealth;
            this.currentMana=this.maxMana;
            this.setHealth(this.maxHealth);
            this.setMana(this.maxMana);
        },
        
        // Called once after all resources are loaded and before the first update
        initialize: function () {
            var healthBar = this.entity.findByName('Health Bar');
            var manaBar = this.entity.findByName('Mana Bar');
            if (healthBar) {
                healthBar.destroy();
            }
            if (manaBar) {
                manaBar.destroy();
            }

            this.healthBar = new pc.Entity();
            this.healthBar.setName('Health Bar');
            this.remaining = new pc.Entity();
            this.remainingBox = new pc.Entity();
            this.empty = new pc.Entity();
            this.emptyBox = new pc.Entity();
            this.manaBar = new pc.Entity();
            this.manaBar.setName('Mana Bar');
            this.remana = new pc.Entity();
            this.remanaBox = new pc.Entity();
            this.empty1 = new pc.Entity();
            this.empty1Box = new pc.Entity();

            this.entity.addChild(this.healthBar);
            this.healthBar.addChild(this.remaining);
            this.remaining.addChild(this.remainingBox);
            this.healthBar.addChild(this.empty);
            this.empty.addChild(this.emptyBox);
            
            this.entity.addChild(this.manaBar);
            this.manaBar.addChild(this.remana);
            this.remana.addChild(this.remanaBox);
            this.manaBar.addChild(this.empty1);
            this.empty1.addChild(this.empty1Box);

            this.healthBar.setLocalPosition(0, this.barHeight, 0);
            this.remaining.setLocalPosition(-0.5, 0, 0);
            this.remainingBox.setLocalPosition(0.5, 0, 0);
            this.empty.setLocalPosition(0.5, 0, 0);
            this.emptyBox.setLocalPosition(-0.5, 0, 0);
            
            this.manaBar.setLocalPosition(0, 1.7, 0);
            this.remana.setLocalPosition(-0.5, 0, 0);
            this.remanaBox.setLocalPosition(0.5, 0, 0);
            this.empty1.setLocalPosition(0.5, 0, 0);
            this.empty1Box.setLocalPosition(-0.5, 0, 0);
            this.startingset();

            app.systems.model.addComponent(this.remainingBox, {
              type: 'box',
                castShadows: false,
                castShadowsLightmap: false
            });

            app.systems.model.addComponent(this.emptyBox, {
              type: 'box',
                castShadows: false,
                castShadowsLightmap: false
            });
            
            app.systems.model.addComponent(this.remanaBox, {
              type: 'box',
                castShadows: false,
                castShadowsLightmap:false
            });

            app.systems.model.addComponent(this.empty1Box, {
              type: 'box',
                castShadows: false,
                castShadowsLightmap: false
            });

            var remainingMaterial = app.assets.getAssetById(this.remainingMaterial).resource;
            this.remainingBox.model.model.meshInstances[0].material = remainingMaterial;

            var emptyMaterial = app.assets.getAssetById(this.emptyMaterial).resource;
            this.emptyBox.model.model.meshInstances[0].material = emptyMaterial;
            
            var remanaMaterial = app.assets.getAssetById(this.remanaMaterial).resource;
            this.remanaBox.model.model.meshInstances[0].material = remanaMaterial;
            
            this.empty1Box.model.model.meshInstances[0].material = emptyMaterial;

            this.setHealth(this.maxHealth);
            this.setMana(this.maxMana);
        },

        setHealth: function (health) {
            this.currentHealth = health;
            
            if (this.currentHealth <= 0) {
                this.currentHealth = 0;
                this.entity.script.player.die();
            } else {
                
            }

            this.remaining.setLocalScale(1 * this.currentHealth / this.maxHealth, 0.1, 0.05);
            this.empty.setLocalScale(1 * (this.maxHealth - this.currentHealth) / this.maxHealth, 0.1, 0.05);
        },
        
        setMana: function (mana) {
            this.currentMana = mana;
            
            if (this.currentMana <= 0) {
                this.currentMana = 0;
                //this.entity.script.enemy.die();
            } else {
                //this.entity.script.vehicle.hit();
            }

            this.remana.setLocalScale(1 * this.currentMana / this.maxMana, 0.1, 0.05);
            this.empty1.setLocalScale(1 * (this.maxMana - this.currentMana) / this.maxMana, 0.1, 0.05);
        },

        reduce: function (amount) {
            if(this.entity.script.player.equipped.ARMOUR.type==='ARMOUR') {
                this.entity.script.player.armorAdv+=(amount/2);
                this.entity.script.player.checkAdvance('armorAdv','wArmour');
            }
            this.setHealth(this.currentHealth - amount);
        },
        
        rMana: function (amount) {
            this.setMana(this.currentMana - amount);
        },
        
        heal: function (amount) {
            this.currentHealth += amount;
            if (this.currentHealth>this.maxHealth) {
                this.currentHealth=this.maxHealth;
            }
            this.remaining.setLocalScale(1 * this.currentHealth / this.maxHealth, 0.1, 0.05);
            this.empty.setLocalScale(1 * (this.maxHealth - this.currentHealth) / this.maxHealth, 0.1, 0.05);
        },
        
        hmana: function (amount) {
            this.setMana(this.currentMana + amount);
            if (this.currentMana>this.maxMana) {
                this.currentMana=this.maxMana;
            }
            this.remana.setLocalScale(1 * this.currentMana / this.maxMana, 0.1, 0.05);
            this.empty1.setLocalScale(1 * (this.maxMana - this.currentMana) / this.maxMana, 0.1, 0.05);
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
            this.healthBar.setRotation(app.root.findByName('Camera').getRotation());
            this.healthBar.rotateLocal(90, 0, 0);
            this.manaBar.setRotation(app.root.findByName('Camera').getRotation());
            this.manaBar.rotateLocal(90, 0, 0);
            //this.healthBar.setEulerAngles(0, 0, 0);
        }
    };

    return Phealth;
});

27%20AM%20-%20Edited
This is what it could/should look like after script when u apply to the player. but u would have to edit it to fit ur fps game.


It hovers above the player but u can edit it to sit in the corner of the screen with a 2d screen


#5

btw the healthbar script doesnโ€™t work for meit just disappears when i parseit


#6

Yes i remember it is in legacy script XD i will finish the health bar tutorial today so u can use that ok?


#7

ok thnx for the script and the info even though I still am new to coding I can make a basic script