How to export 64x64px image to PNG without rasterizing?

[Sowffle]

Hi all,

I am currently in the process of making my first computer game as part of my university degree. I am using Affinity Designer for PC in conjunction with Unreal Engine 4 (UE4), and I am having trouble with quality loss when exporting the .afdesign file to PNG, and thus importing the PNG file into Unreal Engine 4.

I originally created my main character, "blob", as 64x64 pixels, as this is generally the size of a tile in UE4. However when exporting it to PNG the loss of quality is huge, as seen on the left of the below image.

I'm also having the same issue with the tiles and tilesets I've been working on.

To compare, I created my "blob" in 4000x4000 pixels, and scaled it down to 0.02% in UE4 (as seen on the right) and it looks exactly how I want it to look.

UE4 doesn't seem to support SVG, and JPEG doesn't support transparency.

Can anybody advise me on how to export the 64x64 file to PNG without rasterizing and losing the quality? The same goes for my tiles and tileset (the tiles are currently 128x128 but I might need them to be smaller). Many thanks

 

[lepr]

.

[Sowffle]

230x230 sounds doable.
Tiles can be any size in unreal, but for the sake of keeping loading times and such short to optimize player experience, we need the images to be as small as possible.
The game and the levels will be pretty short, so I'm sure I can get away with the sizes you've suggested.
Thank you very much for the expedient and helpful response!

I'm still curious as to why the quality drops for a 64x64 image and not the 4000x4000 scaled down to 80x80?

[lepr]

.

[Sowffle]

I'm not sure what you mean but I'll explain the process -

I created a 64x64 document, I made the blob in that document out of some shapes.

I exported that document as a PNG, put the PNG into Unreal Engine. The blob on the left is that sprite.

I then made a new document, 4000x4000. I copied the group from the first document, pasted it into the second, resized the group.

I exported the new document (4000x4000), put that PNG into Unreal. I resized the sprite to 0.02 in Unreal. That is the blob on the right.

 

I tried the same process with a 256x256 document. When exported and placed into Unreal, it has a worse quality than the 4000x4000 sprite but a better quality than the 64x64 sprite. I'm in the process of finding the smallest size it can be without losing it's quality. I'm settling around the 440x440 mark somewhere.

At this point, I'm mainly just curious as to why a smaller image rasterizes so intensely when exporting to PNG, compared to a larger image.

[lepr]

.