Jump to content


Filling the browser window....without scaling.


  • Please log in to reply
15 replies to this topic

#1

  • Guests

Posted 06 October 2011 - 03:58 PM

I've seen a few comments/topics around asking about changing the size of the canvas so that you can get "more" on screen, rather than scaling to FILL the screen. This is possible, but does mean you have to fiddle with views a little.

1st, create a large room. The room is the level, and as such holds the WHOLE world/area, and you are interested in displaying a section of this. Think of it as an RPG, or Farmville. You have a large area, and want to allow the user to see a bigger view into this area.

So... create a room (say) 2048x2048. and put some stuff down in there.

2. Create a default view. X:0, Y:0,W:640,H:480 for both the view in the room and the port on screen.
Then tick "Enable the use of Views" and "Visible when room starts".

3. Next, create a new object and add it to the room.
This will control the resizing of the view/canvas. Put the D&D action in for "Change full screen mode". Set the action to "fullscreen"
Next add "execute a bit of code", and add this so we can detect a change:

global.g_ScreenWidth = window_get_width();
global.g_ScreenHeight = window_get_height();

Lastly... add this code into a STEP event.

if( (global.g_ScreenWidth != window_get_width() ) || (global.g_ScreenHeight != window_get_height() ) )
{
    global.g_ScreenWidth = window_get_width();
    global.g_ScreenHeight = window_get_height();
    view_xview[0] = 0;
    view_yview[0] = 0;
    view_wview[0] =  global.g_ScreenWidth;
    view_hview[0] =  global.g_ScreenHeight;

    
    view_xport[0] = 0;
    view_yport[0] = 0;
    view_wport[0] =  global.g_ScreenWidth;
    view_hport[0] =  global.g_ScreenHeight;
}

This should resize your "play area" without actually just scaling everything to fit.

You will have to take care with the amount you draw now though!! :rolleyes:

#2 OMGCarlos

OMGCarlos

    GMC Member

  • GMC Member
  • 329 posts
  • Version:GM:HTML5

Posted 06 October 2011 - 08:10 PM

Nice! I was actually just writing up an article about this doing a similar method. That is much more elegant, but the way I had it set up was to create an empty room of 2000x2000. This will create the canvas at that size when the game loads. For some reason I can't seem to go from a small room to big without some issues, but you can easily go from a big one to a small one. By 'initializing' the canvas at that size you save yourself a lot of headache.

[edit]
Here is an a demo what it would look like! http://afoobar.com/g...windowgetheight

Edited by OMGCarlos, 07 October 2011 - 08:48 AM.

  • 0

#3 wtrbrs

wtrbrs

    GMC Member

  • GMC Member
  • 50 posts

Posted 22 May 2012 - 11:18 AM

I have used your code, it works for the objects with images. However it does not work for teksts that are in the draw event in the same room. All teksts are gone...

Do you know why and a possible solution?

Thanks,

Wouter
  • 0

#4 pacear

pacear

    GMC Member

  • GMC Member
  • 56 posts

Posted 31 May 2012 - 04:13 AM

could explain this part of the third point where I put the code Put the D&D action in for "Change full screen mode". Set the action to "fullscreen"

thanks
  • 0

#5 locohost

locohost

    GMC Member

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

Posted 12 June 2012 - 12:52 PM

This bit does not make sense to me...

This will control the resizing of the view/canvas. Put the D&D action in for "Change full screen mode". Set the action to "fullscreen"

Can someone explain this part? :smile:
  • 0

#6 Mike.Dailly

Mike.Dailly

    Evil YoYo Games Employee

  • Administrators
  • 3297 posts
  • Version:GM:Studio

Posted 13 June 2012 - 07:05 PM

This bit does not make sense to me...

This will control the resizing of the view/canvas. Put the D&D action in for "Change full screen mode". Set the action to "fullscreen"

Can someone explain this part? :smile:

Actually, you shouldn't do this now..... "proper" full screen must be set by the user using F10. Using the drag and drop "fullscreen" action will only fill the browser window, not go fullscreen.
  • 0

#7 locohost

locohost

    GMC Member

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

Posted 13 June 2012 - 07:19 PM


This bit does not make sense to me...

This will control the resizing of the view/canvas. Put the D&D action in for "Change full screen mode". Set the action to "fullscreen"

Can someone explain this part? :smile:

Actually, you shouldn't do this now..... "proper" full screen must be set by the user using F10. Using the drag and drop "fullscreen" action will only fill the browser window, not go fullscreen.


Are the browser_width and browser_height variables updated "live" as the browser is resized by the user? This might be an excellent candidate for a new "Browser Resize" event.

Edited by locohost, 13 June 2012 - 07:19 PM.

  • 0

#8 Mike.Dailly

Mike.Dailly

    Evil YoYo Games Employee

  • Administrators
  • 3297 posts
  • Version:GM:Studio

Posted 14 June 2012 - 10:39 AM

Are the browser_width and browser_height variables updated "live" as the browser is resized by the user? This might be an excellent candidate for a new "Browser Resize" event.

Yes, every frame. No... we won't add a special "resize" event, you can easily do this yourself.
  • 0

#9 locohost

locohost

    GMC Member

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

Posted 14 June 2012 - 12:48 PM


Are the browser_width and browser_height variables updated "live" as the browser is resized by the user? This might be an excellent candidate for a new "Browser Resize" event.

Yes, every frame. No... we won't add a special "resize" event, you can easily do this yourself.


Yes I can certainly keep adding 20, 30, and more conditional blocks to the Step event. Many of these Step checks make more sense as an event. Especially something so commonly needed like catching browser resize so you can reformat your HUD and so on. Can you really have too many useful event hooks built in? It makes for so much cleaner code. If I'm wrong here just say so ;)
  • 0

#10 rich6031

rich6031

    GMC Member

  • New Member
  • 4 posts
  • Version:GM:Studio

Posted 30 November 2012 - 11:03 PM

I've seen a few comments/topics around asking about changing the size of the canvas so that you can get "more" on screen, rather than scaling to FILL the screen.
...
3. Next, create a new object and add it to the room.
This will control the resizing of the view/canvas. Put the D&D action in for "Change full screen mode".


Question 1: I actually do want scaling. My room in only one size, but if the user changes the size of the browser, I can use javascript to change the size of the div around the canvas element, but the game is now too big (if I size it smaller) for the canvas size. Does any one have an example of scaling the game to fit a scaling canvas?

Question 2: Your step 3 mentions adding actions, but they don't mention what event they should be added too. Creation event or a step event like your later code?
  • 0

#11 Boysano

Boysano

    GMS Pro Member

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

Posted 05 January 2013 - 08:12 AM


Are the browser_width and browser_height variables updated "live" as the browser is resized by the user? This might be an excellent candidate for a new "Browser Resize" event.

Yes, every frame. No... we won't add a special "resize" event, you can easily do this yourself.


If it is so easy why I'm I reading this post, and do you mean it can be done in GMS? Cause if it needs to be done in Java or in HTML, etc then that defeats the point of me buying a game making package
which sorts out all the messy device / interface issues..

Anycase, if it is so easy I'd like to know how or where, so that I can do it. I like learning.
I started making HTML5 games now, after a solid year + with GM and GMS, but my 320x480px game is cut off in my iPhone's browser,
due to the browsers top url bar? Not sure which of these methods, and how to fix?

Man we really need to extend the HTML5 functions.
  • 0

#12 chaz13

chaz13

    GMC Member

  • GMC Member
  • 4212 posts
  • Version:Unknown

Posted 06 January 2013 - 10:42 PM

Can this be used to "scale" a game up for ipad effectively? And to fill the screen properly when orientation changes?

I've been trying to figure out how to do those two things for a while.

Edited by chaz13, 06 January 2013 - 10:44 PM.

  • 0

#13 Robo

Robo

    GMC Member

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

Posted 18 August 2013 - 07:09 PM

This method doesn't seem to work anymore, but;

window_set_size(browser_width, browser_height);

In the Step Event works!


Edited by Robo, 18 August 2013 - 07:12 PM.

  • 0

#14 sandiablo

sandiablo

    GMC Member

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

Posted 10 September 2014 - 12:13 AM

window_set_size(browser_width, browser_height);

 

in the Step event FTW

 

Thanks buddy!


  • 0

#15 Lemon Flavor

Lemon Flavor

    The Helpful Lemon

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

Posted 15 September 2014 - 01:07 PM

You guys might want to check out JCHTML5, it's super useful for stuff like this.

http://www.juicycraft.com/jchtml5/
  • 0

#16 Boysano

Boysano

    GMS Pro Member

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

Posted 24 September 2014 - 09:30 AM

Ok this solution is slightly off topic, but if you just want all your draw function to scale to any size filling the browser, use this script:

///scr_HTML5_Scale_Canvas(basew,baseh,w,h,isCenter)

aspect = argument0/argument1; // basew/baseh

if (argument2/aspect>argument3) // (w/aspec) > h = if browser is larger than base aspect ratio 
{
    window_set_size(argument3 * aspect, argument3); //then scale height for aspect
}
else //same size or smaller
{
    window_set_size(argument2, argument2/aspect); //then scale width for aspect
}    



//window_set_position(-155,-100);

if argument4 // isCenter
{
    window_center(); //according to GMS help file, this function should be called in an alarm[0] at least one step later than the window size change, otherwise it will not work correctly. 
}

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users