I feel like this problem has been shown on the forums before recently but can’t remember where or what was the outcome.
@yaustar you may be referring to this?
Yeah, that’s the one.
@DevTucker is it possible to share a screen shot of the atlas?
@yaustar The atlas is created in the code I posted, do you mean the spritesheet?
Compressed version (PlayCanvas compression? 19.1KB, never clicked compress)
Photoshop version (Non-compressed, 1,042KB)
Also the upload in the forums is scaling it, they’re both 256x1024
The ring only uses the first 256x256 frame at the moment, we haven’t put the other 3 frames to use yet.
Put one together manually
@yaustar you may be referring to this?
I don’t think this is the same issue, I can see the defects in the editor as well. Some of them I can make go away with the clamping, some I can’t. I’m also not scaling the images.
EDIT: Created a very simple repo
Repo is private at the moment.
Thanks for the sprite sheet.
Oops, sorry about that. It’s public now.
Looking at the project, I’m starting to wonder if it might be this: http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/
Yeah, that looks like it could be the issue. If we remove the alpha channel, you can see what colour the pixels are and it’s white right on the edges where you see the artifacts
I’ve fixed up the image with GIMP on this project here as Back_4.png
The image without the alpha channel looks like this now:
@yaustar I’m trying to figure out how you fixed the image, do you know how it’s done on Photoshop?
@KLA The article I linked has plugins that can used to do this better that I recommend looking at.
In this particular sprite’s case, I used GIMP, layer window, channel tab and deselected the A channel so I was only editing the RGB channels. I then filled all the transparent areas of the image with black using the paint brush and lasso with fill.
Here’s a project with two examples as you’ve asked in the Discord. The first example in the
Not_cleaned folder is an image that we haven’t attempted to modify yet so that you can have something clean to work with. The image in
Cleaned_with_a_problem is one that he has tried to resolve the issue on, but artifacts remain on the bottom left. If you don’t mind letting us know what we did from with the second example, we’d appreciate it.
Here’s the link to the project as requested: https://playcanvas.com/project/719474/overview/demoproject
Thanks in advance
Looking at the hair example, this is the issue here:
So let’s download it and get it into GIMP. Once loaded into GIMP, change to RGB mode:
Go to the channels tab here:
And toggle Alpha channel off. This means that we will only edit the other channels RGB:
If we hide the Alpha channel, you can see there the pixels that transparent on that edge are white hence the white artifact when rendering with linear filtering:
To fix this, we can use the a tool that was linked in the article called G’MIC
Or flood fill the rest of the image to black. I’m going to use the G’MIC tool (https://gmic.eu/) for GIMP as it works better for full colour images: (on Mac, you can download this version of GIMP as it has G’MIC included as default: https://www.partha.com/)
Right click on the layer and Add Layer Mask:
Select Layer’s Alpha Channel:
Open G’MIC and search for Solidify:
Default settings are fine:
It won’t look like it has changed but when you toggle the Alpha channel on and off:
Export as PNG and upload to the project:
@dbhvk You may want a look at this as well as I think you had the same issue but I never wrote up how to fix it with tools?
Yep, similar solution for Photoshop, get Solidify and SuperPNG (both free)
Solidify allows for “texture padding”
SuperPNG allows more control when exporting PNGs with alpha channels
Drop the files in your photoshop folder and then search for the Solidify Plugin in Filters.
When saving use the SuperPNG version of PNG, don’t forget to properly set the alpha channel.
Don’t want to fill the post with external links, but you can google “Flaming Pear”, “Solidify”, “Solidify Texture Padding Tutorial”, “SuperPNG tutorial”, etc and you should be good to go
The Solidify Plugins comes bundled with a bunch of other freebies, you will need to download the whole zip and only take what you need!
Thanks for sharing this @dbhvk!
@DevTucker Do you mind if I use the ring PNG as an example for the User Manual on how to fix this?
This is an old topic but it took me a while to find a good tutorial on this for photoshop.
Here’s one: Solidifying Transparent Textures - YouTube
Then you have to
Save a Copy... and select SuperPNG, if you have it installed, and select the newly created alpha channel.