weavejester

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.