Texture packer blurring sheet

Solar2D General Questions/Discussion
#1

Hi guys,

I am using Code And Web Texture Packer.

I packed hundreds of sheets so far.

Sometimes sheets are blurred (see attached photo) when played in Corona Simulator - see character in RECTANGLE on the LEFT SIDE.

Sheets are NOT blurred when played in Texture packer.

When I change sprite frames sizes sheet is NOT blurred (it is normal).

I am using MaxRects, and 2048x2048 as a Max size… always the same settings basically.

Any idea why is this happening?

Many thanks!

Ivan

#2

Are you displaying the images at their native resolution or scaling them?  If you scale an image it will become blurry.

If you want help identifying the issue, make us a sample that demonstrates the problem, zip it up, and share it by dropbox or other.

We can’t give great feedback without seeing the problem, assets, files, et al.

Be sure to include your texture packer save too.

-Ed

#3

Hi Ed,

No scaling, native…

I will do that tomorrow… I am kind of DUI with Pisco :slight_smile:

It is 23:29 PM here and I am going in a club :slight_smile:

Thanks a lot!
Ivan :slight_smile:

#4

If you’re not clear on what I mean by ‘native resolution’, let me explain by way of example.

Assumptions

  • Original image is 100 x 100 PNG.
  • Packed into sheet with ‘Texture Packer’ and produced only a 1X sheet.
  • The image in the sheet will have been processed by Texture Packer, but it should be the same or very close to the same as the original and still be 100 x 100.

Scenario 1

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of 100 x 100
  • Played on actual iPhone 1 device (320 x 480 resolution).
  • Result: The image is being displayed at ‘native resolution’ and should be (nearly) indistinguishable from original image.
    • Note:  There will always be a small variance because iPhone screens use a different display technology than most monitors.

Scenario 2

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of 50 x 50
  • Played on actual iPhone 4 device (640 x 960 resolution). (Scale == 2x)
  • Result:  The image is being displayed at ’ native resolution’ (100 x 100 real pixels) and should be (nearly) indistinguishable from original.

Scenario 3

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of  50 x 50
  • Played on actual Nexus 7 device (1920 x 1200 resolution).  (Scale == 3.75)
  • Result:  The image is being displayed at ’ NON - native resolution’ (188 x 188 real pixels).  Image will be blurred due to upscaling.

Displaying In the Simulator

You may also be worrying over nothing because you are assuming what you see on the simulator is what you will get on device.  This is not the case.  The simulator has a number of factors that may affect the visual accuracy:

  • Possible non-integer multiple for scaling.  (Staff can confirm or deny this, but I think some scaling is nearest fit when simulating.
  • Video Card Driver. 
  • Other…

The point is, don’t believe what you see.  It often looks much better on device.  In fact, always test on device to confirm any results of any question.  

Developing in the simulator is awesome and fast, but no substitute for testing on device.

#5

@all,

I may have used the term ‘native resolution’, when a better or more appropriate term should be used.  If anyone knows a better term, please post it here.  I want my response (above) to be as accurate and helpful as possible.  

#6

Hi Ed,

Please find attached Corona test.zip file, and give it a try…

I should called this “blended” , instead of “blurred”… you will see why.

For now I am testing only in WIN Corona Simulator… maybe I am worrying over nothing as you said… but I am interested why is this happening.

Many other sheets are displaying correctly…

Many thanks  :slight_smile:

Ivan

#7

I’m looking now, but you didn’t leave the original images.  You left the TPS file, but I was hoping to see the original images too.  Sorry I wasn’t clear enough.

#8

Is the 4X image your original?  If so, you’re downscaling 1X image quite a lot so some of the blur will come from that process.

Still looking.

#9

I think these are the issues:

  1. You are using 320 x 480 as your content scale which is too darn small for any modern device.  

  2. You’re down scaling your 1x images twice which really reduces the quality of the image.

  3. You’re relying on Texture Packer to do this work.  Texture packer is a GREAT tool, but in some cases, you’re probably better off down-scaling the images with Photoshop.  Texture packer does this for convenience and does it well.  Photoshop is a tool dedicated to photo-manipulation. 

  4. You are (in my opinion) unnecessarily using three scales 1x, 2x, 4x.  

Suggestions:

  1. Use a minimum of 640 x 960 and preferably iPhone 6 resolution as your base content scale.

  2. Do not use three scales, use two.  This way your image only gets down scaled once.  As long as your texture sheets are 2048x2048 or smaller you’ll be fine on old hardware that is still in use.

  3. If you only have two sizes, then still use texture packer.  If NOT, then grab the 4X sheet generated by texture packer.  Downscale it using Photoshop (using the best scaling settings you can) and save over the 1X sheet.  Be sure to downscale by the right amount.

For comparison, here are some images (annotated):

Your 1x image sheet (see the artifacts?  These are from the downscaling process):

char1.png

Your 4x image sheet (original size of images)   

char1%404x.png

These are your original images shown side by side (notice how the 1x image has artifacts)

fromSheets.png

Finally, These are screenshots of your actual images in use (Windows 10 running on Simulated devices):

screenshots.png

#10

I private messaged  you.  Please respond to help me clarify the question asked.

Thanks,

Ed

#11

We PM’d and I promised I’d send some code to help you.

If you decide to continue using 320x480 and 1,2,4x images for the current game, you can simply modify your config.lua file to force the ‘usual default’ to be 2x

Try this change to your config.lua file.

 imageSuffix = { ["@2x"] = 1.5/2, ["@4x"] = 3.0/2, },
#12

Thanks Ed, amazing!

#13

Are you displaying the images at their native resolution or scaling them?  If you scale an image it will become blurry.

If you want help identifying the issue, make us a sample that demonstrates the problem, zip it up, and share it by dropbox or other.

We can’t give great feedback without seeing the problem, assets, files, et al.

Be sure to include your texture packer save too.

-Ed

#14

Hi Ed,

No scaling, native…

I will do that tomorrow… I am kind of DUI with Pisco :slight_smile:

It is 23:29 PM here and I am going in a club :slight_smile:

Thanks a lot!
Ivan :slight_smile:

#15

If you’re not clear on what I mean by ‘native resolution’, let me explain by way of example.

Assumptions

  • Original image is 100 x 100 PNG.
  • Packed into sheet with ‘Texture Packer’ and produced only a 1X sheet.
  • The image in the sheet will have been processed by Texture Packer, but it should be the same or very close to the same as the original and still be 100 x 100.

Scenario 1

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of 100 x 100
  • Played on actual iPhone 1 device (320 x 480 resolution).
  • Result: The image is being displayed at ‘native resolution’ and should be (nearly) indistinguishable from original image.
    • Note:  There will always be a small variance because iPhone screens use a different display technology than most monitors.

Scenario 2

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of 50 x 50
  • Played on actual iPhone 4 device (640 x 960 resolution). (Scale == 2x)
  • Result:  The image is being displayed at ’ native resolution’ (100 x 100 real pixels) and should be (nearly) indistinguishable from original.

Scenario 3

  • config.lua scale is set to 320x480 letterbox.
  • Image is displayed using newImageRect() with a size of  50 x 50
  • Played on actual Nexus 7 device (1920 x 1200 resolution).  (Scale == 3.75)
  • Result:  The image is being displayed at ’ NON - native resolution’ (188 x 188 real pixels).  Image will be blurred due to upscaling.

Displaying In the Simulator

You may also be worrying over nothing because you are assuming what you see on the simulator is what you will get on device.  This is not the case.  The simulator has a number of factors that may affect the visual accuracy:

  • Possible non-integer multiple for scaling.  (Staff can confirm or deny this, but I think some scaling is nearest fit when simulating.
  • Video Card Driver. 
  • Other…

The point is, don’t believe what you see.  It often looks much better on device.  In fact, always test on device to confirm any results of any question.  

Developing in the simulator is awesome and fast, but no substitute for testing on device.

#16

@all,

I may have used the term ‘native resolution’, when a better or more appropriate term should be used.  If anyone knows a better term, please post it here.  I want my response (above) to be as accurate and helpful as possible.  

#17

Hi Ed,

Please find attached Corona test.zip file, and give it a try…

I should called this “blended” , instead of “blurred”… you will see why.

For now I am testing only in WIN Corona Simulator… maybe I am worrying over nothing as you said… but I am interested why is this happening.

Many other sheets are displaying correctly…

Many thanks  :slight_smile:

Ivan

#18

I’m looking now, but you didn’t leave the original images.  You left the TPS file, but I was hoping to see the original images too.  Sorry I wasn’t clear enough.

#19

Is the 4X image your original?  If so, you’re downscaling 1X image quite a lot so some of the blur will come from that process.

Still looking.

#20

I think these are the issues:

  1. You are using 320 x 480 as your content scale which is too darn small for any modern device.  

  2. You’re down scaling your 1x images twice which really reduces the quality of the image.

  3. You’re relying on Texture Packer to do this work.  Texture packer is a GREAT tool, but in some cases, you’re probably better off down-scaling the images with Photoshop.  Texture packer does this for convenience and does it well.  Photoshop is a tool dedicated to photo-manipulation. 

  4. You are (in my opinion) unnecessarily using three scales 1x, 2x, 4x.  

Suggestions:

  1. Use a minimum of 640 x 960 and preferably iPhone 6 resolution as your base content scale.

  2. Do not use three scales, use two.  This way your image only gets down scaled once.  As long as your texture sheets are 2048x2048 or smaller you’ll be fine on old hardware that is still in use.

  3. If you only have two sizes, then still use texture packer.  If NOT, then grab the 4X sheet generated by texture packer.  Downscale it using Photoshop (using the best scaling settings you can) and save over the 1X sheet.  Be sure to downscale by the right amount.

For comparison, here are some images (annotated):

Your 1x image sheet (see the artifacts?  These are from the downscaling process):

char1.png

Your 4x image sheet (original size of images)   

char1%404x.png

These are your original images shown side by side (notice how the 1x image has artifacts)

fromSheets.png

Finally, These are screenshots of your actual images in use (Windows 10 running on Simulated devices):

screenshots.png