Best way to actually support multiple res?

Hey all,

Recently Scirra added a new feature where the game can render to a smaller canvas, then scale up to fit the screen. This is helpful in instances where a computer has a big screen but a weaker graphics card - some of them have trouble drawing the whole window.

However, just by itself this feature is limited as you are basically stuck between two resolutions: native screen resolution, or the game's native resolution (i.e. the window size). I'd love to support a range of resolutions, and I'm fine if they are all using the same aspect ratio. How can I go about this? I assumed that something like using 'set canvas size' along with 'set layout scale' to scale out a certain amount, but that doesn't seem to work for me.

Any tips?

*bump*

When I was coding for iPhone with Xcode or even in Gamesalad I had my artist make all artwork to the power of 2, so it could be upscaled. However even when we was making for a 960x640 or even older 320x480 all of our vector work was created at much higher scales. This allowed you to easy put a build out for 4s, 5 and iPad without too much work.

In C2 I have been testing (and I am a noob at c2) but it has familiar elements that I have grasped rather fast. I have been looking at the resolution and aspect ratio. So a game made at 1280x720 is native 720p and will look perfect on all screen in the 16:9 ratio but letterbox on a 4:3 even at high resolutions like 1680x1050.

So targeting a aspect ratio is easier then a set resolution, and the stance we have taken is most devices be it smartphones or tablets adopt funny resolutions but tend to be 16:9 widescreen ratio.

A simple test sheet would be to draw a background image with the corners highlighted and test it across multiple devices and browsers. This will show you if the image fits and if the aspect ratio is correct and does not distort the image. Don't forget that just because it fits it may not look correct.

I hope that helps a little. If you require ill post a test .capx that will assist you as discussed.

Keith

Oh and by the way Airscape is amazing! I don't wish to teach you how to suck eggs! as you are clearly a talented developer. <img src="smileys/smiley1.gif" border="0" align="middle" />

Isn't supporting a range of resolutions with the same aspect ratio just the same as "letterbox scale" mode?

Ashley the difference comes in how many pixels are actually rendered by the GPU. I want the ability to compromise number of pixels (resolution) for game speed.

For instance, I was trying the game out on a 1080p laptop with integrated graphics and the game ran slowly because apparently the graphics card simply couldn't push that many pixels. In such cases, the player should be able to select a lower resolution, keeping the fullscreen experience but with a slightly lower image quality.

'Letterbox scale mode' I guess would be called 'auto' resolution because it adjusts to the resolution of the screen.

appchogie haha, no worries mate. We're all learning and we can all learn things from each other ;)

However yes, you may have missed that my problem is GPU capability, not screen geometry.

so are you asking to be able to change the res output of the video card.. like with non-browser games?

keepee not exactly, however I guess it has a similar effect.

And yes, it's for a non-browser (node-webkit) game.

Unfortunately 1X scale doesn't always cut it. For instance, objects can look very blurry when they get rendered at non-integer coordinates. While pixel rounding fixes that, it also introduces (comparably) choppy background scrolling as well as jittery sprite movement in some cases. Higher resolution settings would reduce the blur and still boost performance compared to maximum render scale.

Perhaps these image will make it a bit clearer:

<img src="https://dl.dropboxusercontent.com/u/41931267/resExample.png" border="0" />

The one on the left is the only simple available option ATM, and I'm looking for a way to implement the option on the right.

<img src="https://dl.dropboxusercontent.com/u/41931267/resExample2.png" border="0" />

Does this make it clearer?

*bump*

sqiddster

I might have misunderstood the question but doesn't the "set canvas size" action already do what you want?

As in

Event-->On start of Layout

Action-->Set canvas size to WindowWidth x WindowHeight

I believe this takes your current window size and sets the canvas size to the window size.

You could take the WindowWidth and WindowHeight and adjust it by subtracting by some value or divide by some value to scale down its resolution.

You could maybe also switch out the value of WindowWidth with viewportRight("layer"), and WindowHeight with viewportBottom("layer") to get the devices viewport on the browser then adjust the canvas to the viewport.

Do you think that might be what your looking for?

retrodude yeah, that's part of the solution. The other part is making the game window the same size, regardless of the set resolution. The game's been designed at a 1366x768 resolution, so if I set the canvas size to, say, 1280x720, the game's going to have to adjust.

I thought using 'set layout scale' would work but it's not really working for me.

I guess I'll have to build in multi-resolution support for all the menus, HUD, etc.

sqiddster

Oh I see what you mean now. As of right now I don't think its possible to directly change the game window size with scaling on. You can however change the game window size when scaling is set to "off" by using both layer scale and set canvas size. For some reason layout scaling doesn't seem to work the way I thought it did.

Here's a capx to show you what I mean:

Press "a" to scale down by half

dropbox.com/s/wj3fvhfysetjyu3/scaling.capx

retrodude

yeah, I was just going to reply. I've found a solution, but it only works with 'fullscreen in browser' to 'off'.

Basically, after setting the canvas size to the desired resolution you set the layout scale to 'newresolution/gameNativeResolution'.

I have no idea why it only works with 'fullscreen in browser' set to 'off'. Ashley perhaps you could shed some light on the subject?