Low res image scaling - No resample

Monkey Forums/Monkey Programming/Low res image scaling - No resample

Yahfree

(Posted 2011) [#1]

Is there a way I can scale images without blurring them? Think retro pixel art.

For example, if I had a 5x8 pixel stick figure, how do I scale that up in the program without blurring the image? (Preserving the pixel effect)

DGuy	(Posted 2011) [#2]

Not at the moment (short of modifying your targets mojo file).

Monkey tells OpenGL to use linear filtering on all loaded textures which is why things get blurry when scaled up.

matt	(Posted 2011) [#3]

I'd like to be able to switch this off, too.

DGuy	(Posted 2011) [#4]

Out of curiosity, I took a look at the HTML5 specs and it seems filtering is not configurable:

From the HTML5 Standard:

If the original image data is a bitmap image, the value painted at a point in the destination rectangle is computed by filtering the original image data. The user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor).

So probably for the sake of uniformity, particularly at this early stage, bilinear filtering is the only option.

Yahfree

(Posted 2011) [#5]

Nearest neighbor I believe preserves sharp pixels

Canardian

(Posted 2011) [#6]

Anisotropic filtering would be nicer than linear filtering, maybe a SetFilter( NONE / ANISOTROPIC / BILINEAR / TRILINEAR1-16 ) command would be nice to have.

Yahfree

(Posted 2011) [#7]

Any word on this Mark? Is it something I can do myself for all targets? or is it not possible in HTML5?

Indiepath

(Posted 2011) [#8]

It's simple on Mozilla and it's supported in CANVAS : https://developer.mozilla.org/En/CSS/Image-rendering

Not sure if it's available on Safari yet...

Yahfree

(Posted 2011) [#9]

Looks pretty straight forward in Android too: http://stackoverflow.com/questions/2517641/how-to-draw-and-scale-a-bitmap-on-a-canvas-using-bicubic-interpolation-in-android

What about iOS and Flash? Cause I'm almost sure that the others would support it

ErikT

(Posted 2011) [#10]

+1 for Setfilter functionality. Pixel gfx with bilinear filtering looks garish!

wiebow

(Posted 2013) [#11]

Any news on this? Has anyone solved this?

Halfdan

(Posted 2013) [#12]

Not sure if this does what you need

#MOJO_IMAGE_FILTERING_ENABLED="false"

prevents blurring. It doesn't work in HTML5 but I believe it was possible to hack it with some CSS.

devolonter

(Posted 2013) [#13]

You can try to use Mojo HTML5 GL patch. It includes fix for #MOJO_IMAGE_FILTERING_ENABLED support

wiebow

(Posted 2013) [#14]

Thanks for your answers, I will go check out those options!