• 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 /
  • Help Room /
avatar image
1
Question by ZaddBuzuki · Oct 29, 2016 at 07:35 PM · camerauicanvassnapsnapping

How would I Consistantly 'Snap' a UI Element to the Edge of a Camera?

Hello everyone! I am making a 2D game, and want a UI Element to be like a Chat box you can "Hear" from a distance, Its size is 150 Width by 60 Height, and is just a regular texture element I can overlay text on, but I am having trouble automatically positioning it on the screen towards the position it wants to snap to. The code I currently have below "Should" do just that, but doesn't... Its a C# script inside the Main Camera itself. "chatBubble" is the Sprite object in Canvas. and "chatBubbleObject" is just a gameObject in real space I want it to lock to when its visible on screen etc:

 Vector3 bubbleScreenPosition = gameObject.GetComponent<Camera>().WorldToScreenPoint(chatBubbleObject.transform.position);
         chatBubble.transform.position = bubbleScreenPosition;
         if (bubbleScreenPosition.y <= 0f + chatBubble.GetComponent<RectTransform> ().sizeDelta.y) {
             chatBubble.transform.position = new Vector3 (chatBubble.transform.position.x, 0f + chatBubble.GetComponent<RectTransform> ().sizeDelta.y, chatBubble.transform.position.z);
         } else if (bubbleScreenPosition.y >= gameObject.GetComponent<Camera>().pixelHeight - chatBubble.GetComponent<RectTransform> ().sizeDelta.y) {
             chatBubble.transform.position = new Vector3 (chatBubble.transform.position.x, gameObject.GetComponent<Camera> ().pixelHeight - chatBubble.GetComponent<RectTransform> ().sizeDelta.y, chatBubble.transform.position.z);
         }
         if (bubbleScreenPosition.x <= 0f + chatBubble.GetComponent<RectTransform> ().sizeDelta.x) {
             chatBubble.transform.position = new Vector3 (0f + chatBubble.GetComponent<RectTransform> ().sizeDelta.x, chatBubble.transform.position.y, chatBubble.transform.position.z);
         } else if (bubbleScreenPosition.x >= gameObject.GetComponent<Camera>().pixelWidth - chatBubble.GetComponent<RectTransform> ().sizeDelta.x) {
             chatBubble.transform.position = new Vector3 (gameObject.GetComponent<Camera> ().pixelWidth - chatBubble.GetComponent<RectTransform> ().sizeDelta.x, chatBubble.transform.position.y, chatBubble.transform.position.z);
         }

(Visual Image of whats happening, I Don't want those gaps...): https://thumbs.gfycat.com/WeeklyHeartyBallpython-size_restricted.gif

The main issue I am having, Is I could have sworn I would have needed to Divide the Length of the UI object by Half, but to get the best results, I did not do this. Plus, It is still not completely accurate in snapping to the screen, and when the screens aspect ratio changes, it does throw off the UI's snap, making a big gap show, So basically it's not correct math.

I have a theory that the UI Size of the object 150 Width by 60 Height does not correctly translate to positions relative to the camera. I managed to see screen position relative to a game object, but I am confused if I need to do the same with the canvas to the camera, or how I would even go about doing that.

Thanks for reading!

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

1 Reply

· Add your reply
  • Sort: 
avatar image
2
Best Answer

Answer by ZaddBuzuki · Oct 30, 2016 at 02:34 AM

After much testing, I have found, that the scale on my image was actually 1.5f Which could have been throwing off the visual sizing of my UI. I had a friend look my code and item properties, and he concluded this is the code I should use to Reposition the UI accordingly. Just make sure the scale of your Image UI Object is 1 X 1 Y, and again, this is running under the 'Update' function, 'chatBubble' is the Image UI, 'chatBubbleObject' is the gameobject you want the UI to lock on in world space, and now 'MainCanvas' is the Canvas object itself. I hope this code helps others who want something similar to this in the future:

 Vector3 bubbleScreenPosition = gameObject.GetComponent<Camera>().WorldToScreenPoint(chatBubbleObject.transform.position);
         //bubbleScreenPosition += new Vector3 (0, 0, 0); //This offsets it from the object, If you want it above a character head for example.
         chatBubble.transform.position = bubbleScreenPosition;
         float bubbleX = chatBubble.GetComponent<RectTransform> ().rect.width * MainCanvas.scaleFactor;
         float bubbleY = chatBubble.GetComponent<RectTransform> ().rect.height * MainCanvas.scaleFactor;
         if (bubbleScreenPosition.y <= 0f + bubbleY/2) {
             chatBubble.transform.position = new Vector3 (chatBubble.transform.position.x, 0f + bubbleY/2, chatBubble.transform.position.z);
         } else if (bubbleScreenPosition.y >= gameObject.GetComponent<Camera>().pixelHeight - bubbleY/2) {
             chatBubble.transform.position = new Vector3 (chatBubble.transform.position.x, gameObject.GetComponent<Camera> ().pixelHeight - bubbleY/2, chatBubble.transform.position.z);
         }
         if (bubbleScreenPosition.x <= 0f + bubbleX/2) {
             chatBubble.transform.position = new Vector3 (0f + bubbleX/2, chatBubble.transform.position.y, chatBubble.transform.position.z);
         } else if (bubbleScreenPosition.x >= gameObject.GetComponent<Camera>().pixelWidth - bubbleX/2) {
             chatBubble.transform.position = new Vector3 (gameObject.GetComponent<Camera> ().pixelWidth - bubbleX/2, chatBubble.transform.position.y, chatBubble.transform.position.z);
         }


Visual Representation of Final Result: https://gfycat.com/OrangeScalyGoat

Comment
Add comment · Share
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

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.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

119 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

Related Questions

Prevent World Space canvas render mode to overlay other game objects 0 Answers

Major Issues with Camera Switching 1 Answer

How to match position with Mini Map UI 0 Answers

Canvas without Camera? 2 Answers

Frustrating problem with UI canvas (lines of canvas flicker around the edges of screen in game!!!) 5 Answers

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges