I need help with creating borders for scaled game.

0 favourites
  • 4 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Hi everyone.

    I'm trying to create a solution for keeping the screen the same exact aspect ratio (for a game set to full screen-scale), no matter what the user does to the browser window size or shape, and no matter what their screen resolution.

    Here's what I've got so far:


    What I've got so far works for the most part, but it breaks when you shrink either the width or the height of the browser window to very small sizes.

    It seems to be that for some reason, at this point, the "window size" and "window height" values break. I've found mention of these returning fualty values, but I dont see that its been officilally decleaird a bug.

    Anyone got a solution?

    How about an automatic checkbox feature for "fullscreen-scaling" that automatically creates such a border and lets you set its RGB? That would be really nice. This is something MANY people will want...especialy becuase it will make developing for cross platform much easier in this regard.


  • Well, there is a full screen function in the browser object. Read the manual section on browsers. Also, you can simply go to project properties and set the property of "full screen" to scale mode. Hope this helps!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hi C2 Help,

    Unfortunately thats no help at all.

    Did you look at my file? I know about the browser object and already have my game set to full screen with scale. Thats NOT the issue! The issue is I want a black frame around my game "screen" for the purpose of keeping the amount of visual game level the same no matter how anyone stretches their browser window.

    Please take a look at the file I posted to see what I mean...and while running it, stretch your browser window to be very short and wide, or very tall and narrow to see how it doesn't work properly in those conditions.

  • I found a solution, BUT is this or is this not a bug (see my original file at the top of the thread)

    My solution was to create an invisible sprite anchored to top left and another anchored to bottom right, and then instead of using "window width" I used (bottomrightAnchor.x-topleftAnchor.x) and instead of "window height" I used (bottomrightAnchor.y-topleftAnchor.y)in my equations for width and height of the border sprites.

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