Jump to content
  • Advertisement
Hashbrown

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

Recommended Posts

Posted (edited)

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);
}

 

Edited by Hashbrown

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!