Jump to content


Photo

Resizing HTML5 game for mobile


  • Please log in to reply
1 reply to this topic

#1 Black Sheep Games

Black Sheep Games

    GMC Member

  • GMC Member
  • 65 posts
  • Version:GM:Studio

Posted 27 November 2012 - 07:34 PM

Hello everyone,

I have a game in 800x480 resolution and I have ported it to HTML5. Can someone explain how can I use external code to resize the game automatically to fit on mobile devices in landscape mode? I tried many things but I get a "zoomed" version of the game, I need it to resize like a native android app for example, which can scale up or down according to the resolution. Any help would be MUCH appreciated, thank you!

Best regards,
  • 0

Check out our facebook page for our latest game : http://www.facebook....BlackSheepGames


#2 Osmium

Osmium

    Graphic Artist

  • GMC Member
  • 308 posts
  • Version:GM:Studio

Posted 18 January 2013 - 04:46 PM

Adjusting the screen resolution is rather easy, especially for mobile devices. Use this script here(in the step event):

//window_resize(center)
//Written by Osmium @ GMC
//Center = Type true or false to center the game in the browser(useful for tablets)
//Resize the game window according to screen resolution(optimized for landscape mode!)

var w,h,r,c;
w = room_width
h = room_height
r = w/h  //ratio of width to height (w:h)
c = argument0

//Your views must be in the in the ratio 3:2(w:h) for this to work! (eg. 960x640)
if view_enabled == true
{
 w = view_wview
 h = view_hview
 r = w/h
}

if browser_width < w
{
 w = browser_width
 h = w/r
 
 if view_enabled == true
 {
 view_wport = w 
 view_hport = h
 }
 
 window_set_size(w,h)
}

if c == true
{
var bw,bh,ww,wh;
bw = browser_width/2
bh = browser_height/2
ww = window_get_width()/2
wh = window_get_height()/2

window_set_position(bw-ww,bh-wh)
}

This script calculates the width to height ratio and allows your game to be displayed on any mobile device. It also centers the game for tablets. However, it is highly recommended to keep the game dimensions in the ratio 3:2(width:height). For example, a game of 960x640(landscape) will perfectly fit in the display of iPhone, iPad and iPod Touch.

Let me know if you need anything else. :)/>

Edited by Osmium, 18 January 2013 - 04:47 PM.

  • 1
Posted Image