UE5 - Basic tree view tutorial

Hi! The main thing that creates the visual distinction between levels is adding padding to children elements (proportional to how deep they are inside the tree). You can see how I did this through BP in section 4 of the tutorial, but TLDR: I store a Depth value for each entry, then multiply that by a fixed amount of 50 and set the left padding of the entry accordingly.

Some other considerations!

  • The background image is small (width = 32), but set to fill in its horizontal alignment. This way it will stretch out and use the whole space of the tree. If the image is too big, setting the padding too high might cause the whole entry to shift out of the expected slot and look funky. Scaling a small image to a bigger space is more predictable and works better!
  • If you want to use a texture instead of a solid colour for the background image, set the Draw As option as Box and try to keep the actual image size relatively small.
  • The Horizontal Box used for the inner contents follows the same rule, it’s set to fill horizontally so it stretches dynamically.

I hope this helped! Let me know if you have any other questions :slight_smile: