problems with scaled blurring...

Monkey Forums/Monkey Programming/problems with scaled blurring...

MisterBull(Posted 2014) [#1]
I've already searched the forums trying to figure out a way to do away with the texture blurring [mipmapping] of each image. It seems it cant be done with Monkey for some reason...

I was going to just let it be at that until I realized that you could blatantly see the edges of certain tiled images.

Here's my current project [wip] : http://misterbull.hostkart.net/

Look at the water... each water tile is programmed to loop when it reaches the right edge of the screen (putting it back behind the left edge). I suppose it may have to do with the fact that the x position of these tiles is a floating point.

I was hoping there could be some sort of fix for this little eye-sore :P


rIKmAN(Posted 2014) [#2]
Try adding this to the top of your code...
#MOJO_IMAGE_FILTERING_ENABLED = False


Have a look at App Config Settings in the docs for more directives.


MisterBull(Posted 2014) [#3]
Nope, that doesn't seem to work. I've skimmed the docs and it said that these commands only work for certain platforms... I'm guessing html5 isn't one of them :P


MisterBull(Posted 2014) [#4]
*bump*

this is still a problem, guys. :(
is there not a solution?


darky000(Posted 2014) [#5]
I've read similar topics about your problem and was my solution before.

Are your images handled with paddings? If not, you should try adding them. iirc, the reason behind was it sometimes produces leak in rendering which the paddings prevent.


MisterBull(Posted 2014) [#6]
paddings? Is that an image editor thing or is that actually handled in the code somewhere?


MisterBull(Posted 2014) [#7]
nevermind, I figured it out via Google :P

thanks for the advise, I'll toy with it a bit ^^


darky000(Posted 2014) [#8]
It is the "flag" parameter when you do createImage or LoadImage. Try searching them on the doc

It basically includes padding in your images. Just remember to adjust your spritesheet with the changes you make though.

EDIT: Yeah do that. I have similar problems with yours before so it might be it.

Nice game btw. Reminds me of the game in family computer, balloon fight. ;)


mat(Posted 2014) [#9]
Out of interest, why isn't "#MOJO_IMAGE_FILTERING_ENABLED = False" supported on HTML5 to give sharp retro-style upscaling of images? There is an example of drawimage upscaling and the css and javascript required on this page, or is there more to it than this?


Powelly(Posted 2014) [#10]
I'm guessing that it's not supported on HTML5 because, as the page you linked to shows, there is no way to do it programmatically that works across all browsers. I assume it was best not to support it, rather than having it only work sometimes depending on what browser the player was using.

It seems the only way to have sharp (retro) pixels on all browsers is to manually pre-scale up all the images you use in an art package and use those instead of asking the browser to scale them up.


MisterBull(Posted 2014) [#11]
which would be an okay solution if you didnt want to enable the option to select different screen resolutions (which is something I kinda want to do with my project)

I suppose one possible way of using that solution would be to upscale the images to the desired maximum scale for the max res and allow the program to downscale it with the lower resolution options.

I would do that if only it didnt mean I had to rework my code entirely to fit the new high-res structure. :P


mat(Posted 2014) [#12]
Thanks Powelly, i can see that is a good argument.

I would, however, prefer it was supported and up to the programmer to decide. Personally, i'm only using HTML5 for testing purposes so there would be no problem. For others, perhaps they would be happy to live with the limitation that not all browsers will be supported (the page i linked to shows a good list of supported browsers though).

Pre-scaling the images is fine, but when catering for multiple resolutions you could end up with a fair few different image sizes to handle, plus i'm lazy :-)


DruggedBunny(Posted 2014) [#13]
I know that Google Chrome on Windows still can't do this -- it's been a reported bug for a couple of years now. Really weird that given the popularity of 'retro' graphics they apparently couldn't care less.


mat(Posted 2014) [#14]
It works ok here on Windows with Chrome (v32). You can try it here and here. I think it is just css sharp image upscaling that isn't supported.


MisterBull(Posted 2014) [#15]
Sweet, so we have a solution! Now to figure out how to apply the upscale code to your monkey project :P

I'd look into it but I'm busy working on other things atm, anybody wanna post a code snippet that would work?


impixi(Posted 2014) [#16]
Well, you could alter and wrap the JavaScript in mat's second link above:

crisp.js


crisp.monkey


But this will apply the effect to *all* images drawn onto the canvas. For an image-level solution you'd need a deeper Mojo hack.

PS: The solution doesn't work for IE11, even with the relevant CSS style extensions specified.


MisterBull(Posted 2014) [#17]
that works perfectly, thanks! :)


DruggedBunny(Posted 2014) [#18]

It works ok here on Windows with Chrome (v32)



@Mat: Whoa, finally! That second example is the one I've been trying for the last year or two -- I gave up checking a few updates ago!


DruggedBunny(Posted 2014) [#19]
Ah, no it's not -- it was this one, which still doesn't work:

http://jsfiddle.net/VAXrL/21/

I think it might be canvas vs. image scaling at play here...


mat(Posted 2014) [#20]
@DruggedBunny - Do any of the links work for you? The magic javascript is missing from the link you posted.

@impixi - Thanks! That works great! It even works in IE11 if you add "ctx.msImageSmoothingEnabled = false;".


MisterBull(Posted 2014) [#21]
I decided to re-upload my project to test the results. It works fine for me with Chrome.

here's the link again: http://misterbull.hostkart.net/

project controls:
Z or X : Elevation
Left or Right : Movement while Elevating
Space or Esc or Enter : Pause Game


impixi(Posted 2014) [#22]
@mat: Thanks. I've updated my example above. It's hard to keep track of all the vendor-specific properties and extensions.


DruggedBunny(Posted 2014) [#23]
@mat: Your links both worked for me, but mine didn't (it does show a JS section for me, though, in the lower-left quarter!). Your demo above certainly works for me as well.

(This is the bug report I was referring to, and where my link came from. However, as long as there's a way to do it, that's really cool... need to get Mark to add it if it's working across the board!)


mat(Posted 2014) [#24]
@DruggedBunny: Thanks for clearing that up. I meant the javascript section doesn't contain the code to turn off the smoothing in your link. I'm glad the other links are working though!

@Everyone: Thanks for your help in getting this working!