Game Canvas messed up in WebGL build

AlphaPhantom · January 8, 2021, 1:47pm

My game works normally when i play in unity. But when i build and run it on webgl it looks like this:
My game in unity

My Game after i build in WebGL

My canvas shifts and the score places are messed up. I would really appreciate help to resolve this issue.

Nina · January 8, 2021, 2:38pm

Hi AlphaPhantom,

For which resolution did you design your game? What resolution did you set in File > Build Settings > Player Settings? Is it the same resolution as in the game window in the editor? If not, that might be the problem.

AlphaPhantom · January 8, 2021, 3:43pm

Hi Nina,
I designed my game in 4:3 ratio. In the player settings the default canvas width is set as 960 and the height is 600. I have two canvases that scale with screen size and both of them use a reference resolution of 1440:1080.

Nina · January 8, 2021, 6:03pm

Set the resolution of your game window to 960 x 600, and use the same resolution in the Player Settings. It might be that you’ll have to rearrange your UI elements a bit so they fit into the canvas box.

AlphaPhantom · January 9, 2021, 6:18am

Thank you! I didnt do 960 x 600 because it was causing some problems but i did it with 960 x 720 in both the game window and player settings and it solved the problem.
Thanks again!