Jump to content

[SOLVED] Gaps appearing between scaled sprites when using shader filter (v5.3.3)


jcwilk
 Share

Recommended Posts

Hi, fairly new to pixi and very new to shaders so apologies in advance if I'm doing something very wrong, but the behavior I'm seeing very much has a "bug feel" to it so thought I'd bring it up to see if it's either a known issue with a workaround, if I'm using shaders wrong, or if I just shouldn't be using pixi for this (fingers crossed that's not the case).

Basically, I'm trying to arrange a grid of adjacent sprites with no gaps between them. These sprites are low-res (only 8px by 8px) and scaled up arbitrarily with nearest neighbor to fit a 90x90 area comfortably in the window. After combing through the forum and wikis I was able to piece this together pretty well and it seemed super reliable and straightforward once I got it working.

Then I tried to apply filters to each sprite which worked great except that a 1px gap (screen pixels not low-res game pixels) appeared between many of the tiles. Commenting out the line that applies the filter to each sprite removes the gaps so it's definitely something about rendering the filter that seems to be screwing with the positioning (or perhaps the edge pixels of the sprite).

Are filters known to ruin alignment with scaling? I tried disabling nearest neighbor so they were all blurry but there was still a sharp gap between the blurry tiles. I may very well be doing the filter very incorrectly, as I said I'm a total shader noob.

Here's a jsfiddle that demonstrates the issue: https://jsfiddle.net/jap4qurz/15/

Thanks in advance!

Edit: Turns out it was because I was hardcoding alpha to 1 in the shader, I guess some side effect of the scaling is that it adds in some transparent pixels around the edge or something? When I set the shader to respect the original alpha of the pixel then the black 1px borders went away, even though there were zero transparent pixels in the original image. Strange behavior but my problem is solved! Feel free to delete the post unless it would be useful to leave for others.

Edited by jcwilk
figured it out
Link to comment
Share on other sites

> When I set the shader to respect the original alpha of the pixel then the black 1px borders went away

Not that strange, there are many interesting artifacts coming from combinations of LINEAR filtering,premultiplied/not-premultiplied alpha and filters that dont take into account those.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...