Circular progress bars with shaders?

[PandaDoomer]

Is it possible to have a circular progress bar in a zscript hud using shaders? If so, how would I go about doing it? My attempts using horizontal and vertical bars just isn't working, and I'd like to have a proper clockwise bar that actually looks right if possible anyways.

[MFG38]

Not doable to the best of my knowledge.

[phantombeta]

Not really doable with a shader (there's no way to pass inputs to material shaders without gross hacks), but it's certainly doable with the Shape2D API, though that does require using the Screen.* API instead of just ZScript HUD stuff.

[PandaDoomer]

Not really doable with a shader (there's no way to pass inputs to material shaders without gross hacks), but it's certainly doable with the Shape2D API, though that does require using the Screen.* API instead of just ZScript HUD stuff.

I've only used Shape2D once, and it was a real pain in the ass. Know of any good resources I can use, or tutorials? Thanks.

[Cherno]

Possible with a post-processing shader, where you could pass the completion % and hud-related things like hudscale and position. The rest is math.

[AFADoomer]

Here's a sample ZScript function that will do what I think you want. The DTA_Rotate texture drawing tag makes this much easier than in the past.

Code: Select all

	void DrawStatusIndicator(int x, int y, int amount, int min = 0, int max = 100, color clr = 0x0, String tex = "STATFILL")
	{
		// Calculate angle of indicator
		int angle = 90 - amount * 360 / (max - min); // Scales value to 360 degree range, subtracts from 90 to start movement clockwise from top

		// Graphic used by indicator; graphic will rotate around the centerpoint
		TextureID fill = TexMan.CheckForTexture(tex); // Fill image (half circle arc)
		if (!fill.IsValid()) { return; }

		// Draw the fill at the correct angle, with a second fill drawn for the second half of the circle
		// This uses the DTA_Clip* tags to allow clipping the part of the graphic that should 
		// remain unseen while smoothly drawing the progress indicator as it moves.

		// First half - clipped on the left side
		// If a tint color is defined, tint the image, otherwise draw it normally
		if (clr) { screen.DrawTexture (fill, true, x, y, DTA_AlphaChannel, true, DTA_FillColor, clr & 0xFFFFFF, DTA_CenterOffset, true, DTA_Rotate, clamp(angle, -90, 90), DTA_ClipLeft, x); }
		else { screen.DrawTexture (fill, true, x, y, DTA_CenterOffset, true, DTA_Rotate, clamp(angle, -90, 90), DTA_ClipLeft, x); }

		// Second half - clipped on the right side
		if (angle > 90 || angle < -90)
		{
			// If a tint color is defined, tint the image, otherwise draw it normally
			if (clr) { screen.DrawTexture (fill, true, x, y, DTA_AlphaChannel, true, DTA_FillColor, clr & 0xFFFFFF, DTA_CenterOffset, true, DTA_Rotate, angle, DTA_ClipRight, x); }
			else {  screen.DrawTexture (fill, true, x, y, DTA_CenterOffset, true, DTA_Rotate, angle, DTA_ClipRight, x); }
		}
	}

Called like this (for example). Assumes 'status' is an integer representing the current completion value with a range from 0 to 65536 and colors the status in green:

Code: Select all

DrawStatusIndicator(screen.GetWidth() / 2, screen.GetHeight() / 2, status, 0, 65536, 0x00FF00);

Parameters are:
x, y Screen coordinates of where to place center of indicator
amount Current value of the indicator
min Minimum range value of indicator (default 0)
max Maximum range value of indicator (default 100)
clr Color to tint the image (default 0: no tint, draw with the original graphic's colors)
tex Graphic to use as the indicator. Must be a half circle and be designed to rotate around the center of the image. Defaults to a graphic named 'STATFILL' (see attached sample).