2

I have an UI image that is parented to a RectTransform container, which is parented to a UI panel, which is parented to a Canvas.

I want to be able to move this UI image to the center of the screen (ie. canvas) while leaving the parenting hierarchy. My goal is to animate the UI image from the center to where it is now. Can you please let me know what this code would look like?

enter image description here

IHateATMFees
  • 346
  • 3
  • 11
  • 1
    Little confused on what you are asking. Are you trying to position the cell in the center prior to starting your application? – ryeMoss Jul 25 '17 at 18:16
  • @ryemoss, when the scene loads, I want the cell to start in the center of the screen (along with hundreds of others), and then I will animate the cells out to their intended positions. The UICell position in the screenshot inspectors show where I want the destination to be. – IHateATMFees Jul 25 '17 at 18:20
  • 1
    is there a reason you have placed the parent objects at those particular x and y locations? Where doe the UICell end up if you set all of their positions to (0,0)? – ryeMoss Jul 25 '17 at 20:43
  • @ryemoss i made another screenshot that I hope better explains why I'm placing things where. Thank you. https://imgur.com/a/GvEfM – IHateATMFees Jul 25 '17 at 21:58

2 Answers2

2

To answer your original question, you can place the UICell at the center of the screen using:

private RectTransform rect;

void Start() 
{
    rect = GetComponent<RectTransform>();
    rect.position = Camera.main.ScreenToWorldPoint(new Vector3(Screen.width / 2, Screen.height / 2, 10));
}

There are then several ways to move the cell to the desired destination. One method would be to use Vector2.Lerp. However, due the nature of your rectangular transform parental hierarchy, things will get a little complicated with the positioning - below is an example of how you could accomplish the movement.

float t;

void Update()
{
    t += Time.deltaTime;
    rect.localPosition = Vector2.Lerp(rect.localPosition, new Vector2(0, 0), t/3f);
}
ryeMoss
  • 4,303
  • 1
  • 15
  • 34
  • Unfortunately it looks like the first snippet places the UICell at the bottom left corner of the screen/canvas – IHateATMFees Jul 26 '17 at 11:34
  • 1
    Can you change the canvas render mode to `Screen space - camera`? – ryeMoss Jul 26 '17 at 12:04
  • hmm..I'm using an orthographic camera that never moves, so I think I can, will try tonight. thank you. – IHateATMFees Jul 26 '17 at 12:28
  • thanks for help, while this didn't get me there, made me think of something that did: change parenting of UICell to the canvas, set to the middle, then then change the parenting back. Will post as a separate answer. Apologies for not awarding you fake internet points, I owe you a beer. – IHateATMFees Jul 26 '17 at 22:16
1

What ended up working was changing the parent of the UI Image to the canvas, move the UI image to the middle of the canvas (ie. screen), and reinstate the original UI Image parent relationship. From there, I just needed to animate to the original local position.

var rectTransform = gameObject.GetComponent<RectTransform>();
var canvasRendererRectTransform = gameObject.transform.parent.parent.parent.GetComponent<RectTransform>();

rectTransform.SetParent(canvasRendererRectTransform);
rectTransform.localPosition = Camera.main.ScreenToViewportPoint(Vector3.one * 0.5f);
rectTransform.SetParent(gridRendererRectTransform);
IHateATMFees
  • 346
  • 3
  • 11