Flat Text Buttons

For an introduction the GUI system, see GUI Concepts.

The arcade.gui.UIFlatButton is a simple button with a text label. It doesn’t have any three-dimensional look to it.

There are three ways to process button click events:

1. Create a class with a parent class of arcade.UIFlatButton and implement a method called on_click.

2. Create a button, then set the on_click attribute of that button to equal the function you want to be called.

3. Create a button. Then use a decorator to specify a method to call when an on_click event occurs for that button.

This code shows each of the three ways above. Code should pick ONE of the three ways and standardize on it though-out the program. Do NOT write code that uses all three ways.

gui_flat_button.py

"""
Example code showing how to create a button,
and the three ways to process button events.

If Python and Arcade are installed, this example can be run from the command line with:
python -m arcade.examples.gui_flat_button
"""
import arcade
import arcade.gui

# --- Method 1 for handling click events,
# Create a child class.
import arcade.gui.widgets.buttons
import arcade.gui.widgets.layout


class QuitButton(arcade.gui.widgets.buttons.UIFlatButton):
    def on_click(self, event: arcade.gui.UIOnClickEvent):
        arcade.exit()


class MyView(arcade.View):
    def __init__(self):
        super().__init__()
        # --- Required for all code that uses UI element,
        # a UIManager to handle the UI.
        self.ui = arcade.gui.UIManager()

        # Create a vertical BoxGroup to align buttons
        self.v_box = arcade.gui.widgets.layout.UIBoxLayout(space_between=20)

        # Create the buttons
        start_button = arcade.gui.widgets.buttons.UIFlatButton(
            text="Start Game", width=200
        )
        self.v_box.add(start_button)

        settings_button = arcade.gui.widgets.buttons.UIFlatButton(
            text="Settings", width=200
        )
        self.v_box.add(settings_button)

        # Again, method 1. Use a child class to handle events.
        quit_button = QuitButton(text="Quit", width=200)
        self.v_box.add(quit_button)

        # --- Method 2 for handling click events,
        # assign self.on_click_start as callback
        start_button.on_click = self.on_click_start

        # --- Method 3 for handling click events,
        # use a decorator to handle on_click events
        @settings_button.event("on_click")
        def on_click_settings(event):
            print("Settings:", event)

        # Create a widget to hold the v_box widget, that will center the buttons
        ui_anchor_layout = arcade.gui.widgets.layout.UIAnchorLayout()
        ui_anchor_layout.add(child=self.v_box, anchor_x="center_x", anchor_y="center_y")

        self.ui.add(ui_anchor_layout)

    def on_show_view(self):
        self.window.background_color = arcade.color.DARK_BLUE_GRAY
        # Enable UIManager when view is shown to catch window events
        self.ui.enable()

    def on_hide_view(self):
        # Disable UIManager when view gets inactive
        self.ui.disable()

    def on_click_start(self, event):
        print("Start:", event)

    def on_draw(self):
        self.clear()
        self.ui.draw()


if __name__ == '__main__':
    window = arcade.Window(800, 600, "UIExample", resizable=True)
    window.show_view(MyView())
    window.run()

See arcade.gui.UIBoxLayout and arcade.gui.UIAnchorLayout for more information about positioning the buttons. For example, this change to line 31:

self.v_box = arcade.gui.widgets.layout.UIBoxLayout(space_between=20, vertical=False);

and to line 60:

ui_anchor_layout.add(child=self.v_box,
                     anchor_x="left",
                     anchor_y="bottom",
                     align_x=10,
                     align_y=10);

in the code above will align the buttons horizontally and anchor them to the bottom left of the window with 10px margins.