1
\$\begingroup\$

I develop 2D games using CodeBlocks (C++) with SDL2.

I can load a texture (ex. a gray square) and render it to the screen. All is fine. If I want to change the color of the square? Yes, I can do it. I can rotate too, without an issue.

But here's what I'd like to know:

I'd like to render the square border with a bevel effect. This is for displaying icons on the screen: I'd like to avoid having to load 2 images, one for the icon picture (with a transparent background) and one for the bevel; I'd like to add the bevel effect on some parts, dynamically in the program.

How can I do it?

\$\endgroup\$
  • 2
    \$\begingroup\$ To make sure this is unambiguous, could you provide an example image of your input icon, and the output you want it to look like after applying your border and bevel? Especially when there's a language barrier, or when discussing geometry & visual effects, a picture can be worth 1000 words. :) \$\endgroup\$ – DMGregory May 12 '17 at 17:27
0
\$\begingroup\$

One way to do this is to generate a signed distance of each pixel from the edge. You can then use the distance as a height. You can clamp the heights to a maximum which will give you a flat area in the middle. Valve Software published a paper that shows a clever way of generating the signed distance field using small textures, and it might work for you also.

\$\endgroup\$
0
\$\begingroup\$

Do you write your own shaders for your game? If so, your fragment shader can just modify the texel from your image, based on which edge it is closest to, and how close that is.

Here's a sample I wrote in shadertoy that does just this.

It just scales up or down the RGBA based on the edge identified as closest.

Doing it in a shader saves you from having to composite your image with a bevelling overlay.

\$\endgroup\$
  • \$\begingroup\$ SDL doesn't support shaders though. \$\endgroup\$ – Tyyppi_77 Oct 13 '17 at 20:40

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.