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?

Improve this question
\$\endgroup\$
1
  • 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, 2017 at 17:27

2 Answers 2

Reset to default
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.

Improve this answer
\$\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.

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ SDL doesn't support shaders though. \$\endgroup\$
    – user35344
    Oct 13, 2017 at 20:40

You must log in to answer this question.

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