Set Canvas size Letterbox Scale / 2

Get help using Construct 2

Post » Fri Nov 15, 2013 4:56 pm

Hey guys,

Is there a way to set canvas size letterbox scale / 2 ?

I know how to use set canvas size action but I don't know how to set width and height with letterbox scale/ 2 .

Can you help me, please. Thanks!
Image
B
58
S
25
G
39
Posts: 449
Reputation: 23,723

Post » Fri Nov 15, 2013 5:04 pm

Why would you want to do this?
Scirra Founder
B
387
S
230
G
87
Posts: 24,248
Reputation: 192,228

Post » Fri Nov 15, 2013 5:19 pm

Hey @Ashley

I make games for mobile browsers as you know some browsers are really bad on mobile. I want to add an option, when game runs slowly players can select this option that made canvas size : letterbox scale / 2 for higher fps.

I set canvas Widht: Browser.ScreenWidth/2, Height: Browser.ScreenHeight/2.

But it is not actually what I want.

Image
B
58
S
25
G
39
Posts: 449
Reputation: 23,723

Post » Fri Nov 15, 2013 5:43 pm

If you want to resize your canvas at runtime it's better (in my experience of course)to not use any fullscreen mode, but turn it off and use your own events instead.

Use some simple math to find the layout scale (window.innerWidth / native width and then check if the height still fits with that scale, if not base it on the height), set it, and then also set the canvas size accordingly right after that.

Since Browser.ScreenWidth/Height returns the user's desktop resolution, I use Browser.ExecJS("window.innerWidth") and "window.innerHeight" instead, which gives the correct results.
B
22
S
6
G
10
Posts: 1,034
Reputation: 7,514

Post » Sat Nov 16, 2013 10:09 am

@PixelRebirth

Thanks!

I am trying it but I can't catch the ratio, do you have an example or a formula ?


Image
B
58
S
25
G
39
Posts: 449
Reputation: 23,723

Post » Sat Nov 16, 2013 12:53 pm

Let's say your game got a native width of 640 and height of 480 pixels.

Now make an event that sets the layout scale to Browser.ExecJS("window.innerWidth")/640. In a subevent you should check if LayoutScale*480 is greater than Browser.ExecJS("window.innerHeight") and set the scale to Browser.ExecJS("window.innerHeight")/480 instead.

This measure prevents parts of the layout from being cut off because there isn't enough vertical space available.

Now you need to set the canvas size to 640*LayoutScale in width and 480*LayoutScale in height.

The result should be basically the same as if you had letterbox fullscreen enabled. In preview it will add the border for non fullscreen projects that will mess it up a little.

Of course now you can make an event that sets it to half that size easily or control it in any other way. This can also be useful if you licensed a game and you are asked to add dynamic resizing to your game as part of the API implementation.PixelRebirth2013-11-16 12:55:29
B
22
S
6
G
10
Posts: 1,034
Reputation: 7,514

Post » Sun Nov 17, 2013 4:05 pm

@PixelRebirth You're awsome, thanks a lot!
Image
B
58
S
25
G
39
Posts: 449
Reputation: 23,723


Return to How do I....?

Who is online

Users browsing this forum: Darth Crusher and 5 guests