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:
Icons are not positioned over their buttons. Even though they are children of the buttons, their positioning is relative to the ActionPanel instead of their individual parents. And thusly all of the icons appear clumped ontop of the same spot, which is the centre of the (very wide) ActionPanel.
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 (and particularly the size) of the buttons, so that all of them are functionally treated like they have the same parameters as the actionPanel (which is their parent)
Just going by the problems (I skipped over most of the background stuff and I’m not at all familiar with LayoutGroups), I have the following suggestion:
Buttons and Toggles and a few other UI elements that are reactive to mouse-hovers have a property called “TargetGraphic”, which is the actual texture used. The texture is in the form of a completely separate child object (named “Background” by default) with an Image component attached. You need to make sure that this is pointing to the individual Background object that’s a child of the button in question, because when you copy/instantiate, the reference is also copied and all 10 buttons will be pointing to 1 graphic object, which is when your second problem occurs.
Hii. I’m afraid that’s definitely not the issue. This hovering problem occurs even when there’s only one button, and it also occurs when hovering over any part of the panel bounding box at all, including transparent pixels
I set the pivot point of my button to 0.5, 0.5, rather than the 0,0 it was at before. This has somehow magically fixed the placement of the child Icon.
I don’t get it, this makes no sense to me. But it seems to be working for now. The problem with not understanding why something works is that i still wont understand it when it breaks again
It sounds odd. Most of the time the LayoutGroup and LayoutElement combination just works. There were a few videos in my signature using it.
But it’s normally pretty simple. Parent has a LayoutGroup. Each child has a LayoutElement. Parameters are configured as appropriate. Everything just works.
You can also put on intermediate GameObjects to help with your layout.
