How to do sprite outline

Questions
1

Hi there,

I’m making a new thread since the other one doesn’t seem to get traction :slight_smile:

Does someone has an elegant way of doing sprite outline, with customizable thickness and color, that would work with flipbook animation and can be triggered from a message?

Lot of ask, but i feel like it would cover this for most people, and maybe even make it as a full fledged feature in the future?

Thanks in advance!

2 Likes
2

From the thread you linked there is a commented out section in the shader code;

float offset = 1.0/spriteSize.x;

Did that part not work as intended?

3

Kgoya, here’s what I would do:

  • Create a duplicate of the sprite
  • Set the duplicate’s Z value to 0.01, so it’s behind the original sprite
  • Set the scale to 1.1 (customise thickness here)
  • Set the tint to 0,0,0,1 (customise color here)

then

  • create a bit of code that makes sure that all animation messages are sent to both the sprite and the duplicate
4

The method @88.josh mentions should work in many cases. However, it will not work as expected if you have “holes” in the sprite. E.g. imagine a filled circle with a hole in the middle (e.g. a donut), then the scale of 1.1 won’t work, since you want to make outline on the inside of the hole.

In 2d, I would probably have a shader (either for the sprite, or as a postprocessing step) that samples around each pixel in NxN matrix, where N is the number of pixels you wish the outline to be.

5

Thanks all.

The thing is, i’m not familiar with shader coding.

I could try to leverage the code from the other thread, but i wouldn’t even know where to start to enable or disable the outline…

Thanks

6

Well, the link you referenced was doing exactly what I was suggesting. What’s missing there is a better way to calculate the pixel size, so that the sampling gets done correctly.