Make HTML5 Games Responsive to Browser Window + Maintain Aspect Ratio (Easy)

Richard Sneyd

  • *
  • Posts: 187
I recently wrote a javascript to make HTML5 exported games responsive to the browser window. This means that it will adjust to fit onto the screen for Mobile and Desktop, whatever the screen dimensions, so you can avoid clipping on lower resolution devices, for instance. To use it:
  • Just download the attached file, called responsive.js
  • Build your game for HTML5, then extract the contents of the generated zip file
  • Copy and paste responsive.js into the parent directory, beside index.html
  • Open index.html, and find the closing body tag, it looks like this:
    Quote
    </body>
    . Then, insert this line just before it, so it looks like this:
    Quote
    <script type="text/javascript" src="responsive.js"></script>
    </body>
  • Save your changes, and open the index file in your browser (may have to use localhost, opening in Firefox directly seems to work fine though). Try resizing the browser window to see the effect, you should see the game canvas (window) scaling up and down, while maintaining the original aspect ratio, so that it is never being clipped horizontally or vertically. 

Enjoy!

LIBERADO

  • *
  • Posts: 2602
This is really useful. Thanks a lot for sharing it.
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.


RulezTeam

  • *
  • Posts: 296
Thank you Richard. That's what I need.
I'll test asap

Donni11

  • *
  • Posts: 2182
Wow, really useful!
Peace

LIBERADO

  • *
  • Posts: 2602
Maybe this interenting feature could be implemented in Stencyl as an option in Game Settings > Web
I have made this suggestion in the Issue Tracker: http://community.stencyl.com/index.php?issue=630.0

« Last Edit: October 20, 2016, 10:25:16 am by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

letmethink

  • *
  • Posts: 2547
Does this do the same as this or is it different?
Quote
Add this to the openfl settings (settings > advanced > openfl settings)

<window resizable="true" if="html5" />
~Letmethink

LIBERADO

  • *
  • Posts: 2602
@letmethink yes, it seems to work the same way. Thank you so much.
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

gurigraphics

  • Posts: 688
Quote
Does this do the same as this or is it different?

The difference is that only resize the game if the screen is smaller, but does not expand if there is more space available.

It can be useful for those seeking responsive with a maximum game screen size.




LIBERADO

  • *
  • Posts: 2602
@letmethink, do you know what code we should add to get the game canvas to be scaled (instead of being cropped) to fit a specific pixels width and height?

For example, for HTML5 games, if we want the game canvas to be scaled (not cropped) to fit 720x480 pixels, what code should we add to "settings > advanced > openfl settings"?

« Last Edit: October 23, 2016, 01:51:13 am by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

Richard Sneyd

  • *
  • Posts: 187
Quote
The difference is that only resize the game if the screen is smaller, but does not expand if there is more space available.

It can be useful for those seeking responsive with a maximum game screen size.

Correct :)