How do I get the Layout Scale ?

How do I get the Layout Scale after I change the window's size ?

I am working at a game that should support more resolutions and orientations. The game have the default Window Size of 1280x720 (all my objects and actions are based on that resolution) and Scale inner mode. When I resize the window to 320x480, the layout is scaled down automatically (all the objects are smaller even trough their size/scale is normal). How can I find the value for that Layout Scale ?

Anybody ? <img src="smileys/smiley24.gif" border="0" align="middle" />

I don't understand.... do you mean the rule of three?

1280= 1(original layout scale)

480=x

480/1280=0.375

X=0.375

That's not easy to answer, because of the scale mode. I don't know the exact values, nor the exact algorithm. It would be best to ask Ashley for the exact way of calculation. But I would guess, that "inner scale" always makes sure that the scale chosen results in a size equal to or greater than the new window size.

Example:

The starting window size of the project is 640x360.

We know the original aspect ratio from that size, which is (y to x)1.77~ or (x to y)0.5625

The new window size is 1024x720.

Calculating y from 1024 results in (1024 * 0.5625) 576

Obviously 576 is a lot smaller than 720, which would show more of the scene. Inner scale prevents that, so let's try the other way round.

Calculating x from 720 results in (720 * 1.77~) 1280

Since 1280 is greater than 1024, it won't reveal more of the scene, but instead hide a good portion of it. This is what inner scale is for, so the resulting size will be

1280x720, cropped to 1024x720

Now to the scale. We have the original size of 640x360 and the new calculation of 1280x720. So the scene is scaled by the factor 2. (You can calculate that from either width or height, since the aspect ratio doesn't change)

But again, this is to be taken with caution. It's just how I would do it. Ashley may have used another algorithm, since he is a professional programmer, which I am not.

Just when I've taught I have solved it, it just got more confusing <img src="smileys/smiley5.gif" border="0" align="middle">

Ashley , can you help me with this problem ?

I've set the Layer's Scale to 1 (no zoom) and Layer's Scale Rate to 0, but the blocks are still scaled <img src="smileys/smiley6.gif" border="0" align="middle">

Is there a way to stop the scaling an object ? Or Is there a formula that can help me calculate the current scale regardless the resolution and aspect ratio of the window ?

Here is my test capx file: Transition_Test.capx

Is there a way to stop the scaling an object ? Or Is there a formula that can help me calculate the current scale regardless the resolution and aspect ratio of the window ?

Here is my test capx file: Transition_Test.capx

— - The layout scale isn't changing, just your view of it. You are only choosing to display 400x300-odd pixels, but then they are stretched to fit the entire screen.

You can check viewportRight and viewportBottom values to see the size of the screen. Then divide by the original size. This will give you the value of how scaled it appears. But keep in mind that the exact scale may be off, as the width might be 0.3, whereas the height might be 0.4, so there is no single 'window scale'.

But I think you are just after another scale mode. Try them all out and see if any work better for you!

Tobye

Thank you <img src="smileys/smiley31.gif" border="0" align="middle" /> After thinking the whole "algorithm" again, I figured that I should use the Letterbox Scale and change the Window Size based on aspect ratio.

The portrait mode will be a little tricky since my game is based on landscape mode (1280x720), but it is still doable <img src="smileys/smiley1.gif" border="0" align="middle" />

No problem :) I think this aspect of game building is very important, but it's not as clearly documented/tutorialised as it should be. I have seen many people asking similar stuff and getting all sorts of conflicting answers.

For portrait mode, just try to lock the game to landscape using the browser object. Then also try to make all your UI elements use viewports for placement, and if necessary, adjust their width/height scale to the window scale as I previously explained. This will ensure they are always visible on screen, even when the screen is terribly distorted. To see this in action you can try resizing the C2 editor window itself and see how all the panels keep their place, even while the layout space shrinks. Using this method will make sure no essential controls or information is ever inaccessible, regardless of screen sizes and orientations.

Tobye

Thanks again <img src="smileys/smiley32.gif" border="0" align="middle" />

Just to make sure, all the expressions for Viewport are the following:

ViewportBottom(layer)

ViewportLeft(layer)

ViewportRight(layer)

ViewportTop(layer)

When I have time, I will make a tutorial because this is a very important procedure if you want to develop games on different devices/platforms <img src="smileys/smiley16.gif" border="0" align="middle" />

Letterbox Scale is a dead end after all <img src="smileys/smiley19.gif" border="0" align="middle"> because of 2 issues:

1) I can't get the correct WindowWidth and WindowHeight (it takes the WindowWidth and WindowHeight of the game, not of the Browser Tab)

2) Scale returns to 1 after changing Canvas Size, also bad alignment ( this bug )

Still, the Scale Inner seems to do the job. Also for the controls the Browser.DevicePixelRatio will come in handy (bigger density -> bigger touch buttons) <img src="smileys/smiley20.gif" border="0" align="middle">

Wow ... The solution was painfully simple <img src="smileys/smiley29.gif" border="0" align="middle" />

After lots of attempts I realized that the solution was very simple:

Make a square-ish Window Size and use the Scale Outer <img src="smileys/smiley36.gif" border="0" align="middle" />

The game will have the same scale/size regardless the orientation of the device.