Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by wolfenswan · Mar 07, 2021 at 10:40 AM · gui2d gamescaling

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: alt text

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?

2021-03-07-11-11-36.png (59.3 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

0 Replies

· Add your reply
  • Sort: 

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

222 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

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


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges