Affinity Designer: Pixelated PNG export

[Bad_Wolf]

Hi Everyone,

Can you please help me with pixelated export PNG/SVG images? I included the files here together with this post.

These are graphics for import as sprites in Construct 3, a game development environment. On the screen in Designer (v2.2.1) for Windows, everything looks good. Once exported, the export is pixelated.

I tried everything I knew of, but nothing worked.

I can remember in the past, I posted the same question and received a result. However, I cannot find that post anymore.

I would appreciate your help, and thank you in advance.

Kind Regards,

Chris

PNG_Pixelated_Problem.afdesign

[NotMyFault]

The dots are only 20px wide, so naturally you will see those pixels when you export as raster / bitmap format.

You can use the view modes (vector, pixel etc) and even dual view mode to inspect how the file would look when exported.

you need to increase resolution or export as vector format to improve. 

[Bad_Wolf]

Thank you so much for your reply, NotMyFault, I appreciate it.

I checked the resolution, and it is 300 dpi. The graphics are for a game and have to be 20 pixels wide.

I did not know you could check the export before really exporting. So, I learned something new.

I raised the resolution to 400, 1200, but the image keeps pixelated. In fact, whatever I do, everything remains pixelated.

I wish you a great day.

Kind Regards,

Chris

[lacerto]

Obsolete.

[bures]

When it comes to the screen, forget about dpi. dpi is important for printing. For the screen, the pixel dimension is important.

If you have a 20×20 px image, changing the dpi on the screen doesn't change the size of the image on the screen.

The pixel size on the screen is determined by the hardware.

When printing, the fineness of the print can be affected by the dpi of the printer. A larger dpi value will make the print finer. The digital object (given the pixel size) will then print smaller.

[Bad_Wolf]

Thank you, Lacerto and Bures,

I tried forcing anti-aliasing, even forcing it on, but it had no positive effect. The result remains the same. Even an SVG export, which should be vector, is pixelated. Even with a document and export resolution of 300 dpi, the result is terrible.

I tried it on another laptop, but the result was poor. The zoom factor is 100%, so it is not magnified. Even when I import it into C3, the pixels are visible.

I did a little bit more research without mentioning Affinity Designer in the search string and found out that it is a Google Chrome bug. Because the images are too small (20 px), Google Chrome renders them poorly. In Firefox, those 20 px images render fine. Chrome requires a minimum of 24 px; otherwise, everything gets pixelated.

Thank you all for your replies, which are highly appreciated.

I wish you all a great day!

Chris