Move an image with Lerp

Unity Engine
1

Hello all, this is my first post.

What I’m trying to do is to create a “Menu Screen” that automatically appears from behind when the mouse enter in an area. I’m using a Canvas with the image, in “Screen Space - Camera” mode. I already created an “Event Trigger” and my code starts correctly.
The problem is the movement. I tried using the Animator before, but as far as I know, I can’t use the “Pointer Enter” or “Pointer Exit” events (If I can please, tell me).
So, I’m using the Vector3.Lerp. What I am trying to move is the “Transform” of the Image, but the results are unexpected.

    public void SubeMenu(){

        StartPos = Menu.GetComponent<Transform>().position;
        EndPos = StartPos + Vector3.up * moveDistance;
        currentLerpTime += Time.deltaTime;
        float perc = currentLerpTime / LerpTime;
        Menu.GetComponent<Transform>().position = Vector3.Lerp(StartPos, EndPos, perc);
    }
    public void BajaMenu()
    {
        StartPos = Menu.GetComponent<Transform>().position;
        EndPos = StartPos + Vector3.down * moveDistance;     
        currentLerpTime += Time.deltaTime;
        float perc = currentLerpTime / LerpTime;
        Menu.GetComponent<Transform>().position = Vector3.Lerp(StartPos, EndPos, perc);
    }

As you can see, there is code to raise the menu and a similar code to get it down. When the imagen goes up, it is desplaced at a different distance that when it goes down. It doesn’t return to the initial position.

Two questions:

  1. What is happening?
  2. When I move the image manually I change the x, y, z in the “RectTransform” component. But, what is this “Transform.position” I’m changing by script?

Thank you

2

#2: RectTransform is transform with some other variables, too. Position, in your case, can be the same, but I believe the values you see in the inspector are for anchored position (which confused me for a while). That being said, they do both share the same ‘position’.
What are the results you’re seeing? I think, to lerp, you need to run it in an update/Coroutine, because it won’t finish in 1 frame.

3

What I see is first (Pointer Enter event) the Image going up a distance, and then (Pointer Exit event) the Image goes down a bigger distance so the image ends at a lower position than the original.

I placed several “debug.log” to print the StartPos and the EndPos, and I realized that is the Canvas what is moving, does it make sense? The “Menu” variable (line 4 and 12) is a public variable. What I did is drag the Image to the variable (see the screenshot attached) to connect it to the Script, but I didn’t connect the Canvas, so why is this happening?

You’re right about the update/coroutine, the movement is made instantly, in one frame I guess.

Thanks for your help.

3023693--225953--Captura.JPG

4

If you really want it to slide, you do have to have some routine to make it move over time. Perhaps toggling that on from the pointer enter/exit events (on a script that’s on the menu).
As for why you’re seeing a difference in movement, is maybe because your delta time (per frame time), is a little different, and because your script is not executing the travel over time, it takes just the 1 delta value in its calculation (could have varied results per execution, in other words).

5

Thank you methos5k. Finally I gave up trying to do this with the “pointer enter” event trigger and I did it with a button. I read that the event triggers must be used as the last option. This is the code to Lerp to the right with a click in a button:

public class CodigoBoton : MonoBehaviour {
    public Button miBoton;
    public Image miFondo;
    bool Moviendo = false;
    float perc;
    float LerpTime = 2f;
    float CurrentLerpTime;
    float moveDistance = 0.15f;
    private Vector3 StartPos;
    private Vector3 EndPos;

    // Use this for initialization
    public void Start () {
        miBoton.onClick.AddListener(haciendoLerp);
    }
   
    // Update is called once per frame
    public void haciendoLerp () {
        StartPos = miFondo.GetComponent<Transform>().position;
        EndPos = StartPos + Vector3.right * moveDistance;
        Moviendo = true;
    }
    private void Update()
    {
        if (Moviendo == true)
        {
                CurrentLerpTime += Time.deltaTime;
                if (CurrentLerpTime > LerpTime)
                {
                    CurrentLerpTime = LerpTime;
                }
                perc = CurrentLerpTime / LerpTime;
                miFondo.transform.position = Vector3.Lerp(StartPos, EndPos, perc);
            if (perc == 1)
            {
                Moviendo = false;
                CurrentLerpTime = 0f;
            }
        }
    }
}

I still don’t know how to use this when the pointer enters in an area, but I’ll keep searching.
Thanks!

6

Sorry, it’s been a while since your first post & communication, so I’m a little rusty here. I’m glad you got it kinda working.
Just a thought, eventually I hope you are comfortable with the events :slight_smile: A button simply incorporates several different interfaces and provides user friendly options, etc…
Anyhow, as for a thought/suggestion for pointer entering the area.
Can you maybe, now that you have the movement working okay, simply link the pointer enter to that same function? :slight_smile:
Simply add the interface “IPointerEnter” I think it’s called, after “MonoBehaviour” in the class declaration, and then implement it (the IDE you use should have a means to fill in the starting text for you automatically). Inside there, simply call the same function you would have done with the button click.
Unless you simply keep it this way, and that’s cool , too :slight_smile: Good luck & have fun