So, I have been away for a long time and came back to some nice and needed updates to the engine which I was pleased to say the least, however I ran into a few issues with scaling an image element with code (there’s new pivot points and all that so the image element scaling isn’t working like it used to) I was wondering if anyone could help? PlayCanvas | HTML5 Game Engine is my editor, I have a UI element bar entity (with the script attached) Any tips or points in the right direction would be very appreciated!!
If you would allow me, I will try to examine your code
var StaminaBar = pc.createScript('staminaBar');
// Attributes
StaminaBar.attributes.add('lightEntity', { type: 'entity', title: 'Light Entity' }); // Reference to the light entity
// Initialize the stamina bar
StaminaBar.prototype.initialize = function() {
this.maxStamina = 17.5; // Maximum stamina value
this.currentStamina = this.maxStamina; // Starting stamina value
this.isLightOn = true; // Initial state of the light
this.scaleFactor = 0.05; // Rate at which stamina changes
// Set the initial scale of the stamina bar
this.updateBarScale();
// Start the update loop
this.staminaUpdateInterval = this.app.ticker.add(this.updateStamina.bind(this));
};
// Update the stamina bar scaling
StaminaBar.prototype.updateBarScale = function() {
// Set the scale based on current stamina
var scaleY = this.currentStamina / this.maxStamina; // Normalize the stamina to a scale of 0-1
this.entity.setLocalScale(1, scaleY, 1); // Scale the y-axis based on normalized stamina
// Change color based on stamina level
var color;
if (this.currentStamina > 10) {
color = new pc.Color(0, 1, 0); // Green
} else if (this.currentStamina > 5) {
color = new pc.Color(1, 0.5, 0); // Orange
} else {
color = new pc.Color(1, 0, 0); // Red
}
this.entity.element.color = color; // Change the color of the stamina bar
};
// Update the stamina based on light status
StaminaBar.prototype.updateStamina = function() {
// Check if the light entity is enabled or disabled
if (this.lightEntity.enabled) {
this.isLightOn = true;
// Decrease stamina while the light is on
this.currentStamina -= this.scaleFactor;
// Check for game over condition
if (this.currentStamina <= 0) {
this.currentStamina = 0; // Cap at 0
console.log("You lost!");
this.app.ticker.remove(this.staminaUpdateInterval); // Stop updating when the player loses
}
} else {
this.isLightOn = false;
// Increase stamina while the light is off
this.currentStamina += this.scaleFactor;
// Cap the current stamina at maximum
if (this.currentStamina > this.maxStamina) {
this.currentStamina = this.maxStamina;
}
}
// Update the scale and color of the stamina bar
this.updateBarScale();
};
// Cleanup on destroy
StaminaBar.prototype.destroy = function() {
this.app.ticker.remove(this.staminaUpdateInterval); // Remove the update loop
};
Your script appears to be extremely scattered and I dont really know whats going on, or what you are attempting to do. You have so many comments everywhere I can barely read it. I mean, ignoring the 13 blank lines and 15 lines that are only used for comments there are 44 lines of code. Yet somehow you have 29 comments, meaning that 65.9 percent of your code has comments on it. I mean, you really dont need to have comments labeling the attributes as “attributes”. This really is a situation where the more documentation you have, the the less workable it becomes. You should also remove all the blank spaces in between lines, as it just artificially increases the line count and makes things harder to find and fix because you have to scroll more to find stuff. Im not trying to insult you, I just really suggest you clean this up, and if you could tell me exactly what you are trying to do I could help you better.
1 Like
So if I am correct, the system works by decreasing from a maximum every time an entity is enabled? Easy. Just have the image size be the maximum, and have the physical size be from 1 to 0.
var StaminaBar = pc.createScript('staminaBar');
var Maxstam = 17.5;
var Curstam = 17.5;
StaminaBar.attributes.add('lightEntity', { type: 'entity', title: 'Light Entity' });
StaminaBar.prototype.initialize = function() {
StaminaBar.prototype.update = function() {
this.entity.setLocalScale(1, (Curstam / Maxstam), 1);
var thecolor;
if (Curstam > 10)
{
thecolor = new pc.Color(0, 1, 0, 1);
}
else if (Curstam > 5)
{
thecolor = new pc.Color(1, 0.5, 0, 1);
}
else
{
thecolor = new pc.Color(1, 0, 0, 1);
}
this.entity.element.color = thecolor;
};
if (this.lightEntity.enabled)
{
Curstam -= 0.05;
}
else
{
Curstam += 0.05;
};
if (Curstam <= 0)
{
Curstam = 0;
console.log("You lost!");
this.entity.disable
}
if (Curstam > Maxstam)
{
Curstam = Maxstam;
}
};
alright that script doesnt seem to work and idk why but its something like that.
1 Like
Yeah so the code is scattered (wrote at like 2am or something) the image scaling use to work the same as entity’s like boxes but a update changed it, the code you see I’m using is to decrease the bar when a entity is enabled, and increase it while it’s disabled. If it reaches 0 console.log “you lost”. So many comments are to help me remember what does what since I knew I’d forget it all today. I have a working script of it, it just won’t scale to 17.5 y and instead is a square, I just wanted the bar to fit the UI right (for reference the grey box ui is about the size the green bar should be)