Help on UI Please???

UI UGUI
1

Hi, my name is Tate.

I am having an issue that I for some reason cannot fix - If I had a ring image in a canvas, and a bunch of circles inside the ring image, when I scale the ring to fit the canvas, the circles don’t stay inside the ring in their correct position! I have tried literally everything I know about anchor-points, but it still fails… I have a video to show my problem if my description is not very good…

2

@Tbaumer2

Hi Tate,

I think I at least see your problem, not sure if I can provide solution without opening Unity…

(I bet you have to maybe learn a bit more about Unity UI too)

You’ve setup your Parent RectTransform that has the Image component with ring image to stretch, and then you have compensated this stretch (circle turning to oval) by checking “Preserve Aspect Ratio” (at 0:19).

Now, when you originally setup your canvas element layout, your screen aspect ratio must have been the one we see in start of video.

When you change the aspect ratio to horizontal style, your RectTransform with ring will stretch, and child component positions will move relative amount along stretch (think parent RT as UV space), but image stays like it is (because of Preserve Aspect Ratio.

There’s nothing in UI system that would move child transforms somehow relative to image, child elements are where they should be, although your setup might visually trick one to think something else.

3

One thing you can do is create a panel that is the size of your Ring Image to keep your circles relative to.

Create a new panel, and give it a Content Size Fitter, and a Horizontal Layout Panel. The layout panel is just to allow this new panel to get the Min/Preferred sizes from children. Make the Ring Object a child of the new panel. You’ll need to give your Ring Image a Layout Element with a min size defined, and set the Content Size Fitter to scale with min size. That should give you a parent panel that is the same size as the image. You can then make your circle objects children of the new panel and they should layout correctly.

4

@LiterallyJeff @eses Thank you!

1 Like
5

@LiterallyJeff is there a way that you can edit my scene and show me what you mean? It isn’t quite working for me… I can send it to you if you wish?

6

Yeah sure, i wont be able to look at it for like 3 or 4 hours though when i get home. You can PM me a link to download it.

7

@LiterallyJeff I don’t have a GITHUB account or anything… Would you be willing to pm me your email?

8

@Tbaumer2 in case this wasn’t sorted out yet, these forums allow PMs; click on jeff’s name above the adorable kitteh pic on the left of the thread to open the “quick profile” and “start a conversation”, you can attach the unitypackage there.

9

@LeftyRighty thanks, but I figured it out :slight_smile:

10

@Tbaumer2

care to share the solution?

IHMO, it’s always nice gesture to share the solution or at least outline how you went about solving your problem…

1 Like
11

Still figuring it out, but I’ll be sure to share when I find one!

12

I can send you the files and see of you can get a solution?

13

@Tbaumer2

nope, I don’t get files from the Internets very often like that. But it’s Friday and that question is good, I try to answer it, I got the impression you already solved it, sorry for that!

Actually layout components wont do any good for you as they wont by default scale their children, they just mostly resize themselves, or like GridLayoutGroup does, re-position and resize child items. But AFAIK there isn’t any component to keep relative positions, like I already mentioned, which would be needed for dots.

I think that easiest solution is to scale your container item (ring or container size of it) to either width or height of screen RectTransform. Set it up so that it’s nicely size with scale of (1,1,1) on your default screen layout, then do something like this:

  void Update ()
  {
  // Update fields
  canvasWidth = canvas.GetComponent<RectTransform>().rect.width;
  canvasHeight = canvas.GetComponent<RectTransform>().rect.height;
  ringContainerWidth = GetComponent<RectTransform>().rect.width;
  ringContainerHeight = GetComponent<RectTransform>().rect.height;

  // Set container size
  if (canvasWidth < canvasHeight)
  {
  ringContainerRtra.localScale = Vector3.one * canvasWidth / ringContainerWidth;
  }
  else
  {
  ringContainerRtra.localScale = Vector3.one * canvasHeight / ringContainerHeight;
  }
  }

This will just scale the ring container, it does not change it’s RectTransform width - thus having some GO Text/Image components or such as children, would scale them too, but you could make a more elaborate setup, where dots are just placeholders (nulls/markers) for actual 1,1,1 scale objects that you would snap there.

Here’s how it would look:
https://dl.dropboxusercontent.com/u/17399934/Unity_videos/20160805_Unity_scale_to_fit.mp4

1 Like
14

@eses Thanks for the answer, but type of reference is ringContainerRtra?

15

Actually, I think I figured it out! Thank you so much @eses !!!

1 Like