Moving UI Elements

What is the best way to create a UI element that moves on screen as the bananas do in Donkey Kong Country Tropical Freeze?

Video example: https://www.youtube.com/watch?v=JeC4ZlXvgpo

I tried to do it as I would any other game character, with a Vector3 velocity and using transform.Translate(), or rectTransform.localPosition, but both times it seems the gameobject stays still, both inside a canvas and outside.
I am not super knowledgeable about how to use UI the best way, so any and all suggestions are welcome.

what bananas? when collecting them from the level?

There’s probably a whole lot of ways to do this. To move an actual game object, you can just use the transform.position of a UI game object and move your collectable towards that.

Here’s an example doing just that:
CollectableExample.unitypackage (11.4 KB)

Should just need to open the scene and press play. A/D to move, space to jump. Not all best practice but hopefully illustrates the concept.

With a UI element, you would need to take the world position, convert that into the appropriate position for a UI overlay, then move that to where you needed, which would likely be more complicated overall, but would potentially look better.

What the example here does I tried too, but maybe my problem is that I’m using a perspective camera (to show 3D elements properly and make parallax easier) and that makes things more complicated I guess.

I mean my example works with a perspective camera, you just need to set the right plane distance on the camera overlay so it doesn’t look like it’s flying off into the distance or towards the screen.

It’s not really anything to do with whether the camera is perspective or orthographic. It’s just a matter of using the right context of coordinates. My example works using world coordinates. A more UI based approach would likely need to operate in screen coordinates.

Though this is the kind of problem with lots of possible solutions.

I imported and tested your example and it works, however it works as much as my current system works: I spawn a UI object that moves towards the assigned location and once there it deactivates and add 1 to whatever I collected.

What I was trying to achieve is a fancier movement towards the end position. If you look at the video you can see the bananas they collect doing sort of a curve instead of linearly moving towards the counter.

you can look into DotTween for a free solution,

and also search for “homing missiles” on youtube. or tutorials on how to create those bullet hell projectiles. some of them have a similar animation like you want.

I can also suggest this asset that is intended to beautify a game exactly in the area you are searching for, these fancy animations

1 Like

Thank you! I’ll check them out!

I wanted to code it on my own, but I could learn a thing or two from studying these.