[V51] Image scaling issue

Monkey Forums/Monkey Programming/[V51] Image scaling issue

Klin(Posted 2012) [#1]
Greetings Forum,

I found an issue with image scaling.
Once I tried to scale image with certain frame, it didn't worked properly.

OnCreate method - I loaded 4 frames image:
img_ui_button=LoadImage("image.png",1,20,4,Image.DefaultFlags )


Render method:
DrawImage(img_ui_button,20,20,0,150,1,num)


Image file:


The result:


Apparently, this bug doesn't happen in all targets or applications.
Firefox: Doesn't work
Chrome: Works
IE9: Works
iPhone: Doesn't work
Android: Doesn't work

So, is there a way to fix this issue?

Faithfully, Klin.


marksibly(Posted 2012) [#2]
Hi,

This is due to the fact that when scaling (and probably rotating) some renderers accidentally grab pixels outside of an image frame's rect, causing 'bleeding' as above.

To get consistent behavior everywhere, you'lll need to 'pad' the image frames, so that if the renderer accidentally grabs a pixel outside of the image frame rect it wont matter.

This basically means duplicating each edge of an image to the left and to the right (and top/bottom if necessary). Note that padding pixels should NOT necessarily be transparent - they should be the same as the pixels they are next to.

With your example above, adding one pixel left/right padding to each frame results in a 12x20 image, like this:



Then, you would load the image like this:

LoadImage( "exampleimage2.png",3,20,4,Image.XPadding )

(note that Image.Width will still return '1').

The rest of your code shouldn't have to change.

You might also want to take a look at the mojo_font.png in modules/mojo/data, which is also padded.