Horizontal Layout Group: Oddities with mouseover and positioning.

Ok, here’s my situation. I’m trying to make a dynamic horizontal menu, consisting of several buttons (generally 1-10 at a time) arranged in a row along the bottom of the screen.

I have an object, ActionPanel, which serves as the container for these buttons. The actionPanel has a script to manage things, and a HorizontalLayoutGroup component.

The buttons are added as children, by instantiating a prefab i made. The button object itself consists of two parts. A background (which is identical for all buttons) and an icon, which is unique to each button, and sits ontop of the background. The icon is a Child of the background, it is anchored to centre with all its offsets set to 0. This should make it appear in the middle of the button.

I can add buttons into this arrangement no problem, and the layoutGroup places them in a line like i want. However, two major problems come up:

  1. Icons are not positioned over their buttons. Even though they are children of the buttons, their positioning is relative to the ActionPanel instead. And thusly all of the icons appear clumped ontop of the same spot, which is the centre of the (very wide) ActionPanel.

  2. Mouseover highlight on the buttons does not work properly. I’ve set it to change to a slightly lighter color for any hovered-over button. But this results in ALL of the buttons lighting up, when my mouse is over any part of the actionPanel.

As far as i can tell these problems are caused by the HorizontalLayoutGroup overriding the rectTransform of the buttons, so that all of them are functionally treated like they have the same parameters as the actionPanel (which is their parent)

Can anyone help with this?

If your icons are centered properly, only the Width/Height should be available for adjusting. Pos X and Pos Y should be 0. Click on the icon images, click the Anchor Presets window, then shift-alt-click the middle box, then set the width/height to what you want.

Buttons need an Image component on them to pickup clicks/hovers. Just add an Image (None sprite) to the Button GameObject, then make it’s opacity/alpha 0.