• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Legacy GM HTML5 Canvas resolution on mobiles

F

Focksbot

Member
Hi - this seems like it should be a common question but I can't find many references to it from googling.

If you export a game using the HTML5 module, it will come up crisp in PC browsers but be blurry and pixellated on mobile devices. I've tried changing the size of the html canvas, and I have tried display_set_gui_size(display_get_width(), display_get_height()); but nothing seems to affect it.

I have my game set to scale to fill the device window, but I can't see that that makes any difference, because I have also tried putting the game in an iframe (ie. shrinking it) and that doesn't increase the sharpness.

I have also tried adding this into the html:

Code: 
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");

            function canvas_resize(){
            canvas.width = 1920 * window.devicePixelRatio;
            canvas.height = 1080 * window.devicePixelRatio;
            }

            window.addEventListener("orientationchange", canvas_resize);

            document.addEventListener("DOMContentLoaded", function () {
            canvas_resize();
    })
        </script>
But this makes no difference either.
 
YellowAfterlife

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
The idea in your code is correct (similar approaches: A, B), but you might need to wrap it in a JS extension so that you can call it from game side when the game itself starts.
 
F

Focksbot

Member
True Valhalla said:
The Mobility Engine fixes this issue.
Click to expand...
I've managed to fix the issue but while I'm here: does the Mobility Engine also fix issues with iOS and Safari? My next job after this is to try to work out why my HTML5 games turn into a black screen on people's iPads.

YellowAfterlife said:
The idea in your code is correct (similar approaches: A, B), but you might need to wrap it in a JS extension so that you can call it from game side when the game itself starts.
Click to expand...
Thanks hugely for this. By combining two of the solutions in that link, it's solved the problem. Just to try and multiply the number of places on the site where people can find the answer, here's what worked for me:

1: Replace the whole '<meta name="viewport" ...' line with this one:

Code: 
 <meta name="viewport" id="viewport" content="">
2: And add these lines right after the '<body>' line:

Code: 
<script type="text/javascript">
           var scale = (1/window.devicePixelRatio).toString();
           document.getElementById("viewport").setAttribute("content", "initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale+", width=device-width, user-scalable=no, minimal-ui");
       </script>
3. Add this at the bottom, before the <body> tag is closed.

Code: 
<script type="text/javascript">
  var scale = (1/window.devicePixelRatio).toString();
  window.parent.document.querySelector('meta[name="viewport"]').setAttribute("content", "initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale+", width=device-width, user-scalable=no, minimal-ui");
  document.getElementById("viewport").setAttribute("content", "initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale+", width=device-width, user-scalable=no, minimal-ui");
</script>
 
YellowAfterlife

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Focksbot said:
HTML5 games turn into a black screen on people's iPads.
Click to expand...
That sounds like a JavaScript error. Try binding an onerror listener or connect a remote debugger from Safari (much easier on OSX Safari than Windows version)

You could also try opening the page in mobile device simulation mode via developer tools in desktop Chrome/Firefox, but if it's just iPads, probably isn't that simple.
 
F

Focksbot

Member
YellowAfterlife said:
You could also try opening the page in mobile device simulation mode via developer tools in desktop Chrome/Firefox, but if it's just iPads, probably isn't that simple.
Click to expand...
Correct - have already tested it extensively in the Chrome dev tools and been unable to reproduce the error. Unfortunately I also don't have direct access to any Apple devices at the moment. I was hoping this was a common error with a common fix, but it seems like it's something more specific.

Thanks very much for the pointers.

Thank goodness I'm only handing in this project in the next few weeks as a fundamental plank of my PhD and not something important! :-D
 
rIKmAN

rIKmAN

Member
Focksbot said:
Correct - have already tested it extensively in the Chrome dev tools and been unable to reproduce the error. Unfortunately I also don't have direct access to any Apple devices at the moment. I was hoping this was a common error with a common fix, but it seems like it's something more specific.

Thanks very much for the pointers.

Thank goodness I'm only handing in this project in the next few weeks as a fundamental plank of my PhD and not something important! :-D
Click to expand...
If you can get your hands on an iPad etc to do some testing with then this guide for setting up debugging for iOS Safari from Windows 10 might come in handy as it also sounds like you don't have a Mac.

It's a bit of messing around to get it setup, but it does work.
 
True Valhalla

True Valhalla

Full-Time Developer
GMC Elder
Nocturne said:
Lol! I love your work, but can we keep the shameless advertising to a minimum? At least attempt to resolve the users issue or suggest a solution they can impliment and THEN suggest they try out your engine which does all this and more... ;)
Click to expand...
How is this any different to linking to a marketplace asset? Mobility Engine is the only product that solves the issue outright in GMS1 - no other response is more relevant than "here's the exact fix for your issue". I even helped YoYo Games implement this functionality in GMS2 so that it would be freely available to all users (OP could spend $200 to upgrade to that - oh forgive me, advertising again! ;D)
 
Last edited:
You must log in or register to reply here.
Top