I want to make some HTML5 games with a low resolution, however, when playing the game and the image is stretched, it’s all blurry. Obviously, there’s some kind of anti-aliasing enabled. Is there a way to disable it, so that the game can look sharp and pixelated, when the image is stretched?
Thanks!
Hey,the anti aliasing is not handled by gdevelop. It’s browser side !
Here is a tip if you know a little bit about web and css usage : nullsleep.tumblr.com/post/164171 … modern-web
In gdevelop, the solution might be to use pixel art without streching image : create your sprites at the right size for ingration, never stretch it !
I have also noticed that it does that with Native games. It uses Bilinear interpolation, I think. I want to find a way to disable it.
Also, using a high resolution and just upscaling the sprites isn’t a solution for me. I want the games to run at the low resolution. Besides, this will be better, when the games are being run on different computers, because different people use different resolutions.
That’s not a limitation of GDevelop but a limitation of the libraries that GDevelop uses (SFML and OpenGL for native games and pixi.js for HTML5 games).
You’ll have to think it responsive then i guess.
I’m sorry, but what is this supposed to mean?
OK it turns out each image has a setting whether smoothing should be applied or not, I just had to turn it off and it works for native games. HTML5 games still have the blurring, but from what I can see it can be disabled with that css code. How do I implement it though? Can I implement it at all?
Yes you can implement the css code in the html5 project after having exported it. But it requires you know a bit about css and what do generate Gdevelop/Pixi.js for image (sprite or other object).
But, i keep thinking this not the best option : if your game is low resolution and if let the user toggle fullscreen (or if compile it for ios/android), you’ll always have blur effect. Screens display have all antialiasing features nowaday, i’m almost sure about it at least for PC.
For example, i play a lot to 2 pixel art games nowaday : sheltered and escapist, in both game i play with my native resolution wich is 1920*1080. if i lower the resolution => blurry. I’m not discovering it, it’s a fact since flats screens came.
I’m not sure about that, none of my screens have anti-aliasing, or even if they do, it’s not that much. The image definitely doesn’t look like this:
And besides, the full screen part is easy. I just set the game’s resolution to the current screen resolution and then activate the full screen. The problem here is when playing the game in windowed mode.
So, can somebody tell me what exactly am I supposed to edit once the files are exported? Which of the many .js files specifies that anti-aliasing is used? Or should I edit the pixi.js file itself?
Hum… idk if it will work anyway if you export the game for ios/android, but only for web with css, just edit the html files generated at the export, then try to add between the and markup:
<style type="text/css">
img {
image-rendering: optimizeSpeed; /* SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
Nope. Doesn’t work. I’m not sure if pixi.js has a function for it, I guess I’ve gotta look for one?
*EDIT: I’ve located the option roundPixels in the PIXI documentation. If set to true, this will disable anti-aliasing. However, I don’t know how to incorporate it into the code. From what I understand, the .html file creates the window with
var game = new gdjs.RuntimeGame(gdjs.projectData, {});This is supposedly where I’m supposed to put it, because it’s similar to the function
new PIXI.CanvasRenderer(width, height, options)however, I’m not quite sure how to set the options. Should it be roundPixels = true or should I set every option until I get to it. Nothing seems to work though, because when I add anything to the original line of code, it doesn’t render the game at all. What do I do?
There are a lot of topic about similar ask on the web : just google somehting like “pixi.js disable blur on pixel”.
The render of your browser is the point for me : it strechs your graphics to fit the screen. What happen when you push ctrl+shift+M in fireofx and trying all responsive design ? Is it streched in lower render ? And if you just reduce manually the size of the firefox window ?
Also, on native projects, i had similar problem, but due to camera on layers… I don’t know if it works the same way on html5 platform.
I’ve tried looking for solutions to disable the anti-alias through PIXI, but most of the examples are made with only the native language in mind, which means no other external applications or scripts doing stuff, so whether those would work is yet to be seen…
because I tried what you suggested with Firefox. Oddly enough, every resolution I tried uses the filter. Even when I set it to the resolution I’m running the game in (160x144) it still has the filter on and looks even worse.
How? Why? I don’t know. And again, that code doesn’t seem to work. Did I put it at the wrong place? I put it between and , I tried putting it before and after all the scripts are loaded. Nothing. Any suggestions?
Last idea (that i’ve already talked about), the camera ? In native platform it would be THE point.
What about the camera? And what do you mean by “THE point”? What point? There is no zoom applied, if that’s what you mean.
On native platform, each time you change the window size, you have to change the zoom of camera, if not => blurry and ugly pixels !
I’m sorry of not being able to help you anymore at this point, i’m really not using HTML5 platform…
Not if you disable the smoothing for each image.
OK, I appreciate that you tried to help. Although why isn’t there anyone else responding? Is there anyone here who has experience with HTML5?! I need help on this.
(I Always disable smoothing !)
Well, I don’t know. It works for me.
Once again, I ask: IS THERE ANYONE WITH HTML5 EXPERIENCE HERE? WHY ISN’T ANYONE ELSE FINDING THIS THREAD?!
Probably because not many person here got a solution for you. The problem you are experiencing is coming from Pixi.js which is used by GDevelop under the hood. You can’t do much about it from GDevelop but using Javascript but even the Pixi.js community got trouble with anti-aliasing.
I have tried to solve the problem through using JS but no success, maybe someone else with more experience in JS-GD-Pixi could give you a solution but it may going to take some time.
Alternatively, you can ask or google the Pixi.js community since the source of the problem with anti-aliasing is there, they might have a solution somewhere hidden on the forums:
pixijs.com/