Can't get canvas fill the screen

Cocos Creator
#1

Hello,
I’m using the Cocos Creator v3.8.1.
I`m trying the setup a full screen canvas which is not bound to an aspect ratio.
But the problem, the canvas always stays in its designed size and just fits the screen by the smallest side.

The canvas comes with default settings. Resolution 1024x1024 (1:1).
I added 2 widgets with binding to top left and bottom left corners.

I expect that there will be 1 button at the top left corner and 2 buttons at the bottom left corners no matter what device resolution is, as well as no matter what orientation it is at.

However, the canvas doesn’t fill the screen, and just fits in it, preserving the aspect ratio.

portrait
portrait378×802 7.11 KB

And seems doesn’t do any adjustments after rotation.
The canvas just stays with the same scale at the center of the screen without any adjustments.
<can’t insert second image>

Flag Fit Width and Fit Height don’t have any effect on the described behavior.

What I needed to do looked like a simple task, however, I couldn’t figure it out in a couple of days.
I just need to have some buttons fixed at the screen borders.
Any advice?
Thanks in advance.

#2

Have you added a widget to the canvas node?

CocosCreator_Bo5hJ06zr4
CocosCreator_Bo5hJ06zr4480×638 20.8 KB

#3

Yes,
And setup is absolutely identical.

#4

I wrote a tutorial for this 3 years ago.
APIs have been changed since then.

But you would still get some idea on how to make a responsive layout.

#5

I’ve just found a really cool script under the test projects examples on the Cocos Github

This little trick here does adapt to different screen sizes without losing the expected aspect ratio.

const resolutionPolicy = view.getResolutionPolicy();

resolutionPolicy.setContainerStrategy(ResolutionPolicy.ContainerStrategy.PROPORTION_TO_FRAME);

view.setResolutionPolicy(resolutionPolicy);

This together with the Widget setup in your UI should do it!

1 Like