Filters that require a margin

[weavejester]

I've written a simple outline shader that adds a single pixel border around a sprite. It works well, except because sprite textures are commonly cropped, the outline is missing at the edges of the image. I've included a blown up image to show you what I mean. See how the border is missing at the tops of the ears and at the extremities of the limbs?

What's the common way of dealing with shaders (like outline, blur, glow, etc.) that go over the edge of a cropped texture? Is there an easy way of adding a transparent margin around a texture? Or do I need to write a vertex shader to expand the size? I'm a little new to this, so I'd be grateful to learn of any solutions people might have.

[ivan.popelyshev]

Yes, filters are difficult, there are still not enough docs on them.

Please checkout pixi.js repo (https://github.com/pixijs/pixi.js), switch to "dev" branch (its pixi v4) and look inside Filter.js , it has a padding: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/Filter.js

You can just specify filter.padding = 10; or something like that

Also, there is outline in https://github.com/pixijs/pixi-extra-filters

[weavejester]

Thanks for the tip! I notice that this is only available in v4. Would you recommend creating a build off the dev branch, or off the latest tagged RC (v4.0.0-rc2)?

I noticed the outline filter in pixi-extra-filters, but I wanted one that was pixel-perfect, rather that one that relied on a radius.

 

[ivan.popelyshev]

dev branch. We fixed a lot of stuff since rc2

[weavejester]

Any chance of another official RC? It would be nice if I could say "this project depends on Pixi v4.0.0-rc3" rather than "this project depends on Pixi commit a68ad14 from the dev branch"

[ivan.popelyshev]

May be tomorrow. Right now there is queue of ~3 PR-s that fix bugs, and authors are working on it

[weavejester]

Thanks! In the meantime I'll create an internal build for Pixi and label it with the commit number it's based off.

I very much appreciate your advice; the filter padding sounds exactly what I need.