• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 Scaling a game on mobile browsers

Hi,

I have read some posts about scaling a game for different resolutions but they don't cover html5 on mobile. Our game is ready and we are polishing some final stuff. Target platform is HTML5 without WebGL and the game and the scaling works well on pc browsers. The problem comes when I open the game on mobile browser. I'm using an iPhone 6 and I know there is this 2x rendering system on iOS Safari so that it says to web page that resolution is only quarter of what it is actually. Because of this, our game looks very blurry on mobile devices and is shown in lower resolution than necessary.

The game uses rooms with size of 500 x 746 pixels. We show the whole room and scale the window down if necessary, so that it fits in a browser view. (Application surface is always 500 x 746 pixels)

How do I get the best result with mobile browsers when my game needs to be scaled down?

I have read the official blog post in http://www.yoyogames.com/blog/67 and I'm using modified version of code from there. The post doesn't speak about mobile platforms and that they give you "incorrect" browser_width values.
 
The only way I found to solve this was to write a javascript extension. You have to manipulate the size of your canvas based on the device resolution, not just the size of the screen.
 
Can't I'm afraid. My code is tied up in licensed IP. My javascript knowledge was zero, so I purchased @True Valhalla mobility engine couple of months ago. This doesn't include pixel ratio modification though - at least the latest version available doesn't, but after learning some javascript/css/html I modded the engine to take into consideration pixel ratios, along with some advert expansions and other refinements. So you may want to follow this route :) But as my code is still half IP I can't share I'm afraid. Aside from fact it cost me $130 :)

If you wanna learn javascript etc. I found codeacademy and the solo learn app very useful - both free.
 
Can't I'm afraid. My code is tied up in licensed IP. My javascript knowledge was zero, so I purchased @True Valhalla mobility engine couple of months ago. This doesn't include pixel ratio modification though - at least the latest version available doesn't, but after learning some javascript/css/html I modded the engine to take into consideration pixel ratios, along with some advert expansions and other refinements. So you may want to follow this route :) But as my code is still half IP I can't share I'm afraid. Aside from fact it cost me $130 :) If you wanna learn javascript etc. I found codeacademy and the solo learn app very useful - both free.
Thank you for the pointers. I will continue my research and hopefully find something that I can share after applying it to our game's index page.
 

True Valhalla

Full-Time Developer
GMC Elder
Can't I'm afraid. My code is tied up in licensed IP. My javascript knowledge was zero, so I purchased @True Valhalla mobility engine couple of months ago. This doesn't include pixel ratio modification though - at least the latest version available doesn't, but after learning some javascript/css/html I modded the engine to take into consideration pixel ratios, along with some advert expansions and other refinements.
The Mobility Engine is definitely overdue for an update. I have addressed this "pixel ratio" issue in version 3.0 and it will be a new feature in the next update, but I haven't had a chance to roll out the release yet. It's in development and being actively worked on, though. I also have improvements planned for the ad system. I'll try to prioritize the release for March.
 
Top