- Home /
Proper way to dynamically place UI elements in cropped viewports?
Tl;dr: Is there a one-fits-all method to dynamically place a ui-element, so it's guaranteed to be within a given viewport, no matter the scaling or cropping? Either using screen-space: overlay or camera.
Long story:
I have added a simple indicator to highlight an off-screen entity:
Currently I am using Screen Space - Camera for the UI-Canvas, so I can place the pointer easily in world-space. However, due to the Pixel Perfect 2D's X and Y cropping, I also had to take difference between viewport and screen size in account, when scaling the screen. All in all I arrived at a solution that feels fairly hacky:
[SerializeField] GameObject _target;
[SerializeField] Camera _camera;
[SerializeField] float _screenBorderBuffer = 128;
[SerializeField] RectTransform _ownRectTransform;
// .....
var targetPosition = _target.transform.position;
var targetScreenPos = _camera.WorldToScreenPoint(targetPosition);
Vector2 pointerScreenPos;
var widthDiff = (Screen.width - _camera.pixelWidth)/2;
var heightDiff = (Screen.height - _camera.pixelHeight)/2;
pointerScreenPos.x = Mathf.Clamp(targetScreenPos.x, _screenBorderBuffer + widthDiff , Screen.width - _screenBorderBuffer - widthDiff);
pointerScreenPos.y = Mathf.Clamp(targetScreenPos.y, _screenBorderBuffer + heightDiff, Screen.height - _screenBorderBuffer - heightDiff);
Vector3 pointerWorldPos = _camera.ScreenToWorldPoint(pointerScreenPos);
pointerWorldPos.z = 0f;
_ownRectTransform.position = pointerWorldPos;
While it works, I'm not happy with it:
For one, the _screenBorderBuffer needs to adjusted dynamically. Also, I feel the intended "unity-way" would be moving the UI element by shifting its anchored position within the canvas. But I'm drawing a blank when it comes to translating a world- or screen-position to a relative anchored-position.
I'm fine with shifting to Screen Space - Overlay, too.
Any thoughts?
Your answer
Follow this Question
Related Questions
How to change objects scale based on distance between 2 points 4 Answers
Editing a Player's Scale Over the Network 0 Answers
Mobile 2d Game Resolution scalling 0 Answers
Scaling a GUI element to fit it's contents 0 Answers
Good way to scale 3D GameObjects in a Canvas (Screen Space - Camera)? 1 Answer