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