This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

UI Interaction

How to work with GS_Play UI interaction — motion-based button animations and input interception for focused canvases.

UI Interaction covers two systems that handle player input at the UI layer: enhanced buttons with motion-based hover and select animations, and the input interceptor that captures input events while a canvas is focused.

For component properties and the full API, see the Framework API reference.

 

Contents

Buttons

GS_ButtonComponent in the O3DE Inspector

GS_ButtonComponent extends LyShine’s interactable system with UiAnimationMotion support. When the player hovers over a button (mouse or gamepad navigation), a configurable animation plays. When the button is selected, a separate animation fires. Both animations use .uiam assets, giving full control over position, scale, rotation, alpha, and color transitions.

Setup

  1. Add a LyShine UiButtonComponent (or other interactable) to your entity.
  2. Add GS_ButtonComponent to the same entity.
  3. Author .uiam assets for hover, unhover, and select states.
  4. Assign the assets to the corresponding fields in the Inspector.

Integration with Page Focus

When page navigation moves focus to a button (via keyboard or gamepad), the button treats focus as a hover event and plays its hover animation. This ensures consistent visual feedback regardless of input method.

Input Interception

UI Input Interceptor coponent in the O3DE Asset Editor

GS_UIInputInterceptorComponent prevents input from leaking to gameplay systems while a UI canvas is active. It uses a GS_UIInputProfile asset to define which input channels to intercept. Intercepted events are re-broadcast on UIInputNotificationBus so UI-specific logic can respond to them.

When the canvas loses focus, the interceptor deactivates automatically and input flows normally back to gameplay.

Setup

  1. Add GS_UIInputInterceptorComponent to the root page entity.
  2. Configure a GS_UIInputProfile asset with the channels to intercept.
  3. Connect to UIInputNotificationBus in any component that should respond to intercepted events.

Integration

Buttons and input interception work together on interactive canvases:

  • The input interceptor blocks gameplay input while a menu is open.
  • Buttons provide visual hover/select feedback driven by UIInputNotificationBus events.
  • The page system routes gamepad focus to the correct button automatically.

Glossary

TermMeaning
GS_ButtonComponentAn enhanced button with GS_Motion-based hover and select animations
Hover AnimationA .uiam motion that plays when the button receives focus or mouse hover
Select AnimationA .uiam motion that plays when the button is activated
GS_UIInputInterceptorComponentComponent that captures input events while a canvas is focused
GS_UIInputProfileData asset defining which input channels to intercept

For full definitions, see the Glossary.

See Also

For the full API, component properties, and C++ extension guide:

For related systems:

Get GS_UI

GS_UI — Explore this gem on the product page and add it to your project.

1 - Buttons

Redirected — button documentation is now part of UI Interaction.

GS_ButtonComponent is an enhanced button that adds GS_Motion-based animations for hover and select states. For the full guide, see The Basics: UI Interaction.

For component properties and API details, see the Framework API reference.

 

GS_ButtonComponent in the O3DE Inspector

Contents

How It Works

The GS_ButtonComponent connects to LyShine’s interactable notification system. When the interactable reports a hover event, the button plays its hover animation. When it reports an unhover event, the animation reverses or stops. Select works the same way.

Animations are defined as .uiam assets and assigned in the Inspector. Each button can have independent hover and select motions.

Integration with Page Focus

When page navigation moves focus to a button (via keyboard or gamepad), the button treats focus as a hover event and plays its hover animation. This ensures consistent visual feedback regardless of input method.

Handling Button Events

Button Events nodes in the Script Canvas

Glossary

TermMeaning
GS_ButtonComponentAn enhanced button with GS_Motion-based hover and select animations
Hover AnimationA .uiam motion that plays when the button receives focus or mouse hover
Select AnimationA .uiam motion that plays when the button is activated

For full definitions, see the Glossary.

See Also

For the full API, component properties, and C++ extension guide:

For related systems:

Get GS_UI

GS_UI — Explore this gem on the product page and add it to your project.