Filipp_BSG
Member
*posting it into GMS2 subforum, but it occurs in GMS1 too*
When exporting to HTML5 and scaling the canvas (for example, as shown in YYG tutorial), it looks pixelated on mobiles even with interpolation turned on. Although, you can remove the following line from index.html:
This will remove the issue when using non-WebKit-based browsers (eg. Google Chrome 60 for Android):
However, the crispiness still occurs when using WebKit-based browsers (eg. Firefox Focus for Android):
Here is a better comparison:
It seems like the initial canvas is scaled up and then down to fit the screen (I've left the live demo user-scalable, so, you can check it by achieving the pixelation with pinch-up scaling, which even increases the effect).
You can check the live demo here: https://black-snowflake.org/scale
Or download a .gmz: https://www.dropbox.com/s/pdmmwpeyq1t1vxh/scaletest.gmz?dl=0
I've tried applying different canvas CSS properties like image-rendering: auto;, but it had no effect. Also tried inserting this JS snippet right before executing the game script:
I hope that @Mike or someone else from GMS devs or community can point out a solution. If it's a bug, I'm going to fill it, but will be very grateful if there is a JS-based solution, which can help right now, because it's urgent for me.
Best regards,
Filipp
When exporting to HTML5 and scaling the canvas (for example, as shown in YYG tutorial), it looks pixelated on mobiles even with interpolation turned on. Although, you can remove the following line from index.html:
Code:
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
However, the crispiness still occurs when using WebKit-based browsers (eg. Firefox Focus for Android):
Here is a better comparison:
It seems like the initial canvas is scaled up and then down to fit the screen (I've left the live demo user-scalable, so, you can check it by achieving the pixelation with pinch-up scaling, which even increases the effect).
You can check the live demo here: https://black-snowflake.org/scale
Or download a .gmz: https://www.dropbox.com/s/pdmmwpeyq1t1vxh/scaletest.gmz?dl=0
I've tried applying different canvas CSS properties like image-rendering: auto;, but it had no effect. Also tried inserting this JS snippet right before executing the game script:
Code:
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.mozImageSmoothingEnabled = true;
ctx.webkitImageSmoothingEnabled = true;
ctx.msImageSmoothingEnabled = true;
ctx.imageSmoothingEnabled = true;
</script>
Best regards,
Filipp
Last edited: