Image controls look blurry once resized

[AWalters15]

Hi there ,

I've just finished creating my first android app with livecode

I have been very happy with the outcome and have been very impressed with how truly cross-platform livecode is.

I am having a problem that I am unwilling to add any images / android icons to the app as they always render badly on my phone. I have imported them as a control and then used the ID to set them as a button icon.

To adapt to different screen sizes I have the code resize the image proportionally , however on PC and my phone once the resize takes place the image looks blurry and there is a huge loss in quality.

Does livecode scale images badly and is there any way around this problem as on a HD screen it is very unnatractive .

Hopefully you'll be able to help

[ChrisMukrow]

You can set resizeQuality like this:

Code: Select all

set the resizeQuality of the image "yourImage" to "normal"

Hopefully this will help,
Chris

[jacque]

Resizing bitmap images is always a problem, especially when enlarging them. You will get jagged edges and other distortions. Setting the resizeQuality may help, but it can't completely eliminate those because there just aren't enough pixels in the image to work with. The solution is to create your images at the largest size your app will need on any screen. Sometimes that's 4 times larger than what will display but I usually settle on twice as large to save disk and RAM space. Experiment to see how it looks when it is resized.

In the stack, manually resize the image to the correct viewable size (one quarter, or half, or whatever) and set the lockLoc of the image to true (you can use the property inspector.) Now when the engine resizes the image, it will have enough pixels to work with and much of the distortion is avoided.

This isn't perfect -- scaling to an odd number instead of an even number can still distort -- but it will be much better than what you are seeing now.

[AWalters15]

You can set resizeQuality like this:

Code: Select all

set the resizeQuality of the image "yourImage" to "normal"

Hopefully this will help,
Chris

Resizing bitmap images is always a problem, especially when enlarging them. You will get jagged edges and other distortions. Setting the resizeQuality may help, but it can't completely eliminate those because there just aren't enough pixels in the image to work with. The solution is to create your images at the largest size your app will need on any screen. Sometimes that's 4 times larger than what will display but I usually settle on twice as large to save disk and RAM space. Experiment to see how it looks when it is resized.

In the stack, manually resize the image to the correct viewable size (one quarter, or half, or whatever) and set the lockLoc of the image to true (you can use the property inspector.) Now when the engine resizes the image, it will have enough pixels to work with and much of the distortion is avoided.

This isn't perfect -- scaling to an odd number instead of an even number can still distort -- but it will be much better than what you are seeing now.

Great thanks , I will certainly try your suggestions.

Is there any chance that quality is lost by importing as a control and then using the id to set a button icon ?

For example , should I rather use an image control that uses a local file instead of a button

[Klaus]

Hi AWalters15,

...Is there any chance that quality is lost by importing as a control and then using the id to set a button icon ?
For example , should I rather use an image control that uses a local file instead of a button

no, they are identical (display-wise)!

Ah, and welcome to the forum!


Best

Klaus