Health bar scaling problem (SOLVED)

Daniel_Phillips · August 12, 2020, 1:50pm

To deplete a health bar, i’m using:

function update(self, dt)
go.animate("#sprite", “scale.x”, go.PLAYBACK_ONCE_FORWARD, boss_health/250, go.EASING_LINEAR, 0)
end

The health bar works fine for 95% of the way, but at the final stretch, it seems to suddenly become partially transparent and it stretches in the y direction. Why is this?

sergey.lerg · August 12, 2020, 2:05pm

Not sure why it would stretch along Y, but blurry/transparent is likely because of the linear texture filtering. You can replace it with nearest filtering.

Ideally you would want a simple shader, that based on an external param would display only a portion of the surface. I’ve made one for StarClick

github.com

Lerg/starclick/blob/master/render/healthbar.fp

uniform lowp vec4 params;

varying mediump vec2 var_texcoord0;
uniform mediump vec4 time;

void main() {
	float ratio = params.x;
	vec3 color_good = vec3(0.0, 1.0, 0.0);
	vec3 color_bad = vec3(1.0, 0.0, 0.0);

	float alpha = 0.8;
	if (var_texcoord0.x < ratio) {
		gl_FragColor = vec4(color_good, alpha);
	} else {
		gl_FragColor = vec4(color_bad, alpha);
	}
}

Daniel_Phillips · August 12, 2020, 2:17pm

Here is what happens (ignore the background change):

Pawel · August 12, 2020, 3:50pm

If it’s a part of your user interface, why don’t you want to try to make it in gui? There is a clipping possibility (or you can use your approach as well, but even with 9 sliced images) and it is very convenient to make health bars

sergey.lerg · August 12, 2020, 4:02pm

And go.animate() shouldn’t be called inside update() function, it should be called only once when the health value is changed, but in your example you are calling it on every frame. Somehow that can mess things up.
Move it into on_message() function for instance and do msg.post() when a hit happens.

Daniel_Phillips · August 12, 2020, 5:46pm

I tried this and it yielded the same results. I think this is a glitch…

britzl · August 12, 2020, 6:22pm

Can you provide a small sample project with just the health bar which shows the problem?

Daniel_Phillips · August 13, 2020, 9:06am

I have no clue how to share projects, so here is the health bar, centred on one side, so you can replicate the problem. First make the stuff from linear to nearest in graphics. Scale it manually in the x direction, maybe around 0.01 and see what happens when it is run.

Mathias_Westerdahl · August 13, 2020, 9:22am

Zip the project folder, but don’t include the build or .git folders.

Daniel_Phillips · August 13, 2020, 10:49am

Testing.zip (17.1 KB)

Compare main.collection and the screen when it is run. Compare the game object scaled 1 and 0.01 in the x direction. You may have to squint.

britzl · August 14, 2020, 6:52am

Yes, I see it as well. The solution in your case is to use a custom texture profile and disable mipmaps : Texture profiles in Defold

Two other solutions:

Use a GUI box node for the health bar.
Have the health bar graphics as a 1 pixel wide image and scale UP instead of down as you do now.

Pkeod · August 14, 2020, 7:24am

Instead of stretching a texture another option is to clip the XP bar by another node. Then you can have the clipped texture have special detail over it as well. There should be an example in this project

Another thing we commonly do in our games is to use 9patch for progress bars which repeat horizontally. You set a texture to 9 patch and then only set the first value to be whatever the width of the small base texture is. Then you can size that node to however wide you need and it will look nice.

Daniel_Phillips · August 14, 2020, 9:42am

I scaled it upwards since that seemed like the easiest option and it worked beautifully. Thanks everyone, though I still don’t know why it behaved like it did.