Set Canvas size Letterbox Scale / 2

0 favourites
  • 7 posts
From the Asset Store
Basic template for drawing game with masks and easy customization
  • 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!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Why would you want to do this?

  • 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.

  • 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.

  • PixelRebirth


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

  • 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.

  • PixelRebirth You're awsome, thanks a lot!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)