soimy / atlasify

GPU friendly assets packer using max-rects algorithm
https://atlasify.nanoo.app
MIT License
31 stars 4 forks source link

Need option for preventing uneven sprite image width / height #9

Closed mnovbaalen closed 3 years ago

mnovbaalen commented 4 years ago

I use Atlasify for a project where I load the generated spritesheet in Pixi.js. When source images have an uneven value for width or height, Pixi.js renders them blurry.

It would be great if there was command line option to prevent uneven width or height, so people can prevent this behavior. This can be achieved to increase the width or height in that case.

The following code change allows to generate even width / height but does this always, and not when a commanline option is set.

Index: src/atlasify.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/atlasify.ts (date 1581610214638)
+++ src/atlasify.ts (date 1581610214638)
@@ -327,6 +327,15 @@
                 const buffer: Jimp = sheet.data;
                 // sheet.frame.x += sheet.x;
                 // sheet.frame.y += sheet.y;
+
+                // make width/height an even number (increase by 1 if necessary)
+                if (sheet.frame.width % 2 === 1) {
+                  sheet.frame.width += 1;
+                }
+                if (sheet.frame.height % 2 === 1) {
+                  sheet.frame.height += 1;
+                }
+
                 if (this.options.debug) {
                     const debugFrame = new Jimp(sheet.frame.width, sheet.frame.height, this._debugColor);
                     image.blit(debugFrame, sheet.frame.x, sheet.frame.y);
soimy commented 4 years ago

That even w/h option might collide with trimAlpha and extrude which will auto determine sprite size.

Can you make a short sample (in http://jsfiddle.net/ or similar sites) to reproduce this blurry sprite? I was wondering if it's a mipmap generation problem with the atlas being odd w/h? Or just sprite rendered not pixel snaped or roundPixel settings not enabled?

I've also reported to the Pixi.js developers.

mnovbaalen commented 4 years ago

Sorry for the late reply.

Thank you for your suggestions. I'm going to investigate my problem because I think you are right.

I think it has to do with my pixi application/renderer settings. I made a fiddle and can not reproduce the problem!

I'll share my findings when I solved this.

mnovbaalen commented 4 years ago

I can confirm that my problem was related to non-rounded pixel positions. Setting PIXI.Sprite.roundPixels = true solved my problem.

Thank you for your help!