Supporting multiple aspect ratios with integer scaling

Hi all

I've been researching and trying to solve this problem for hours, reading various tutorials, posts etc. and haven't been able to find an answer so any guidance or pointers in the right direction would be appreciated. I'm sure it's super simple and I'm just missing something fundamental!

Basically I want to be able to scale for different resolutions and aspect ratios without getting black borders but only in integer amounts to preserve pixel art quality.

I understand the theory regarding having a bigger background than the actual active part of the game so that the background fills the screen at various aspect ratios but I can't work out how to implement this in C2 whilst simultaneously only using integer scaling.

I think basically I want to be able to manually implement scale inner or outer with integer scaling?

I hope this makes some sort of sense... Thanks!

Some more thoughts regarding this...

So after much deliberation I've come to the conclusion that to support the most resolutions and aspect ratios across mobile, tablet and PC without the dreaded black bars appearing I'm going to use a 480 x 320 active game area with a 684 x 384 background. I believe this should cover a lot of devices at integer scales.

Here's a link to a picture showing two examples of how I'm looking to have the game window act. The middle whiteish area is the 3:2 480 x 320 active game area (safe zone). The green window shows a 16:9 640 x 360 area suitable for 1280 x 720 (scale factor 2) and 1920 x 1080 (scale factor 3). The yellow window shows a 4:3 512 x 384 area suitable for 1024 x 768 (scale factor 2) and 2048 x 1536 (scale factor 4).

https://drive.google.com/open?id=0BxC-VOSRkFF-Y0hBaHdOU1Y2WTQ

This setup can also handle 1366 x 768, 1136 x 640 and 1334 x 750 all at scale factor 2 and obviously the safe zone itself integer scales to 960 x 640.

So I guess I need C2 to detect the screen resolution of the device it's been launched on and then scale the game up by the biggest integer that it can so the safe zone is still fully displayed. Seems to me the logic to do this isn't complicated, it just needs to divide the devices x an y resolutions by the safe zone dimensions rounding down to the nearest integer. Then scale up by the smallest of those results, set the displayed area to the devices resolution and centre it on the safe zone. The background would then be in place to fill any spaces that exist around the safe zone.

The only problem now is I'm currently at a loss as to how to implement this...

Couldn't sleep so had another look and I may have solved my issue. Not sure how other people have implemented this sort of thing but this seems to work so far. Posting in case it's useful to anyone else and also in case there's something terribly wrong with this methodology so I can be corrected!

On start of layout--------------------Set HorizScale to floor(browser.ScreenWidth/480)

----------------------------------------------Set VertScale to floor(browser.ScreenHeight/320)

----------------------------------------------Set canvas size to browser.ScreenWidth x browser.ScreenHeight

||||---------HorizScale < VertScale-----Set layout scale to HorizScale

||||---------Else-------------------------------Set layout scale to VertScale

||||----------------------------------------------Scroll to (342,192)

So what this does is at the start of layout it determines the scale of the device's horizontal and vertical resolution relative to the safe zone resolution (in this case 480 x 320) rounded down. It then sets the canvas size to the device's resolution so the game fills the screen. It then determines which scale factor is smaller and scales the layout to that one. Finally it scrolls to the centre of the layout (in this case 342,192 as the layout is 684 x 384).

This seems to work provided 'Fullscreen in browser' in Project Properties is set to anything other than 'Off'. I'm not sure whether there's a particular choice other than that which is best...

Hello.

I am developing a game for Android using pixelart, the game's orientation is portrait.

Your solution is very interesting to me because I am looking for the same solution, eliminating the black borders added using Letterbox Integer Scale but without losing pixel perfect relation. Its an hybrid between letterbox integer and scale outer.

As I said before, my game uses portrait orientation so applying your solution to my code looks like this:

On start of layout--------------------Set HorizScale to floor(browser.ScreenWidth/320)

----------------------------------------------Set VertScale to floor(browser.ScreenHeight/480)

----------------------------------------------Set canvas size to browser.ScreenWidth x browser.ScreenHeight

||||---------VertScale< HorizScale-----Set layout scale to VertScale

||||---------Else-------------------------------Set layout scale to HorizScale

||||----------------------------------------------Scroll to ((LayoutWidth/2),(LayoutHeight/2))

But I am not getting the results I was hoping for.

Maybe there is something wrong with my "conversion" to portrait orientation.