[Solved] Nearest/image smoothing

When I select “nearest” in the game properties and turn off smoothing for all images…it works great in the GDevelop preview and on chrome and Firefox. But on safari (both desktop and mobile) it remains blurry when enlarging.

I checked with the developer tools and the canvas has the “image-rendering: pixelated” applied…but it’s still not working in Safari.

Is this a known issue? Anyone else have this problem?

Wanted to put this here in case anyone else in the future is pulling their hair out trying to figure out what’s wrong:

Apparently, as of Safari 13, the “image-rendering: pixelated” (or crisp-edges) works…but NOT for images drawn on a canvas, and then that canvas is enlarged/shrunk with CSS. Which is how GDevelop changes the size. Safari will honor image-rendering:pixelated on other images in the HTML, just not within a canvas element that has been resized with CSS.

So, as far as Safari goes (including mobile Safari), this is either by design or a weird glitch. Chrome and Firefox work perfectly. As of now (December 2019), it’s a Safari glitch.

FWIW, you can resize smaller images within GDevelop using the “nearest/don’t smooth” settings, and it works as intended. So, if you’re trying to use smaller images to make your game more lightweight, you can go this route. This all started for me because I made a game at 1080x1920 and the large background images wouldn’t show up on mobile devices. Turns out mobile devices only render an image less than 3MP or 5MP (depending on how much RAM the device has). So, my large 1080x6000 background images weren’t showing up. I had to split them into smaller images and put them next to each other on the background layer. I decided I wanted to “shrink” my entire game down to 1/5 the size (216x384) to make it more lightweight and not have so many image files. Which is when I ran into the issue of Safari not resizing it properly.

Anyway, this is rambling. But I have found so much help for small problems on this forum in the past that I wanted to put this here in case anyone was as confused as I was. :slight_smile:

2048 is the largest size you can show on mobile, because mobile have their limitation.
But i didn’t recommend to people to use the maximum size.
like you said split one sprite in multiple is the best solution.

When you check the Nearest box in the game properties, all future resource imports will use Nearest mode.
However, resources already in the project will not have the Nearest mode.

But like you have seen you can check the case in resources tab for toggle the mode for each sprites.