Filters that require a margin

Recommended Posts

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.

Screen Shot 2016-06-10 at 15.38.06.png

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.