Sprites Jagged Lines URGENT please help

I’ve been trying to solve this for days now. I can’t figure out a solution. I’ve tried many settings in the texture, nothing is working. I just don’t have any clue of what to do. It could be UE4, it could be Adobe Flash, I just don’t know.

Here’s my jagged line problem/fills bleeding/pixelated lines:

Basically, I have a vector I made in Adobe Flash CS5.5.

I export it as PNG at a resolution of 512x512.

I import it and ensure it has:
no mipmaps
anti-aliasing mode is none in project settings
Texture Group is UI
Compression settings is UserInterface2D (RGBA)

Camera Ortho Width is 1600

I really don’t understand why this is happening. I have attached the original imported png as well as a screenshot of the original vector. I’m not sure if some anti-aliasing is happening when Flash exports the PNG or what’s happening. I’m really at loss and I would appreciate any input.

I think it has to do with the original PNG. It may need a higher resolution at export, or a setting or two fixed to correct for really thin lines. It may also require changing import settings for UE to correctly render it. When exporting, is there a background with alpha greater than 0 in the image? If so, try disabling that too, or rather, decrease the alpha to 0 (completely transparent).

Hmm, well I tried a higher resolution and it looks the same if not worse somehow. I exported at 2048x2048, which should be plenty. I scaled the sprite to .25 in the world so it was the same size as the other one. This is what it looks like in game:

2048x2048:

303565-bigingame.png

The alpha is 0 for the background. It’s 24 bit color with alpha.

I just tried exporting it with no alpha channel (white background) with the same results. I also tried exporting it in Illustrator (still as a vector in Illustrator). It only appears to be slightly better, if at all.

I saw another for someone else having similar problems thread say this:

You are not at a pixel multiple of the size of your sprite. To get ‘pixel-perfect’ sprites you need to move your camera in or out (perspective) or adjust the ortho width (orthographic) until you end up at a nice multiple.

I set my ortho width to 1536, a multiple of 512, still no no avail. I am truly stumped.

There also appears to be a “sparkly lines” effect when moving the camera or when the sprite is animated. I figured I’d mention this just in case it could point to the reason why it looks like this. Here is an example of the sparkly lines:

303555-sparklygif.gif

Is this active / enabled for the sprite?

“…right clicking on your texture in the content browser, going to “Sprite Actions”, then click on “Apply Paper 2D Texture Settings”. The texture might still look bad in the viewport, but if you play in standalone window or launch the game, your pixels should be crisp.”

Hmm, let me get back to you about this. I recall when using Inkscape for creating logos that it would occasionally happen where lines were not fully drawn, so became jagged and despite which format and resolution I exported them in. PNG is supposed to be lossless, but it’s a myth in at least one or two ways because when exporting and importing to other programs or interfaces (like a log web site), it’s interpolated / transmuted into a readable form of the original data. There’s actually more than one type of PNG, and Unreal utilizes a specific file type for imported files that I read about in the docs. I don’t know if it maintains lossless more for certain files types than others, but it probably has some bearing on quality of output if settings aren’t right or something.

24-bit is 16 million color, and makes the file size probably a bit bigger than 16-bit uncompressed, though it could be smaller. With such a simple sprite, I’m betting that the jagged lines are resulting from a loss due to conversion somewhere in the conversion ‘pipeline’. I experienced similar issues with fonts and some lines in logos I submitted to 99designs a few years ago, and those occurred whether I used PNG or JPG at 100 lossless from Inkscape. In Inkscape, it all looked smooth. So, if you could, post a screenshot of the Import / Export settings for more information. Or it might require something similar to 3D meshes in Unreal mesh settings to get a correct output.

I tried the apply paper2d Texture Settings. It didn’t appear to change anything. I mean the original imported image does look a bit jagged if you zoom in, but not THAT jagged. I think I attached the wrong original imported file above. Here is the original imported:

Sprite Settings:

Texture Settings:

Flash Export Settings: (Note: I have tried turning Smooth off. It does not appear to affect anything)

303590-flashsettings.png

Also, even changing the Ortho Width to “zoom” in on it does not appear to make it much less jagged. I attached a comparison. The In-Game side is actually bigger than the orginal on-screen (bigger than 512x512) and it’s still looks jagged and pixelated. Very odd.

Ok so quick note I just figured out that changing anti-aliasing to TemporalAA in project settings does make it a bit better, but still not perfect. I think I changed it to None after seeing to do so on a thread about making pixel-art sprites look better. For this, though, I think TemporalAA looks better.

303594-antialiasing.png

A few potential fixes (try separately, and then combined):

  1. Enable “Defer compression” (compression is processed after pretty much everything for the image)…perhaps it’s compressing the lines with thickness before they’re able to retain their initial level of detail
  2. Select a different setting than “UserInterface2D RGBA” next to the Compression Settings label
  3. Modify the Lossy Compression Amount and/or Compression Quality from Default
  4. Change “Power of Two Mode” to Power of Two (I saw this in a thread about using a program that was said to be compatible with exporting and importing to Unreal Engine, yet it was for the program’s export options…not Unreal’s import options)
  5. Change the Filter from “Nearest” to a different setting

There’s also “Force PVRTC4”, which is a different format that is utilized by graphics programs…but I’d remain wary of it for now. More of a last resort.

You, my good sir, are a lifesaver! Thank you very very much. So I changed the filter from nearest (I read on a few areas to do nearest) to Bi-Linear and not much happened they were still pretty jaggedy, BUT I turned mipmaps back on to “FromTextureGroup” and voila crispity crunch sprites. (oh and I turned the anti-aliasing from TemporalAA to MSAA in project settings. Didn’t change too much but I think it looks just a tad better) I can not thank you enough, this was very frustrating and I appreciate you helping me through it.

Apparently MSAA requires forward shading, and is the best of the options available. There’s another AA method in other engines that is supposedly better than MSAA too, but Unreal doesn’t have it. Perhaps it’ll be in Unreal Engine 5, or something better yet that doesn’t require forward shading.

I was going to suggest enabling mipmaps, but didn’t want to suggest too much in one reply. I know mipmaps are for improving quailty at certain distances, and maintaining and/or reducing details, but it’s how mipmaps work that probably has the effect of smoothing the lines of a 2D texture.