s&box

Enabling Pointer Events

Whether the cursor is visible and whether your panels can be clicked/hovered is controlled by the css property pointer-events

Default

By default your panels are not clickable. If you spawn them as part of your HUD cursor is hidden and the mouse input goes to the game.

To interact with the UI you need to enable pointer events on your panel or one of its ancestors.

Example

So say you want to have a spawnmenu type UI panel in your hud.

public partial class SpawnMenu : Panel { public static SpawnMenu Instance; }

By default you'll have it hidden.

spawnmenu { opacity: 0; }

This is fine. Then you'll probably have something like this in your player tick

SpawnMenu.Instance?.SetClass( "open", Input.Down( InputButton.Menu ) );

This is looking for the spawnmenu instance, if it's not null and the button "InputButton.Menu" is down, it adds the class "open" to the panel. If it's not down it removes the class.

So now you need to update the stylesheet so that if the spawnmenu has the class "open" it'll be visible.

spawnmenu { opacity: 0; &.open { opacity: 1; } }

This works. Now your spawnmenu becomes visible while you're holding down the menu button.

But you want the cursor to become visible and be able to interact with the menu. We can do that.

spawnmenu { opacity: 0; &.open { opacity: 1; pointer-events: all; } }

What if you want it the opposite? What if you want the menu always visible unless you're holding down the menu key? Well you could just change the SetClass code above by adding a ! in front of the Input, but you could also do it purely via the stylesheets.

spawnmenu { opacity: 1; pointer-events: all; &.open { opacity: 0; pointer-events: none; } }

Page Links


Special Pages


Wikis

?

Render Time: 16ms

DB GetPage 3
Generate Html 2
SaveChanges (1) 8
Render Body 0
Render Sidebar 0