Facebook instant games render outside canvas problem

[Andres_IC]

I have my project with 2 cameras. One is the main camera, that captures the gameplay and follow the player.
The Problem i had is that when the camera start to move the ui stay in place and get outside of the screen.
so what i did is to add a second camera and put aside of the game area.

when i test the game using cocos it works fine

but when i upload to facebook instant games when i test it uses the full width and renders the two cameras together

what is the correct procedure for creating an UI for a moving camera?

[Andres_IC]

I removed the extra camera and the problem persist. I think that is a problem with the instant games build

[Andres_IC]

Anyone knows how to fix it?

[krissy18]

Is the background should be moving and the character remains at the center?

[Andres_IC]

the character and the camera moves. The background is pooled so when the character moves the next piece is spawned and the top are recycled.

The problem is that in instant games the Design Canvas Size is ignored and just displays everything

[krissy18]

Does your game has the fixed width canvas resolution?

[Andres_IC]

this are my settings

[krissy18]

Try to check the fixed width in your canvas component.

[Andres_IC]

This happens with fix width

[uxman]

Hey, any suggestions on how did you fix this one?

[Andres_IC]

i couldn’t but when i uploaded to Facebook and tested on it, the canvas size was fixed

[FinlayAceViral]

I had a similar issue. My solution was to not have anything be a child of the canvas. Cocos would constantly recreate the camera thats attached to the canvas but I just ignored it and had a duplicate camera follow the player instead. The main camera that is a child of “cameras” would be the one that followed the player. Everything else had a root node that wasn’t the canvas like below.

https://gyazo.com/aea03b82b9e27a59dab44d23ddd760e0