How to set up anchors for a chat program?

Question

I'm trying to make a chat programm for mobile phones but I have 2 problems with anchors.

1. I have my chat history in a VBoxContainer in a ScrollContainer. I want all messages from others to be anchored on the left side and mine on the right side, but all anchors are set to the anchor of the ScrollContainer.

2. I have a button with rounded edges (it is a circle) and i want it to resize to fit the size of the screen (For different screen sizes). I set the layout to "Keep ratio" (the anchor is the size of the button) but now the button deforms when resizing the screen (no longer circular). Is there any way to use anchors to keep the circle circular when resizing or just using script?

Answer 1

If I understand it right (not an UI expert here), you want to set the anchor to right side (1), and use margin to offset with pixel amount. Anchors use relative measure, margins absolute, so if your screen gets wider, all the distances from anchors get wider too.

Comments

So I need a script that determines the screen size and sets it to the margin?

---

That depends on how your window settings are defined. If stretch mode is 2D or Viewport, logical resolution remains the same, so no need to adjust sizes apart from different aspect ratios. If it's disabled, then pixels are real device pixels and you might need to adjust for higher resolution displays to prevent UI becoming too small.

---

Sorry, I have an mistake in my comment above. I meant the window size and not the screen size.

For my 1st problem I found this solution:

All nodes are anchored on the left, and for the messages I wrote, I determine the window size Vector2.x, subtract the label size Vector2.x, and put this value as label position Vector2.x .

Do you think this is a good solution?
Would this work with the diffrent window sizes on a mobile?

Currently my stretch setting is disabeled. (If I change the window size it is stretching my UI to fit in the box ( tested on a PC))

Video