• Editor
  • Exported GIF does not have text rendered as expected

Related Discussions
...

Hello guys,

Finally I want to get this clarified, struggling about this long time, hoping that I will figure out myself.

So... when I export GIF I get text pixelated even though text is super high quality, if I export the same gif twice as big then resize in the browser by zooming out to bring it to same size as the attached image the text will look perfect.

Same goes for editor rendering I believe, find that attached as well

Thanks in Advance.

If you aren't rendering at a size that matches the source images then it is expected that there will be some filtering artifacts. The smoothing settings in v4 provide some control over this. It used to be only nearest or linear, now it we have 5 levels of smoothing:

0: nearest (no smoothing)
1: bilinear (light)
2: bilinear (medium)
3: bilinear (normal, equivalent to linear in Spine <= 3.8)
3: bicubic (like bilinear but less square/star artifacts)

Additionally we now have a Keep edges checkbox for the viewport (not exports) that keeps the original alpha values. This allows you to use smoothing so images look nicer when zoomed it, but without losing the ability to see exactly where the edges of your images are. Without Keep edges the edges are smoothed and tend to become blurry.

How does your text look (in exports and viewport) at various levels of smoothing, or 0?

I see, I have tried all values all look pretty much the same, pixelated


I found a short solution 😃 just exporting 100% scale from spine then resize in other editors.

Image editors will need to do filtering to resize the image, likely using the same algorithms (there are only so many ways to do it). Can you show the result of the text having Spine resize versus resizing it after 100% export? If you are using color management in Spine, can you try without color management?

the filtering that spine suggest do very little change. super tiny.

left was exported with 100 scale and resized using ezgif online tool
right was exported using exact same settings just 50 scale.

smoothing level 4
Multisample 8x
Color management is disabled
.

Thanks. Last question, can you post the image with the copyright text on it?

Nate escreveu

Thanks. Last question, can you post the image with the copyright text on it?

You mean one frame of the gif? or what exactly? image exported from spine and resized with ezgif?

Not the exported image, but the image you attached in Spine that has the copyright text. I want to bring it into Spine so I can see the filtering applied firsthand. I could make my own image but then it wouldn't be comparable to yours and the result you got with ezgif.

Nate escreveu

Not the exported image, but the image you attached in Spine that has the copyright text. I want to bring it into Spine so I can see the filtering applied firsthand. I could make my own image but then it wouldn't be comparable to yours and the result you got with ezgif.

Ah it was so clear. what I as thinking 😃

Thanks. That's a pretty massive image at 3174 pixels wide. The more you scale down, generally the worse the results. With Spine's filtering, scaling down by more than 50% probably won't produce the best results, unless scaling to exactly 25%. We would need to implement more filtering for higher quality downscaling, eg area averaging or Lanczos.

I would suggest using images closer to your export size or exporting at 100% and processing the result externally. Even then, any amount of scaling is going to be suboptimal. Eg, the ezgif results are quite blurry compared with using an image with text rendered at the export size.

oh ok will just resize it 😃
thank you, sorry for taking your time on this simple thing.

Nah, your issues are our issues! We'll add a checkbox to use mipmapping which may give a you a result you are happier with.

Smoothing 4, no mipmaps:

Image removed due to the lack of support for HTTPS. | Show Anyway

Smoothing 4, with mipmaps:

Image removed due to the lack of support for HTTPS. | Show Anyway

Nice!