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