3
\$\begingroup\$

I would like to know how to make a background like Super Hexagon managed to do: a hexagon in the middle and equally sized trapezoids.

There's a screenshot below & the here is the effect in motion.

How can this be done? Can I use a big sprite or procedural meshes?

Super Hexagon

\$\endgroup\$
5
  • \$\begingroup\$ You should include an image, because this is a game I've never heard of. Also, "How did they do it?" is not something we can necessarily answer. Asking "how do I do it?" is. \$\endgroup\$ Commented Mar 10, 2018 at 6:57
  • \$\begingroup\$ I can't upload directly so I added a link \$\endgroup\$
    – user113361
    Commented Mar 10, 2018 at 6:58
  • \$\begingroup\$ I didn't say how did they do it. I asked how can it be done \$\endgroup\$
    – user113361
    Commented Mar 10, 2018 at 6:59
  • 2
    \$\begingroup\$ I assume you don't want to clone Super Hexagon's look precisely, but rather you want techniques to do something analogous in your game. Can you tell us a bit more about how you want your game to look/behave? \$\endgroup\$
    – DMGregory
    Commented Mar 10, 2018 at 12:13
  • \$\begingroup\$ I would personally use Image Masks, to mask out parts of the image into each triangle \$\endgroup\$
    – Pow
    Commented Feb 15 at 10:03

1 Answer 1

0
\$\begingroup\$

One way to achieve the look is to use a shader that draws the stripes in each trapezoid. I would do it by defining the distance between 2 stripes and the width of brighter stripe. Then I would tile the plane that the trapezoid is in. Something like this (pseudo-glsl) :

uniform float bandWidth; // The width between 2 bright stripes
uniform float stripeWidth; // The width of 1 bright stripe
uniform vec4 bandColor;
uniform vec4 stripeColor;
void main()
{
    vec4 color = bandColor;
    vec2 texCoord = gl_TexCoord[0];
    texCoord.x = mod(texCoord.x, bandWidth);
    if (texCoord.x < stripeWidth)
    {
        color = stripeColor;
    }
    gl_FragColor = color;
}

This draws the pattern left to right in 1 trapezoid. If you rotate and repeat the trapezoid, it should make the pattern all the way around the hexagon.

You could use different values for the bandWidth and stripeWidth in different trapezoids to get some of the different patterns in the linked video. It also looks like the trapezoids alternate the bandColor to be slightly darker or lighter.

\$\endgroup\$
4
  • \$\begingroup\$ So you are saying make a plane and add this shader to it? \$\endgroup\$
    – Casanova
    Commented Mar 11, 2018 at 2:11
  • \$\begingroup\$ Not exactly. I'm saying make a trapezoid and add something like this shader to it. Then position the trapezoids around the center so they make the shape you want. \$\endgroup\$ Commented Mar 11, 2018 at 2:19
  • \$\begingroup\$ So to sum it up, make a trapezoid using the Mesh class. Then add this shader to it which will create the stripes. After that position the trapezoids around the center? \$\endgroup\$
    – Casanova
    Commented Mar 11, 2018 at 2:48
  • \$\begingroup\$ I think so. I've not used Unity before, so not sure how the Mesh class works. But that's the general idea. \$\endgroup\$ Commented Mar 11, 2018 at 3:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .