gluckgames / pixi-packer

Fast and flexible texture packer for PIXI.js
MIT License
40 stars 6 forks source link

Image resize problem #27

Closed nemid closed 8 years ago

nemid commented 8 years ago

When resizing a set of images with 1440x8 with scale 0.55, I got the following output:

"position": { "x": 5, "y": 0 }, "dimension": { "w": 4, "h": 792 }, "trim": { "x": 0, "y": 0, "w": 4, "h": 720 }

And the generated image also has 720px of height. So when using this as a background pattern in PIXI, I got 72 blank px at the bottom.

After some debugging, I realized that using resizeExact(scale.width, scale.height) instead of resize(scale.width, scale.height) in the image_processor.js file would generate the image as I need (with 792px of height).

So I would like to know if it would be possible to have a configuration to define which resize method is applied?

marekventur commented 8 years ago

Sorry, can you post the image that is wrong? It looks to me that the output image's size is correct with 720px height because some of it is trimmed off. PIXI should normally handle this correctly. How are you using it as a background pattern?

You can turn of trimming in the config on a group level, but you wouldn't get a nice compact spritesheet, so it's probably best to fix the problem.

nemid commented 8 years ago

The original image is this: thun_bg_000

I'm using it as a TilingSprite. When I debug the texture, it has 792 of height.

If I set the trim to false, I get this output: "position": { "x": 5, "y": 0 }, "dimension": { "w": 4, "h": 792 }

But the image generated by pixi-packer will still have 720px of height.

Using resizeExact it already generates the image with the correct height. 55% of 1440px should always return a 792px height image, right? Otherwise if I use it over other elements, I will get different results for 100 or 55 scale.

marekventur commented 8 years ago

Mh, odd. Could you provide a small zip file with a working example? I might find some time to have a look over the weekend. We've never used TilingSprites, so I don't know whether that's a part of the problem.

nemid commented 8 years ago

In my opinion the problem is not the TilingSprites, because it also happens with Sprite and MovieClip.

If you check this example Pixi-Packer-Example.zip, where I'm generating 5 scales for the source images (25, 40, 55, 75 and 100), if you check the output folder, in the images for the 40 and 55 scales, the pattern doesn't have the same height as the background image (25, 75 and 100 work fine).

The resize method used in the image_processor.js reduced the height of the pattern, and therefore when I run my application with scale 40 or 55 and apply the pattern over other graphical elements, I get different results from the rest of the scales.

marekventur commented 8 years ago

Just had a play with your files and you were absolutely right. Imagemagick seems to correct scaling parameters to match ratios which becomes a problem with sprites having an extreme ratio like this one.

I've implemented your suggested fix and wrote a test against it: https://github.com/Gamevy/pixi-packer/commit/16a542482bab6ce92f217e830b6765f4f5a9b2c1

The fix went out as v2.0.3. Thanks for your help!