Move UI object in Canvas with different resolutions

Question

I have an UI element that I want to move up and down. My canvas scaler was set to Constant Pixel Size and when I used this piece of code.

uiElement.transform.position = Vector3.MoveTowards(uiElement.transform.position, new Vector3(uiElement.transform.position.x, 128, 0), 256 * Time.deltaTime);

It worked perfectly fine, it moved the UI to that position and even on different resolutions and also on mobile res. Unfortunately the UI element didn't scale at all and was still the same and on mobile it was really hard to see it.

So I changed canvas scaler to Scale With Screen Size and now the UI perfectly changes on different resolutions on PC and on mobile. But that line of code for moving UI element no longer works as it should. On different resolutions it moves that UI element differently to different positions. Any help with that?

Answer 1

I had a similar problem where I had to move a UI button when the user switched between skins in the skin shop and on different resolutions it moved the button to different positions. The code looked like this:

skinBbuttons.transform.position= new Vector3(skinBbuttons.transform.position.x - 1000f, skinBbuttons.transform.position.y, skinBbuttons.transform.position.z);

The problem was that i was using transform.position instead of transform.localPosition, so I changed the code to:

skinBbuttons.transform.localPosition = new Vector3(skinBbuttons.transform.localPosition.x - 1000f, skinBbuttons.transform.localPosition.y, skinBbuttons.transform.localPosition.z);

In your case the code would look like this: uiElement.transform.localPosition= Vector3.MoveTowards(uiElement.transform.localPosition, new Vector3(uiElement.transform.localPosition.x, 128, 0), 256 * Time.deltaTime);

I can't guarantee that this will solve your problem but it worked for me.

Move UI object in Canvas with different resolutions

1 Reply

Your answer

Follow this Question

Related Questions