GUI Advanced Buttons

3_buttons.py
1"""Customizing buttons with text & textures.
2
3This example showcases Arcade's range of different built-in button types
4and how they can be used to customize a UI. A UIGridLayout is used to
5arrange buttons.
6
7If Arcade and Python are properly installed, you can run this example with:
8python -m arcade.examples.gui.3_buttons
9"""
10
11from __future__ import annotations
12
13import arcade
14from arcade.gui import (
15 UIAnchorLayout,
16 UIFlatButton,
17 UIGridLayout,
18 UIImage,
19 UIOnChangeEvent,
20 UITextureButton,
21 UITextureToggle,
22 UIView,
23)
24
25
26# Preload textures, because they are mostly used multiple times, so they are not
27# loaded multiple times
28ICON_SMALLER = arcade.load_texture(":resources:gui_basic_assets/icons/smaller.png")
29ICON_LARGER = arcade.load_texture(":resources:gui_basic_assets/icons/larger.png")
30
31TEX_SWITCH_GREEN = arcade.load_texture(":resources:gui_basic_assets/toggle/green.png")
32TEX_SWITCH_RED = arcade.load_texture(":resources:gui_basic_assets/toggle/red.png")
33TEX_RED_BUTTON_NORMAL = arcade.load_texture(":resources:gui_basic_assets/button/red_normal.png")
34TEX_RED_BUTTON_HOVER = arcade.load_texture(":resources:gui_basic_assets/button/red_hover.png")
35TEX_RED_BUTTON_PRESS = arcade.load_texture(":resources:gui_basic_assets/button/red_press.png")
36
37
38class MyView(UIView):
39 def __init__(self):
40 super().__init__()
41 self.background_color = arcade.uicolor.BLUE_PETER_RIVER
42
43 grid = UIGridLayout(
44 column_count=3,
45 row_count=4,
46 size_hint=(0, 0),
47 vertical_spacing=10,
48 horizontal_spacing=10,
49 )
50
51 self.ui.add(UIAnchorLayout(children=[grid]))
52
53 # simple UIFlatButton with text
54 grid.add(UIFlatButton(text="UIFlatButton", width=200), row=0, column=0)
55
56 # UIFlatButton change text placement right
57 flat_with_more_text = UIFlatButton(text="text placed right", width=200)
58 flat_with_more_text.place_text(anchor_x="right")
59 grid.add(flat_with_more_text, row=1, column=0)
60
61 # UIFlatButton change text placement right
62 flat_with_more_text = UIFlatButton(text="text placed top left", width=200)
63 flat_with_more_text.place_text(anchor_x="left", anchor_y="top")
64 grid.add(flat_with_more_text, row=2, column=0)
65
66 # UIFlatButton with icon on the left
67 flat_with_icon_left = UIFlatButton(text="UIFlatButton with icon", width=200)
68 flat_with_icon_left.place_text(align_x=+20)
69 flat_with_icon_left.add(
70 child=UIImage(
71 texture=ICON_LARGER,
72 width=30,
73 height=30,
74 ),
75 anchor_x="left",
76 align_x=10,
77 )
78 grid.add(flat_with_icon_left, row=0, column=1)
79
80 # UIFlatButton with icon on the right
81 flat_with_icon_right = UIFlatButton(text="UIFlatButton with icon", width=200)
82 flat_with_icon_right.place_text(align_x=-20)
83 flat_with_icon_right.add(
84 child=UIImage(
85 texture=ICON_SMALLER,
86 width=30,
87 height=30,
88 ),
89 anchor_x="right",
90 align_x=-10,
91 )
92 grid.add(flat_with_icon_right, row=1, column=1)
93
94 # UIFlatButton with icon on both sides
95 flat_with_icon_right = UIFlatButton(text="UIFlatButton", width=200)
96 flat_with_icon_right.add(
97 child=UIImage(
98 texture=ICON_SMALLER,
99 width=30,
100 height=30,
101 ),
102 anchor_x="left",
103 align_x=10,
104 )
105 flat_with_icon_right.add(
106 child=UIImage(
107 texture=ICON_SMALLER,
108 width=30,
109 height=30,
110 ),
111 anchor_x="right",
112 align_x=-10,
113 )
114 grid.add(flat_with_icon_right, row=2, column=1)
115
116 # UITextureButton
117 texture_button = UITextureButton(
118 text="UITextureButton",
119 width=200,
120 texture=TEX_RED_BUTTON_NORMAL,
121 texture_hovered=TEX_RED_BUTTON_HOVER,
122 texture_pressed=TEX_RED_BUTTON_PRESS,
123 )
124 grid.add(texture_button, row=0, column=2)
125
126 # UITextureButton with icon left
127 texture_button_with_icon_left = UITextureButton(
128 text="UITextureButton",
129 width=200,
130 texture=TEX_RED_BUTTON_NORMAL,
131 texture_hovered=TEX_RED_BUTTON_HOVER,
132 texture_pressed=TEX_RED_BUTTON_PRESS,
133 )
134 texture_button_with_icon_left.add(
135 child=UIImage(
136 texture=ICON_SMALLER,
137 width=25,
138 height=25,
139 ),
140 anchor_x="left",
141 align_x=10,
142 )
143 grid.add(texture_button_with_icon_left, row=1, column=2)
144
145 # UITextureButton with multiline text
146 texture_button_with_icon_left = UITextureButton(
147 text="UITextureButton\nwith a second line",
148 multiline=True,
149 width=200,
150 texture=TEX_RED_BUTTON_NORMAL,
151 texture_hovered=TEX_RED_BUTTON_HOVER,
152 texture_pressed=TEX_RED_BUTTON_PRESS,
153 )
154 texture_button_with_icon_left.place_text(anchor_x="left", align_x=45)
155 texture_button_with_icon_left.add(
156 child=UIImage(
157 texture=ICON_SMALLER,
158 width=25,
159 height=25,
160 ),
161 anchor_x="left",
162 align_x=10,
163 )
164 grid.add(texture_button_with_icon_left, row=2, column=2)
165
166 # UIFlatButtons with toggle
167 texture_button_with_toggle = UIFlatButton(
168 text="Just get crazy now!",
169 width=630,
170 )
171 texture_button_with_toggle.place_text(anchor_x="left", align_x=45)
172 texture_button_with_toggle.add(
173 child=UIImage(
174 texture=ICON_SMALLER,
175 width=25,
176 height=25,
177 ),
178 anchor_x="left",
179 align_x=10,
180 )
181 toggle = texture_button_with_toggle.add(
182 child=UITextureToggle(
183 on_texture=TEX_SWITCH_RED,
184 off_texture=TEX_SWITCH_GREEN,
185 width=60,
186 height=30,
187 ),
188 anchor_x="right",
189 align_x=-10,
190 )
191
192 @toggle.event
193 def on_change(event: UIOnChangeEvent):
194 texture_button_with_toggle.disabled = event.new_value
195
196 grid.add(texture_button_with_toggle, row=3, column=0, column_span=3)
197
198
199def main():
200 window = arcade.Window(800, 600, "GUI Example: Buttons", resizable=True)
201 window.show_view(MyView())
202 window.run()
203
204
205if __name__ == "__main__":
206 main()