Compensating camera position for different screen sizes

I’m designing my mobile match 3 game in the 3d world, because why not? I like 3d. :wink:

I’ve got the gameboard of 8x8 blocks centered on the screen, and my 3d mascot in the bottom left corner.

I came to a crushing realization that not all devices will have the same screen resolution I’m testing with, so the gameboard and mascot may get cut off or placed out of the way depending on the resolution of the device.

How can I determine the position to place my mascot, offset from the camera position, so that they appear fully in the bottom left of the screen with some padding for good measure?

Also, how can I determine how to move the camera towards or away from the gameboard, so it fits nice and neat in the center, if the board is bigger or smaller than 8x8?

Is there some math trickery I can use to do this? So I don’t have to rely on checking if objects are in view, compensating, checking, ect?

It’s all math trickery, either by you or by layout components.

It will vary depending on what you are using to display: sprites, 3d object, UI, etc.

If you wanna see my match3 implementation with full source and project, play it here:

https://kurtdekker.itch.io/match3-demo

Full package here:

https://forum.unity.com/threads/match-3-game-with-hint-system.1453087/

Generally, for UI:

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

https://discussions.unity.com/t/845782/4

https://discussions.unity.com/t/848795/5

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.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

My whole game takes place in 3d space. I need to modify the Z axis of the camera so the whole board is visible, with some padding, based on the screen resolution of the device.

Then I need to modify the position of my mascot, relative to the camera, based on the screen resolution, so they’re not clipped off the edge of the screen.

So does mine. I’ll just assume you haven’t looked at the project yet.

When you do, you’ll see it manipulating the camera .orthographicSize at runtime to accommodate any screen ratio you care to throw at it.

You’ll also see it manipulating the CanvasScaler so that the UI behaves properly.

Otherwise, just use Cinemachine and tell it to “keep these things in view”

Ah ok, I’ll take a peek then.