Aspect ratio problem when uploading to WebGL

Hi,

I am having some issues when uploading my WebGL game, one of my scene’s resolution aspect ratio is just way off (The Tutorial Text should be way higher, and the gold text should not be overlapping the blocks) but I really don’t know how to solve the problem, although it looks just fine (4:3) in the inspector.

WEBGL:

Inspector(What it supposed to look like):

I played a little bit with the resolution, and it seems (most likely) that my scene has been croped into a standalone (1024 x768)? Image:

I did some searching for the threads that have similar issues, and I do have the resolution setup to be 800x600 in player settings:

Furthermore, my other scenes are working properly (4:3 ratio) without an issue, only that particular scene above is behaving weird.

My Other scene:

Hmm. I think it might have to do with the pinning of the text. You could try making it stretch instead of pinning it to a particular corner, then it might resize along with the resolution.
Also check the Canvas Scaler (a component on your canvas), that it scales with screen size, and set the reference resolution also to 800 x 600.

That’s all I got. Hope something helps :slight_smile:

1 Like

Hi BetskoN,

Whoa! That worked out really nice! In the “Canvas Scaler”, I forgot to change the UI scale mode from “Constant pixel size” to “Scale with screen size”. After setting it to 800x600, it scales perfectly.

Thanks a lot for the solution :smiley:

Wonderful! Glad I could help out :grin:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Privacy & Terms