Tutorial: Dynamic Scaling

Objective

The objective of the article is to implement a system for dynamic fullscreen scaling, maintaining your game's aspect ratio on all monitors. By default, when using fullscreen mode, Construct will stretch or squish the display to fill the entire screen, which will distort your graphics on a monitor with a different aspect ratio to yours. With this method, the application scales to fill the screen without altering the aspect ratio, and adds black bars to the parts of the display outside of the visible area.

The example I�ve used is for making games in the HD resolution 1280x720, and supports any monitor resolution between 640x480 and 1920x1080. In this case, black bars will appear on the top and bottom of the screen if you are playing on a monitor with a non 16:9 aspect ratio. You could easily alter it to work with 4:3 as standard, adding horizontal bars on widescreen displays.

Setting up

First, you need to work out the maximum size of monitor your game will display on, in this case 1920x1080, and decide the resolution you want to build your game in, 1280x720 here. Make the layout size the maximum resolution, and you then need to �box off� the game resolution space in the middle with black boxes. In the example, the 1280x720 game space is in the middle of the 1920x1080 display, with the rest of the space blacked out. You then need an object placed at the very centre of the screen with the �centre view on me� attribute, to make sure the game always centres the visible layout.

I�ve set the default resolution to 640x480, to enable it to launch on any monitor. Applications sometimes have trouble starting in a higher resolution and scaling to fit a smaller monitor, so it makes sense to start with the smallest possible resolution. It�s also important to start the application in windowed mode, to allow for resizing before fullscreen mode is activated. Make sure that �Resizing� in �Window Properties� of the application is set to �Show more window content�.

The events

You�re going to need to add two objects to the scene, the Window Object and the SysInfo Object, these are vital for scaling.

<img src="http://img15.imageshack.us/img15/7928/img1tne.png">

With that done, you can start adding events.

Step 1: The system object is used to set the application resolution for the resolution of the monitor, using the GetScreenWidth and GetScreenHeight expressions of the SysInfo Object. The Window Object then resizes the app window using the same values.

<img src="http://img38.imageshack.us/img38/4236/img2r.png">

Step 2: Now that the screen size matches the monitor resolution, we need to scale the visible layers by the difference between the screen width and the native width of the application. In the example, I�ve used the number 1280 because that�s the width of the visible window. The equation for zooming the layers is 100*(Screen Width / Native Width).

With that done, you can activate fullscreen mode.

<img src="http://img18.imageshack.us/img18/3459/img3d.png">

And that is the essence of it. Download the example here http://www.mediafire.com/file/mjkdue0ee ... caling.cap to see it in action. The example uses a simple loop to ensure that if any more layers are added to the layout, they will scale correctly as well, with no extra events.

This method is limited in that currently it only works for one-screen-per-layout games. I�m trying different ways of making it work with layer scrolling, but haven�t had any luck so far. Feel free to take the example and modify it to your needs, and if you can find a way to make it work correctly with scrolling, then fantastic, let me know!

My thanks go to Davioware for introducing me to the Window object, as well as AshyRaccoon for pointing out the SysInfo object and Mipey for coming up with the required scaling coefficient.

Hope this article�s been useful!

- Tom

Personally I've done a similar thing except I allow changing the aspect ratio. The zooming is done based on the height of the window, and with the code I use for scrolling it should allow the player to always view the about same area around them no matter what the size / aspect ratio is. The zooming is done based on the height rather than the width, and the resolution isn't set to the monitor size in the beginning, rather the user can change it in the options.

Yeah, selectable resolutions would be simple enough to add in, but with this method you always get the best resolution for your monitor. Also it could be adjusted to scale by height instead of width for 4:3 resolutions, and you could switch between fairly easily using variables. Can I aks how you managed to make scrolling work? I've tried simply making the layer with the bars on non-scrolling, but then I can't work out whether you can reposition the layer to the right place or not. I've also tried repositioning the bars with maths, but I can't work out the correct algorithms to place them reliably for every monitor, without cutting off the edges of the screen.

I'm not sure I'm gonna get a reply to this, but I used this system and what happened in the end were some strange things like the collision detection of Construct being off, and generally detecting positions...

It has to do with changing display size, and I don't know why or how exactly.

Should work in 7, don't know why it wouldn't. There are problems with this method however, such as certain full-screen layer effects displaying incorrectly, camera scrolling doesn't work properly, and mouse-based movements sometimes behave weirdly.

If you can find a better solution to the problem of scaling, I'd say go for it; this method works, but only for static frames and it can be temperamental for reasons I can't fathom.

mouse-based movements sometimes behave weirdly.

Well I am running Dynamic Scaling on the Windows 7. But yes I agree with chaosmaster that mouse basued movement behave so badly sometimes. Its also happening with me too.

Hi guys, thank you for this tutorial! It really helped me a lot.

Although there is a problem I have encountered. I found out that you can't really take a screenshot or record a video of your game when it is in fullscreen mode. Is this a problem that is caused by this method alone, or do all construct games run at fullscreen experience this?

Cheers.

If you can find a better solution to the problem of scaling, I'd say go for it; this method works, but only for static frames and it can be temperamental for reasons I can't fathom.

I just found this thread, so this might come too late.

I made a very similar approach, but with another "anchor".

Please ignore the german comments, I made them for my own use.

My idea behind it is to start with a virtual screen, independant from the window or the layout size. In this case that virtual screen was determined to have a size of 1920x1080. The layout may have any size (although it doesn't make much sense to have it being smaller than the virtual screen), e.g. 4000x4000. The window may also have any size, in this event sheet it is 1024x768. The black bars are on an inherited layer with 0% scroll and zoom ratio. All calculations refer to the virtual screen size (width=1920, height=1080) and the display width and height. I then switch to fullscreen in another event sheet.

The example above works with scrolling and I couldn't find any issues yet. But I could only test it on my own pc/monitor, so maybe there are issues.

EDIT: Forgot the important information that the calculations assume an aspect ratio where the width value is higher than the height value. 16:9, 16:10, 4:3 etc works, but for aspect ratios like 4:5, 1:2 etc you need to adapt the calculations to be based on the height instead of the width.