Move UI/Canvas with player object

Hello,

I am trying to find a way, to move the UI, that has the buttons mobile joystick etc. with player. I have the player moving no problem, but not sure how to move the canvas, I currently have 2 canvases… maybe this is not the right approach… but its 3d, as I want to do a top down mobile game, and 1 canvas is for the background objects, and the 2nd canvas was going to be for the UI/player and player object… I set the Background canvas as: Render Mode - Screen Space - Camera render camera is the main camera
the Player canvas/UI is also set as Render Mode - Screen Space - Camera render camera is the main camera

maybe or should i put the Background canvas as World Space? here is my code for moving the player, but probably and not sure what object type to use to move the canvas:

    public Joystick joyStick;
    private Vector3 velocity;
    public float fastSpeed;// = 5.0f;
    public float slowSpeed;// = 1.0f;

    void Update()
    {
        input = new Vector2(joyStick.Horizontal, joyStick.Vertical).normalized;

        velocity = new Vector2(0, 0);

        if (joyStick.Direction.magnitude >= 0.90f && Currentstamina >= staminaMin && maxedoutStamina == false)  // fast
        {
            velocity = input.normalized * fastSpeed;           
        }
        else if (joyStick.Direction.magnitude >= 0.90f && maxedoutStamina == true) //Slow due to No Stamina?
        {
            velocity = input.normalized * slowSpeed;
        }
        else if (joyStick.Direction.magnitude >= 0.09f)  // slow
        {
            velocity = input.normalized * slowSpeed;

        }
        else
        {
            velocity = new Vector2(0, 0);
        }

    }


    private void FixedUpdate()
    {
        if (joyStick.Direction.magnitude >= 0.33f) //Fast
        {
            //Move character FAST
            animalrd.MovePosition(animalrd.position + velocity * fastSpeed * Time.fixedDeltaTime);
            //playerCanvas.
        }
        else if (joyStick.Direction.magnitude >= 0.01f) //Slow
        {

            //Move character SLOW
            animalrd.MovePosition(animalrd.position + velocity * slowSpeed * Time.fixedDeltaTime);
        }
        else
        {
            animalrd.MovePosition(animalrd.position + velocity * Time.fixedDeltaTime);
        }

    }

any help would be appreciated :slight_smile:

I’m not sure I understand completely. I assume you have UI buttons that your player hits to move the player character?

If so, Screen space overlay might be what you want. This would draw the UI stuff over everything else, no matter the camera. You don’t want that with your background though.

I’m not understanding your scene layout. What are you trying to move the background for? A UI background might not even be the best option.

Also, I’m assuming this is for mobile?

Hey Really sorry for the confusion, but thanks for taking the time to assist so here is my object layout so far:

I do have PlayerCanvas now set to Screen Overlay, and the background Canvas set to World Space… but not sure C# wise how i can say “Move canvas that also has my player” since the player object is part of the canvas and I think that should be able to move it, right or maybe wrong?

8668068--1167462--1143588-6b829266a71f8729344c44c5a88050d4.png

Sorry, but I’m unclear on why you want to move your canvas.

If your buttons are overlay, they should be on their own canvas. They wouldn’t ever have to move. But hitting a button should move just your player. Why are you needing to move the canvas?

Is your player a 3d model or a 2d image/sprite? I see you have some attacks or something under the canvas.

If you need a canvas that moves, you’d have to use world space. This way you could set your canvas over your players head or something.

You will want a canvas just for your UI. You’ll probably want a canvas for the background image, but this might be better as a sprite depending on your setup. And you can have one for your player.

For your player though, if it’s not an image, it doesn’t need a canvas. I think I need to understand what you are trying to move with the player if it’s a 3D model.

in short,I have a 3d mobile game, and its going to be top down, and I want to of course, see my buttons move with the player, as right now, the player moves using the mobile joystick, however the canvas/UI doesnt move and follow the player…

GOAL: I want to move the UI along with the player.

I did set the PlayerCanvas (See screen shot from previous post) to World Space, but i think the Mobile joystick doesnt like that, as its acting weird when trying to use it… example, If i even click on it, the joystick head just quick darts to the top right hand corner, even though I am click on the bottom left hand side…

but if I set the player canvas to either Screen space - camera OR Screen space -overlay, the joystick works fine…

Why do you want your controller to be with your player? As an overlay it’s always drawn on top and you can anchor it to the sides.

You don’t need your player on the canvas if it’s not a UI component object.

1 Like

Hello And thank you for all your replies, so sorry, maybe i didnt explain in detail. I was looking to achieve a top down 3d game, but the only reason I wanted to do a top down 3d game was so I can give the player the ability to jump. it was when I ran into a technique or feature that can be accomplished in 2d (easy to program and manage)

so it sorta his with a little trick, but I get it now thanks again Brathnann for your patience and explanation on the UI compnenent.