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
12# --- Method 1 for handling click events,
13# Create a child class.
14import arcade.gui.widgets.buttons
15import arcade.gui.widgets.layout
16
17
18class QuitButton(arcade.gui.widgets.buttons.UIFlatButton):
19    def on_click(self, event: arcade.gui.UIOnClickEvent):
20        arcade.exit()
21
22
23class MyWindow(arcade.Window):
24    def __init__(self):
25        super().__init__(800, 600, "UIFlatButton Example", resizable=True)
26
27        # --- Required for all code that uses UI element,
28        # a UIManager to handle the UI.
29        self.manager = arcade.gui.UIManager()
30        self.manager.enable()
31
32        # Set background color
33        arcade.set_background_color(arcade.color.DARK_BLUE_GRAY)
34
35        # Create a vertical BoxGroup to align buttons
36        self.v_box = arcade.gui.widgets.layout.UIBoxLayout(space_between=20)
37
38        # Create the buttons
39        start_button = arcade.gui.widgets.buttons.UIFlatButton(
40            text="Start Game", width=200
41        )
42        self.v_box.add(start_button)
43
44        settings_button = arcade.gui.widgets.buttons.UIFlatButton(
45            text="Settings", width=200
46        )
47        self.v_box.add(settings_button)
48
49        # Again, method 1. Use a child class to handle events.
50        quit_button = QuitButton(text="Quit", width=200)
51        self.v_box.add(quit_button)
52
53        # --- Method 2 for handling click events,
54        # assign self.on_click_start as callback
55        start_button.on_click = self.on_click_start
56
57        # --- Method 3 for handling click events,
58        # use a decorator to handle on_click events
59        @settings_button.event("on_click")
60        def on_click_settings(event):
61            print("Settings:", event)
62
63        # Create a widget to hold the v_box widget, that will center the buttons
64        ui_anchor_layout = arcade.gui.widgets.layout.UIAnchorLayout()
65        ui_anchor_layout.add(child=self.v_box, anchor_x="center_x", anchor_y="center_y")
66
67        self.manager.add(ui_anchor_layout)
68
69    def on_click_start(self, event):
70        print("Start:", event)
71
72    def on_draw(self):
73        self.clear()
74        self.manager.draw()
75
76
77window = MyWindow()
78arcade.run()