Unity UI inventory: hotspots labels misplaced
Hello all,
I recently refactored my inventory from AC to Unity UI following this guide. Everything works great, except for one thing.
My "hotspot" label is configured to appear on top of each hotspot instead of following the cursor during gameplay. This worked seamlessly in the inventory as well as long as I used the AC version: Video
But as soon as I switched to the Unity UI version, the hotspot label appears in the bottom left corner of the screen while hovering on inventory items: Video
The hotspot is stuck to the lower left corner, but somehow moves around few pixels depending on which inventory item I'm hovering. This made me suspect the issue may be related to the canvas scaler, but I'm not experienced enough to form a proper diagnosis.
This is the configuration of my hotspot menu:
![](https://i.imgur.com/f2nvo5t.png"")
And this is how I set up the inventory prefab, including the canvas scaler. When editing it in a scene the "render camera" is assigned to the main camera:
![](https://imgur.com/Mji5HIQ.png"")
If there's no other way I could probably disable this hotspot while in the inventory and create a new one that follows the cursor, but if there's a chance to enforce consistency I would take it.
thanks!
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
We should be able to get things working, but I'll need some more details to know the situation more fully.
To help isolate the issue, what is the behaviour like when hovering over Hotspots? Is the Hotspot label still in the corner, or correctly positioned?
If it's correct, then the issue may be down to the ordering of the Menus in the Menu Manager. The order they appear here also determines the order in which Menus are "processed". You'll want to keep your Hotspot menu - whose appearance depends on the Inventory menu - at the bottom of the stack.
The Hotspot menu's position is set by AC controlling the "RectTransform boundary". The final position, however, is also controlled by Always fit within screen? property, as well as the Auto-correct UI Dimensions component. Does unchecking the option and disabling the component (if present) make any difference?
Hi Chris, thanks for the quick response.
The hotspot label works fine with hotspots in the scene, it only breaks while hovering inventory items (video).
The hotspot label menu was already near the bottom of the stack (after the inventory). I moved it all the way down with no apparent effect.
I also tested with "always fit screen" turned off, with no effect. I didn't have an "auto-correct" component on hotspots or inventory (it's turned off in the screenshot) because I had it working ok without it. However I tried adding it to the hotspot and turning it on on the inventory, and still no difference in the final result.
About the "reactTransform" property, one thing maybe I didn't understand correctly from the guide:
When building the inventory menu, I assigned "linked canvas" to my prefab, obviously, but I'm not sure if "assign the prefab objects, and not the scene-based ones" is also supposed to happen for "rectTransform", and if so, I have no idea how to do it. I assigned the panel from the scene as "rectTransform", is it correct or should I go another way?
I just remembered another thing: in the guide the reference panel (the element later assigned as "reactTransform") is not a parent of the rest of the UI, so I followed the same method for my inventory. For the hotspot though, if I don't parent the label to the reference panel, the label will always appear in the center of the camera (including when using the inventory), instead of on top of the relative hotspot. So I made the label a child of the panel.
When AC repositions a Unity UI menu, it does so by manipulating the supplied "RectTransform boundary" - so this will need to either be a parent of your Text object, or the Text object itself.
Are you having this position issue with the default Hotspot menu? Try copy/pasting the Hotspot menu from the Default_MenuManager asset file - each of the default menus have a Unity UI counterpart that you can enable from the Source option.
I should update the tutorial, thanks for the heads-up. The "RectTransforum boundary" and element UI objects are best assigned by opening the prefab up in Prefab Mode, and then dragging them across. You can still assign by placing it in the scene, though: so long as the Constant IDs are added to the prefab, it doesn't matter how the connections are made.
Yes it happens with the default hotspot menu as well, if I set it to appear on top of the hotspot of course (otherwise it follows the mouse cursor correctly)
Again, as soon as I switch back to the AC inventory though, the hotspot menu (any version) works fine in terms of positioning
(it's hard to see but "my" hotspot is there as well just behind the items, slightly below the default label)
The source of the problem may lie with the Inventory menu, in that case.
What are your AC/Unity versions, and does the issue exist if you also copy over the default Inventory menu in the same way?
Alright, while I was testing with the default menus as you advised, I noticed a difference in how the provided unity UI defaults were set. In my inventory (and all my menus in fact) the prefab canvas component was set with "screen space - camera" instead of "screen space-overlay". with overlay the hotspot seem to be placed in the right position even with the inventory open.
by changing the screen space to overlay to all menus, the canvas "sort order" value and the staking order in ac editor seem to be respected to determine the actual order of the menus in the UI, so now the hotspots appear at the correct XY position and in the correct Z order.
However, there seems to be a problem still, although very specific. The "ignore input" option on the AC editor correctly work for hotspots, subtitles and the like, so that the user can click "through" them into the scene. This doesn't seem the case while interacting within unity UI. In fact, now that the hotspot label is rendered "in front" of the inventory, it partly covers the sprite, and in the area where the sprite is overlapped by the hotspot, interaction won't work on the item.
This isn't a problem specifically of the hotspot: I have another menu opening on top of the inventory, which is to display subtitles while the inventory stays open (eg: items descriptions and the like). this menu is also set with "ignore input", but just like the hotspot, it will prevent clicking on the UI beneath it.
Here's a video demonstrating the correct "click through" in the scene
And here's a video demonstrating the hotspot blocking the interaction with the inventory
(you can see also how the sprite turns slightly brighter when hovering the label, because it loses focus)
This is the order of my menus, I thin it's correct
"ignore input" is set true on: hotspot, inventorySubtitles and subtitles.
InventoryBackdropDrag is something that activates only when an items is selected, so I don't think it's relevant in this scenario
I have AC 1.75.0
Unity 2021.2.14f1
AC won't manually control the drawing order of UI menus. That's determined by the Z position of the Canvas Transform. Though, if they all share the same value, the order in which they're listed will affect the order in which their spawned - so this may factor into things. I'd suggest altering the Z position of any Menu you want to make sure appears atop others.
On your Hotspot UI's Canvas Group, try unchecking both "Interactable" and "Blocks Raycasts".
I don't have a canvas group on either, but disabling the graphic raycaster component did the trick! Z index is already ok as it is, but thanks for clarifying how it works, now I have a better picture.
thanks again for all the help!