Hi everyone, I’m developing a WebGL mobile game with a very simple mechanic, that is, catching falling objects with a basket by dragging it along the X axis.
The logic is clear and the data infrastructure has already been implemented.
What is stopping me is the dependancy that the falling objects have with the top of the screen and the basket has with the bottom of the screen (that is intended to be in portrait).
This is what, at a very abstract level, the user should see:
Now, I see two roads: A) create a non-UI based gameplay, which means to handle the GameObjects as elements in the World Space B) create a IU based gameplay, which means to me handling the GameObjects as elements in a Canvas Space
Here returns the obstacle with the screen: the moving basket at the bottom should be placed right at the bottom of the screen, and the falling objects should spawn right a little higher than the top of the screen; I would like to keep these distances, positions, etc. always the same. Of course what worries me are the different screen-ratios of mobiles.
Path B makes it very easy thanks to anchoring and all related; path A not so much, though is a work environment in which I am more confident working with.
I would like some advices related to which is, according to you, the best way to handle a mechanic like this; if you see more roads than the 2 I pointed out, please share them too.
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.
Thanks a lot for this response, it surely helped me out. In the end I’ll go with sprites and make adjustments eventually based upon this choice. I get the importance of dividing “real” UI stuff from the other.
