tl;dr:
- What’s the recommended way of handling the unused (but not blacked out) space around the design resolution which is created on some devices when Creator fits the canvas into the available screen space?
- How can I achieve a completely native, dynamic resolution with Creator? I.e. a canvas which changes its size in pixels exactly according to the available screen space without any additional scaling which would make the game blurry.
I want to learn how the sizing and scaling of Canvas works in practice.
The first issue comes from the mismatch between the docs and how Creator works now:
The docs describe scaling and resizing always with a black border which will appear, but according to this forum post that’s not the case any more, which is also the behavior that I observed, for example in the iPhone 5 simulator in the browser: (I changed the camera’s background color to white so it’s more obvious what I’m talking about)
Note that my design resolution is in portrait and the screenshot is in landscape mode, and I’m using Fit Height but that’s only to illustrate my point. Normally the “black-border” space will be a lot smaller, but still there.
Magenta: design resolution 640x960
Orange: frame size 568x320
Black: viewport rect 1136x640
Red: canvas size 1136x640 (in the picture the viewport and canvas have the same size, so it’s difficult to see and looks like a brown rect, but in fact it’s black and red)
Cyan: canvas size scaled with scaling factors from view (cc.view.getScaleX() and Y), or win size 1704x960
Scale: 0.66…/0.66…
I can use, see, click, draw into, etc any of the screen space around the magenta rectangle, which represents my design resolution. Is it a valid workaround to draw two black rectangles outside of the design resolution space, so that 1) no artifacts from undesigned screen space are visible to the user and 2) no user has advantages over other users because they can see more of the game screen?
Or what’s the recommended way?
The second topic is similar. If I were to make a traditional game for desktop with Creator, my approach would be the following: make the canvas as large as possible to fill the whole browser window, and maybe even ask the user to make the browser window completely full-screen to remove any UI from the OS. Then I’d turn off Fit Height as well as Fit Width so Creator doesn’t resize anything. As I understand it, in this case instead of making the drawable canvas bigger as a whole, Creator would still use the scaling factor to fill the whole screen instead of simply resizing the canvas to fit the native resolution. Even if I turn all fitting options off. Simple example: I make a design resolution of 960x640 and turn both fitting options off. Start the browser and the following sizes and scales are given to me:
1920/1280 (canvas size)
960/640 (frame size)
1920/1280 (viewport rect)
2/2 (scale)
I would have expected the frame size to fit the canvas size and the scale to be 1/1. So how can I resize the canvas myself programatically to achieve native scaling for desktop environments?