Advices for screen ratio-based 2D gameplay (WebGL)

Personally I would do gameplay as sprites, then use UI for user interface, since UI has anchoring rules best suited to UI.

Sprites seen by an orthographic Camera are bounded by the orthographicSize of that Camera.

Look up the meaning of Camera.orthographicSize and do some experimentation in your scene with the editor (with only a Camera and small Sprite) until you are comfortable with what that value means and how you can use it to reason about in-game metrics.

Personally I usually fix the camera orthographicSize, then make helper methods to compute screen bounds based on it and based on Screen.width / Screen.height

As for the UI:

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

2 Likes