🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

What is the best way to animate a circuit of bars like in The Witness?

Started by
2 comments, last by Hashbrown 5 years, 3 months ago

I have several connected bars (like a circuit). Once a bar is filled, the next one should start filling up as well. The player drags their mouse in different directions (predefined by the circuit) and fills or depletes the bar based on the direction they move the cursor. Like the The Witness:

I figured out how to fill/animate one bar in GLSL:

1) I created a quad mesh
2) Animated the red color in the fragment shader.

healthbar.jpg

...but not sure what I should do to fill several bars placed in different orientations. Or should I even use multiple quads or one single mesh that represents the circuit:

multiplebars2.jpg

 

So far I thought of two different ways but not sure if they're good ideas:

a) Each bar is a game object sharing the same mesh (quad) and shader. Also keep a record of which bar is filled and which is one is the next to fill. This one idea I'm sure I can figure out how to code.

b) A circuit is one single mesh, but I map the color animations using the uv coordinates in the frag shader? I'm not sure how to do this one.

I don't need code, but just proper guidance :) Oh and I'll share how I animated that one bar, just in case there's a better way. Thanks all! I'm only using OpenGL 4. Not using a particular engine.

 


// How I animate one bar in the frag shader
void main () {

    vec3 barColor = vec3(1.0, 0.0, 0.0);
  
	// Vertical bar
    if (uvs.x < 0.5) {
        barColor.r = 0.0;
    }

    color = vec4(barColor, 1.0);
}

 

Advertisement

It's definitely easiest to draw them all individually. I'd suggest each straight section and each junction be a separate quad, and if you're not planning on texturing them, use an element of the UV coordinates to represent distance along each section. Then you can upload a uniform variable to the shader program, specifying what proportion should be coloured in.

22 hours ago, OandO said:

It's definitely easiest to draw them all individually. I'd suggest each straight section and each junction be a separate quad, and if you're not planning on texturing them, use an element of the UV coordinates to represent distance along each section. Then you can upload a uniform variable to the shader program, specifying what proportion should be coloured in.

Hello OandO, thanks for your reply, I'm definitely going for drawing them individually :) Just wanted to know if it was a bad idea or not, thanks again.

This topic is closed to new replies.

Advertisement