I’m making the 2D GUI for my game, and I’m running into a problem with weird Z-Index behavior. Look at the following images:
Down at the bottom right of the screen, you see the touch buttons for various functions. Crouch, Crawl, Sprint, Zoom, and Reload. Now when I zoom in on the rifle scope, almost everything disappears behind the image mask.
The Z-Index behavior for all screen GUIs is set to global, and the image mask in question has a Z-Index of -16300 while the buttons have a Z-Index starting at 16300 and going up from there. The only real difference is that the GUI that renders the buttons is created on the fly using my own implementation of Roblox’s ContextActionService (I made my own implementation because I found the limit of 7 defined actions to be too constraining.). Every aspect of the GUI works except this.
Yes, I have made the mast transparent and the buttons are there. I don’t think I can use CanvasGroup because the buttons are rendered on demand based on user input and what weapon they are holding, powerups active, etc… I’ll try adjusting the zindex in explorer and see what that does.
@Prototrode I tried your #3 option: No effect.
As mentioned before to your reference to #2, if I uncheck the visibility at runtime, the buttons are there in their correct positions.
@Neuroticxs I tried it both ways and no effect. The buttons are still hidden.
Hmm… I’ll try to check myself, I also have mobile buttons implemented and have a black screen effect on the whole screen and it wasn’t getting hidden. I’ll check back.
How are you defining your buttons? I’m using my own implementation of ContextActionService so the buttons are created and destroyed on the fly as needed. Even the ScreenGui is created on the fly as needed. I wonder if that has something to do with it. What’s interesting though is that the other GUI elements show up. But those are on a different ScreenGui.
FYI: This isn’t the first time that I had a problem like this.
Then while play testing live I created a ScreenGui on the PlayerGui
and set:
DisplayOrder: -1
ZindexBehavior: Sibling or Global (works both)
ScreenInsets: DeviceSafeInsets (just to get a full coverage ignoring the Roblox GUI insets when I put a frame in it)
A full blackscreen without covering the core gui buttons and the CAS print button I created.
One thing I think you haven’t tried and I assume you have these buttons together with the mask on one ScreenGui Container. Try putting it in a separate container and play around with the DisplayOrder of the Screen Gui.
It looks like the issue is related to the Z-Index values of the elements in your GUI. Z-Index determines the order in which elements are rendered on the screen, with elements having a higher Z-Index being rendered on top of those with a lower Z-Index.
In your case, the image mask has a very low negative Z-Index, while the buttons have very high positive Z-Index values. When you zoom in on the rifle scope, it appears that the scope image and mask are being rendered on top of the buttons, effectively hiding them from view.
To fix this issue, you could try adjusting the Z-Index values of the elements in your GUI. You may want to increase the Z-Index value of the image mask to be closer to the Z-Index values of the buttons. This should ensure that the buttons are always rendered on top of the image mask.
Alternatively, you could try rearranging the order in which the elements are created and added to the GUI. In general, you want to create and add elements with lower Z-Index values before those with higher Z-Index values. This should ensure that elements with higher Z-Index values are always rendered on top of those with lower Z-Index values.
Lastly, you could consider using a different approach to rendering your GUI elements altogether. For example, you could try using a different GUI container or layout, or using a different method for creating and adding your GUI elements to the screen. This may require some experimentation to find the best approach for your specific needs.
