Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Filling the browser window....without scaling.

Started by , Oct 06 2011 03:58 PM

Please log in to reply

11 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:

Back to top

#2 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

Back to top

#3 wtrbrs

GMC Member

GMC Member
37 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

Back to top

#4 pacear

GMC Member

GMC Member
35 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

Back to top

#5 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

Back to top

#6 Mike.Dailly

Evil YoYo Games Employee

Administrators
1482 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?

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

Back to top

#7 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?
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

Back to top

#8 Mike.Dailly

Evil YoYo Games Employee

Administrators
1482 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

Back to top

#9 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

Back to top

#10 rich6031

GMC Member

New Member
1 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

Back to top

#11 Boysano

GMS Pro Member

GMC Member
133 posts

Version:Unknown

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

Back to top

#12 chaz13

GMC Member

GMC Member
3822 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

Back to top

Back to HTML5

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Filling the browser window....without scaling.

0 user(s) are reading this topic

Sign In