Artifacts on our 2D assets

[DevTucker]

Okay, I’m really going to need some help with this artifact issue, I’ve tried every trick I’ve found online. I’ve clamped the U. I’ve clamped the V. Using point looks extremely low quality compared to the exported asset from photoshop. linear looks exactly like photoshop, but has these artifacts that are driving me nuts. We’re getting close to launching and these minor details are really bad for the look.

(https://gyazo.com/3cbb15f0a59ac77645ced0c6c45e0b55.png

You can see an example of the artifacts on the left of the ring, here: https://gyazo.com/0150e91b64fe72c9c87fd16280917784.png also on some points on the weapons and definitely anything founded, like this orb on a staff https://gyazo.com/19d34eb86c129237489e112cd74ce7e0.png

Another SS: https://gyazo.com/b24792887d041417d7fef6c1b33e8b87.png
https://gyazo.com/b24792887d041417d7fef6c1b33e8b87.png

I’m using linear because it looks so much better than point. Our textures are 256x256 in non-compressed png format. We have spritesheets that are 1024x256 which contain 4 sprite layers. The textures are loaded at runtime and given CLAMP_TO_EDGE and FILTER_LINEAR

asset.resource.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
asset.resource.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
asset.resource.magFilter = pc.FILTER_LINEAR;
asset.resource.minFilter = pc.FILTER_LINEAR;

We then take the texture and create an atlas and 4 sprites from it.

CharacterAssets.prototype.processAsset = function(texture) {
    var sprites = [];
    var atlas = new pc.TextureAtlas(); 
    atlas.frames = {}; 
    atlas.texture = texture; 
    for(var i = 0; i < (texture.width / 256); i++) {
        atlas.setFrame(i, {
            rect: new pc.Vec4(256 * i, 0, 256, 256),
            pivot: new pc.Vec2(0.5, 0.5),
            border: new pc.Vec4(0, 0, 0, 0)
        });
        
        sprites.push(new pc.Sprite(this.app.graphicsDevice, { 
            pixelsPerUnit: 100, 
            atlas: atlas, 
            frameKeys: [i],
            renderMode: pc.SPRITE_RENDERMODE_SIMPLE
        }));
    }

    return sprites;
};

I’ve tried every filtering mode available, but I haven’t found a way toget rid of those weird white lines without using NEAREST/POINT, which makes the designs look terrible.

[yaustar]

I feel like this problem has been shown on the forums before recently but can’t remember where or what was the outcome.

[Leonidas]

@yaustar you may be referring to this?

UI appears Blurry on Desktop

[Capture] Same logo in HTML as compared to the Playcanvas UI system.

[yaustar]

Yeah, that’s the one.

[yaustar]

@DevTucker is it possible to share a screen shot of the atlas?

[DevTucker]

@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

[DevTucker]

@Leonidas

@yaustar you may be referring to this?

UI appears Blurry on Desktop

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

https://playcanvas.com/editor/scene/989678

[yaustar]

Repo is private at the moment.

Thanks for the sprite sheet.

[DevTucker]

@yaustar

Repo is private at the moment.

Oops, sorry about that. It’s public now.

[yaustar]

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/

[yaustar]

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

[yaustar]

I’ve fixed up the image with GIMP on this project here as Back_4.png

https://playcanvas.com/editor/scene/989688

The image without the alpha channel looks like this now:

[KLA]

@yaustar I’m trying to figure out how you fixed the image, do you know how it’s done on Photoshop?

[yaustar]

@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.

[DevTucker]

@yaustar

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

[yaustar]

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:

[yaustar]

@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?

[dbhvk]

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!

[Leonidas]

Thanks for sharing this @dbhvk!

[yaustar]

@DevTucker Do you mind if I use the ring PNG as an example for the User Manual on how to fix this?