Feature Focus: Display scaling

13
Official Construct Post
Ashley's avatar
Ashley
  • 27 Jun, 2022
  • 1,512 words
  • ~6-10 mins
  • 3,992 visits
  • 5 favourites

Feature Focus is a series of blog posts and videos where we occasionally highlight some of the best features of Construct. In this feature focus, we'll cover display scaling, allowing your project to scale to any sized display, as well as some features specific to using pixel art.

Our past Feature Focuses have covered:

Letterbox scale

Construct's default fullscreen mode is Letterbox scale. This keeps the project at a fixed aspect ratio, and shows black bars around the sides if the display area is a different aspect ratio.

This default means that your game can scale to any size display with no extra effort at all. It just works!

Letterbox scaling showing the 'Cave bridge' example at different sizes.Letterbox scaling showing the 'Cave bridge' example at different sizes.

If the project aspect ratio matches the display area aspect ratio, then no black bars are shown as it will exactly fit. This means you can still get a nice display-filling experience with common aspect ratios like 16:9.

If the aspect ratio does not match, you can customise the color of the side bars with the project Background color property. Or you can go further - since Construct games are all powered by web technology with extensive support for HTML and CSS, you can add in a CSS stylesheet and use custom CSS for the background, like a linear gradient!

body {
	background: linear-gradient(#353486, #212845);
}
Using a CSS linear gradient to customise side barsUsing a CSS linear gradient to customise side bars

Scale inner and scale outer

If you want to make sure your game always uses the full display area, it means having to take in to account different aspect ratios. This is more work than just letting letterbox scale do its thing, but can be done. One option is Scale inner. This uses the full display area, but when the aspect ratio does not match, it crops the view. The Cave bridge example with Scale inner and a roughly square window is shown below.

Cave Bridge with scale inner fullscreen modeCave Bridge with scale inner fullscreen mode

Often this works well, but notice that the visible area is reduced - the player now can't see as far across the level to the right, as it's been cropped. This could affect the gameplay, so it may need more attention to make sure the game design can handle it. Also at extreme aspect ratios, this mode can make everything look like it's zoomed in a long way - but that usually doesn't happen unless the window is resized in an unusual way.

An alternative option is Scale outer. This works similarly but instead of zooming in and cropping, it zooms out and extends the view. This has the advantage that the player can see at least as far as they could before, but the downside is it can end up showing extra content that was not meant to be visible! An example is shown below.

Cave Bridge with scale outer fullscreen modeCave Bridge with scale outer fullscreen mode

Notice how the player can now see as far across the level as they could before, but there is extra content included vertically - including some underwater graphics and blank space that were not originally intended to be visible. This demonstrates the downside, as it can take more design work to make sure things always look right in this mode. However for some styles, like open world games, that might not be too difficult. The last downside is unusual aspect ratios can look zoomed out a long way (the opposite result to scale inner, which can look zoomed in a long way).

Construct has extra features to help you handle different aspect ratios, such as the Anchor behavior, and system viewport expressions.

No fullscreen mode

It's possible to use fullscreen mode Off, which will use a fixed size and ignore the display size. This can sometimes be useful for embedding games in iframes, but even then, it's probably better to use the default letterbox scale mode. That allows the game to scale to fill the size of the iframe, so you don't have to depend on fixed size elements.

Requesting fullscreen

Using the Browser Request fullscreen action, you can switch in to fullscreen mode and your game will take up the entire display. This also helps the game match the display aspect ratio, as the browser window won't be taking up space with things like its tabs and address bar.

In web browsers remember that Request fullscreen can only be used in a user input trigger like On button clicked. That's to make sure websites can't annoy visitors by automatically putting themselves in to fullscreen before the user has done anything. However in desktop exports, Request fullscreen can be used at any time, including on startup. And mobile exports already run in fullscreen!

If you show your content in an iframe on the web, make sure the iframe has the allowfullscreen="true" attribute to grant fullscreen permission to the iframe.

Handling different display densities

Most mobile devices, and many of the latest desktop displays, support high-DPI resolutions. This means that content is displayed at the same size, but there are many more physical display pixels, allowing for a more detailed display. The device pixel ratio indicates how many physical pixels there are for a 1px measurement, and it's often 2 for a double-density display, but it can be even more.

Construct also handles high-DPI displays automatically. All its measurements carry on working in CSS pixels, and the rendering just increases in detail on high-DPI displays. This is another potentially complex detail that Construct handles for you automatically, while ensuring the best rendering quality for your game.

Handling pixel art

One downside of Letterbox scale is it doesn't always display pixel art nicely. The reason for that is it can use fractional scaling, such as 1.5x scale. That means pixels in the artwork don't line up consistently with pixels in the display. To demonstrate the problem, here's the player sprite in Kiwi Story, using hand-drawn pixel art.

With Letterbox scale, at some sizes the pixel art will appear uneven, as pixels aren't lining up with the display evenly, looking a bit like this.

The solution is to use Letterbox integer scale, which looks a lot better!

It works by using letterbox scaling, but only at integer zoom levels, e.g. 1x, 2x, 3x... That ensures that the pixels in the artwork always match up exactly with the display.

On high-DPI displays this works even better: the scaling works on multiples of physical display pixels. Since high-density displays have many more physical pixels, it provides lots more possible integer zoom levels to choose from.

Integer scaling does mean you can get bars on all four sides of the display, as shown below.

Kiwi Story with 'Letterbox integer scale' fullscreen modeKiwi Story with 'Letterbox integer scale' fullscreen mode

However this is the only way to guarantee the pixel-perfect display of pixel art games, so is a worthwhile tradeoff to make. These side bars can also be customised the same way as with Letterbox scale as described previously.

Pixel art games will likely want to set a couple of other project settings:

  • Sampling mode Nearest, to ensure crisp rather than blurry pixels
  • Fullscreen quality Low, to ensure everything renders at a low resolution and then stretches the result up at the end
  • Pixel rounding enabled, to ensure the scroll position and every individual object render at integer co-ordinates, avoiding rendering at fractional co-ordinates.

If you enable Optimize for pixel art in the New Project dialog, Construct will apply all these settings and Letterbox integer scale for you.

Video demo

See the different fullscreen modes in action in our accompanying YouTube video! Subscribe to our YouTube channel to get more videos from us.

Subscribe to Construct videos now

Learn more

Here are some links where you can find out more about display scaling and pixel art:

Conclusion

Construct defaults to using a letterbox scale fullscreen mode that lets most games adapt to any size display. There's nothing you need to do! It just works.

If you want to support different aspect ratios so you never see side bars, there are more modes and features to let you handle that, although it will take a little more work.

Construct also has good support for handling pixel art games and preserving the artwork quality. Letterbox integer scale makes sure that fractional zoom scales don't end up jumbling your carefully crafted pixels, and there are several other settings useful for pixel art games.

This sums up our approach with Construct: there is a solid default that generally does the job well, taking the pain out of handling different screen sizes. But if you need to customise things, you can do that too, with a range of other features to help with more advanced cases. And there's comprehensive support for both modern and retro art styles.

Like the sound of that? Get started with Construct today!

Subscribe

Get emailed when there are new posts!

  • 7 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thanks Construct team for putting this together. As always this write up and video are very informative and to the point. Your investment in educating the c3 user base is one of the primary reasons novices like me chose this game engine - you make it accessible for everyone! I never thought to look into these layout scaling settings but this is a great way to understand what they do and how they work. Looking forward to the next entry in the series.

  • Thank you so much for this very clear explanation of how to handle screen sizes.

    I do appreciate Scirra's efforts to educate its users. For myself, Construct 3 is an excellent game engine. I saw it developing through the years, and it's only getting better!

  • for pixel art games depending on your game's resolution (usually a higher resolution like 854x480) you wouldn't do quality:low, pixel rounding and letterbox scale int.

    1) no one wants to play a windowed game that isn't borderless, otherwise run the risk of making it look like a cheap flash game

    2) low quality does not work well if you do any sort of sprite resizing, it attempts to redraw the sprite. Not to say that stylistically you can't make it work, but just note that resizing sprite fonts can make them illegible.

    3)pixel rounding only works if you are using Scale integer. and I believe if you use any x/ys that are not whole numbers things get wonky. although I don't really remember the main issue, I tried it a while back and everything got skewed so I made sure to use without.

    • I make a lot of pixel art games and I never use the pixel art template as there's more to change in that than in a standard landscape view template. I just changed the sampling to Nearest and I'm done. The only other 'tweak' is layout size and some default values of things are usually a lot larger (i.e. standard sprite's initial size is 250x250px)

    • using Letterbox Scale, upsizes the game nicely and while some of it isn't "exact", it gets the job done. as long as your pixel art resolution is reasonably large, a double line here or there won't do much harm in the overall look. The main dilemma: Standard monitors are 16:9, you cant always divide that evenly depending on your art resolution and how big/small you want your objects to be on the screen (or drawn at).

  • We also need some easy ways to change game resolution, at runtime. It can help to increase fps on the slow device

  • Thanks for the lifehack!

    body {

    background: linear-gradient(#353486, #212845);

    }