Integer Scale Outer Workaround?

0 favourites
  • 1 posts
  • Intro

    So I've always wished that there was an integer scale outer option for the fullscreen mode. I think I might have figured out a simple work-around.

    The purpose is to keep integer scales to avoid warping pixel art but also filling the entire space, aka no black bars. If you aren't familiar, see the defining the issue section at the end.

    But I think there are a lot of people that have been trying to solve this issue. Google searching it has come up with several forum posts on this topic and feature requests. From the forum responses, it doesn't seem people have had much success figuring out work arounds for this.

    Experimenting with things, I think I just found an easy solution to this. I am still thinking it through and working out all the details, but wanted to post here to share and see if anyone can think of side-effects or issues this setup might cause. So feel free to call anything out or ask any questions. I'll be trying to work out the details and test this over the next week or two.

    Workaround

    So far, it seems pretty simple:

    • Set viewport size to 1920x1080
    • Set Fullscreen mode to Scale Inner
    • Adjust zoom (layout scale; probably dynamically in events)

    Essentially the viewport size is set to the largest possible size* so there is no scaling. Therefore, the integer scale is preserved. The scale inner setting will never have black bars.

    If you do step 1 and 2 then preview your game, you will notice your game is probably zoomed out, depending what your viewport size was previously. So now all you need to do is zoom back in. I'm thinking this could be done in events based on actual viewport size, but I'll have to do some more testing.

    When I test it out, my game seems to keep it's pixel perfectness at any integer zoom level. It might actually zoom out more cleanly as well, since scale of 1 in this setup is subjectively "zoomed out" for my game.

    Defining the issue

    Before I had a viewport size of 640x360 with Letterbox Integer Scale. The Letterbox Integer Scale kept pixel perfectness and if fullscreen the game would scale 3x (640 x 3 = 1920). But if it wasn't full screen, there would be black bars (unless window was exactly 640x360 or 1280x720). So I switched to Scale Outer.

    Scale Outer would fill all the space so no black bars. But lets say the layout was 1920x1000, the game would scale up only 2.77777x (1000 / 360 = 2.7777..). This would fill the height and then show extra space horizontally. But of course the non-integer scale would distort pixel art.

    Example of distorted pixel art:

    It doesn't always "distort" in the same way:

    Same art not distorted:

    In the past I have seen the response to simply choose a resolution that scales evenly into 1920x1080. But now, ultra-wide and over-sized monitors* are becoming more popular and phones resolutions are all over the place. Meaning there is no way to pick one resolution that scales evenly into all devices.

    As I mentioned Integer Scale Outer - it doesn't exist but has been requested. The proposed resolution, to use the example above, would take the 1920x1000 viewport and scale up 2x and then fill the extra space. The 2x comes from 1000 / 360 = 2.777 rounded down to the nearest integer. This would keep pixel perfect and fill all the space - no workarounds needed. But of course it is not a current option.

    *Over-sized & Ultra-wide monitors: my workaround wouldn't solve for this, I don't believe. I don't have a larger monitor, so can't really test, but I'd think I could just make the viewport size even larger to accommodate these resolutions. I might end up doing that, but since I can only test myself at 1920x1080, for now, I'll test this out to see if any other issues or drawbacks.

    Conclusion

    Sorry for the length but wanted to explain all the details for anyone new to this topic. Especially if this is a good workaround, that way when someone is searching for an answer they can get all the details here.

    Like I said, I just came up with this so it isn't a proven solution. Feel free to call out anything as I am looking for a long-term solution.

    TL;DR

    Look at the bullet points, as they are steps to fill the entire screen but keep pixel perfectness (integer scaling).

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)