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.

Screen shot of flat text buttons

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#
 1"""
 2Example code showing how to create a button,
 3and the three ways to process button events.
 4
 5If Python and Arcade are installed, this example can be run from the command line with:
 6python -m arcade.examples.gui_flat_button
 7"""
 8import arcade
 9import arcade.gui
10
11# --- Method 1 for handling click events,
12# Create a child class.
13import arcade.gui.widgets.buttons
14import arcade.gui.widgets.layout
15
16
17class QuitButton(arcade.gui.widgets.buttons.UIFlatButton):
18    def on_click(self, event: arcade.gui.UIOnClickEvent):
19        arcade.exit()
20
21
22class MyView(arcade.View):
23    def __init__(self):
24        super().__init__()
25
26        # --- Required for all code that uses UI element,
27        # a UIManager to handle the UI.
28        self.ui = arcade.gui.UIManager()
29
30        # Create a vertical BoxGroup to align buttons
31        self.v_box = arcade.gui.widgets.layout.UIBoxLayout(space_between=20)
32
33        # Create the buttons
34        start_button = arcade.gui.widgets.buttons.UIFlatButton(
35            text="Start Game", width=200
36        )
37        self.v_box.add(start_button)
38
39        settings_button = arcade.gui.widgets.buttons.UIFlatButton(
40            text="Settings", width=200
41        )
42        self.v_box.add(settings_button)
43
44        # Again, method 1. Use a child class to handle events.
45        quit_button = QuitButton(text="Quit", width=200)
46        self.v_box.add(quit_button)
47
48        # --- Method 2 for handling click events,
49        # assign self.on_click_start as callback
50        start_button.on_click = self.on_click_start
51
52        # --- Method 3 for handling click events,
53        # use a decorator to handle on_click events
54        @settings_button.event("on_click")
55        def on_click_settings(event):
56            print("Settings:", event)
57
58        # Create a widget to hold the v_box widget, that will center the buttons
59        ui_anchor_layout = arcade.gui.widgets.layout.UIAnchorLayout()
60        ui_anchor_layout.add(child=self.v_box, anchor_x="center_x", anchor_y="center_y")
61
62        self.ui.add(ui_anchor_layout)
63
64    def on_show_view(self):
65        self.window.background_color = arcade.color.DARK_BLUE_GRAY
66        # Enable UIManager when view is shown to catch window events
67        self.ui.enable()
68
69    def on_hide_view(self):
70        # Disable UIManager when view gets inactive
71        self.ui.disable()
72
73    def on_click_start(self, event):
74        print("Start:", event)
75
76    def on_draw(self):
77        self.clear()
78        self.ui.draw()
79
80
81if __name__ == '__main__':
82    window = arcade.Window(800, 600, "UIExample", resizable=True)
83    window.show_view(MyView())
84    window.run()