0
\$\begingroup\$

I'm wondering how the progress bar in Super Hexagon was made. (see image, top left) Actually I am not very sure how to implement a progress bar at all using OpenGL ES 2 on Android, but I am asking specifically about the one used in Super Hexagon because it seems to me less straightforward / obvious than others: the bar changes its colour during game play.

I think one possibility is to use the built-in Android progress bar. I can see from some Stackoverflow questions that you can change the default blue colour to whatever you want, but I'm not sure whether you can update it during the game play.

The other possibility I can think of for implementing a progress bar is to have a small texture that starts with a scale of 0 and that you keep scaling until it reaches the maximum size, representing 100%. But this suffers from the same problem as before: you'll not be able to update the colour of the texture during run-time. It's fixed.

So what's the best way to approach this problem?

enter image description here

*I'm assuming he didn't use a particular library, although if he did, it would be interesting to know. I'm interested in a pure OpenGL ES 2 + Android solution.

\$\endgroup\$
  • \$\begingroup\$ ...it's just a solid-color rectangle, isn't it? What's so hard about drawing a solid-color rectangle? \$\endgroup\$ – Trevor Powell May 30 '14 at 12:10
1
\$\begingroup\$

Think shaders. If it's this kind of progress bar you're after just write a custom shader and have the width and colour parameterised -- you don't even need a texture image for that, just a shader writing fragment colour based on UV coords.

If you'd like a fancier progress bar with a texture image then you can use a grayscale texture and a shader which colourises the fragment based on the texture luminance and the parameters (fragment_col = texel_luminance * current_col). Then it's up to you whether you'd like the texture stretched as the progress bar width changes (e.g. by altering its UV coords) or just skip the part which is outside the bar.

To avoid if-else blocks (which are often costly on mobile GPUs) you can multiply your fragment by the result of the step function (https://www.opengl.org/sdk/docs/man/html/step.xhtml)

\$\endgroup\$
  • \$\begingroup\$ Oh wow, I can't believe I missed that. So what you're basically saying is take something like an average "Hello, OpenGL" shader that draws a rectangle of a particular colour and use that? \$\endgroup\$ – async May 30 '14 at 20:28
  • \$\begingroup\$ Pretty much. With the width and colour being uniform parameters. That's how I'd do it but I'm sure there are fifty different ways of achieving the same result (like, have a flood-fill shader one-liner and resize the quad instead of filling only a part of it, but that would require more API calls). \$\endgroup\$ – Gilead Jun 3 '14 at 14:24
  • \$\begingroup\$ Ended up implementing something along those lines. For those interested in the solution: just look online for a "Hello, OpenGL ES 2" where it shows you how to draw a rectangle. :) I'm literally using the most basic OpenGL ES 2 possible. \$\endgroup\$ – async Jun 3 '14 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.