Hover Effect - UQcsse3200/2024-studio-2 GitHub Wiki

Description

The addButtonElevationEffect method adds a visual hover effect to a specified TextButton. When the user hovers over the button, it slightly elevates and enlarges to indicate interactivity. When the cursor moves away, the button smoothly returns to its original size and position.

Importance

• It adds brilliance to the UI scheme.
• Improves the feedback interface for the user.

Parameters

• button (TextButton): The button to which the hover effect will be applied.

Behavior

• Hover Initialization: The button moves up by 5 pixels and scales up by 5% when the mouse cursor enters its area.

• Hover Exit: The button moves back down to its original position and size when the cursor leaves the button area.

Code Implementation (com/csse3200/game/components/mainmenu/MainMenuDisplay.java)

private void addButtonElevationEffect(TextButton button) {
    button.addListener(new ClickListener() {
        @Override
        public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor) {
            button.addAction(Actions.parallel(
                    Actions.moveBy(0, 5, 0.1f),
                    Actions.scaleTo(1.05f, 1.05f, 0.1f)
            ));
            //logger.info("Hover feature activated"); uncomment this if you want to check hover feature
        }

        @Override
        public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
            button.addAction(Actions.parallel(
                    Actions.moveBy(0, -5, 0.1f),
                    Actions.scaleTo(1f, 1f, 0.1f)
            ));
        }
    });
}