1use macroquad::prelude::*;
2
3use macroquad::ui::{hash, root_ui, widgets, Skin};
4
5#[macroquad::main("UI showcase")]
6async fn main() {
7 let skin1 = {
8 let font = load_ttf_font("examples/ui_assets/HTOWERT.TTF")
9 .await
10 .unwrap();
11 let label_style = root_ui()
12 .style_builder()
13 .with_font(&font)
14 .unwrap()
15 .text_color(Color::from_rgba(180, 180, 120, 255))
16 .font_size(30)
17 .build();
18
19 let window_style = root_ui()
20 .style_builder()
21 .background(
22 Image::from_file_with_format(
23 include_bytes!("../examples/ui_assets/window_background.png"),
24 None,
25 )
26 .unwrap(),
27 )
28 .background_margin(RectOffset::new(20.0, 20.0, 10.0, 10.0))
29 .margin(RectOffset::new(-20.0, -30.0, 0.0, 0.0))
30 .build();
31
32 let button_style = root_ui()
33 .style_builder()
34 .background(
35 Image::from_file_with_format(
36 include_bytes!("../examples/ui_assets/button_background.png"),
37 None,
38 )
39 .unwrap(),
40 )
41 .background_margin(RectOffset::new(37.0, 37.0, 5.0, 5.0))
42 .margin(RectOffset::new(10.0, 10.0, 0.0, 0.0))
43 .background_hovered(
44 Image::from_file_with_format(
45 include_bytes!("../examples/ui_assets/button_hovered_background.png"),
46 None,
47 )
48 .unwrap(),
49 )
50 .background_clicked(
51 Image::from_file_with_format(
52 include_bytes!("../examples/ui_assets/button_clicked_background.png"),
53 None,
54 )
55 .unwrap(),
56 )
57 .with_font(&font)
58 .unwrap()
59 .text_color(Color::from_rgba(180, 180, 100, 255))
60 .font_size(40)
61 .build();
62
63 let editbox_style = root_ui()
64 .style_builder()
65 .background_margin(RectOffset::new(0., 0., 0., 0.))
66 .with_font(&font)
67 .unwrap()
68 .text_color(Color::from_rgba(120, 120, 120, 255))
69 .color_selected(Color::from_rgba(190, 190, 190, 255))
70 .font_size(50)
71 .build();
72
73 Skin {
74 editbox_style,
75 window_style,
76 button_style,
77 label_style,
78 ..root_ui().default_skin()
79 }
80 };
81
82 let skin2 = {
83 let font = load_ttf_font("examples/ui_assets/MinimalPixel v2.ttf")
84 .await
85 .unwrap();
86 let label_style = root_ui()
87 .style_builder()
88 .with_font(&font)
89 .unwrap()
90 .text_color(Color::from_rgba(120, 120, 120, 255))
91 .font_size(25)
92 .build();
93
94 let window_style = root_ui()
95 .style_builder()
96 .background(
97 Image::from_file_with_format(
98 include_bytes!("../examples/ui_assets/window_background_2.png"),
99 None,
100 )
101 .unwrap(),
102 )
103 .background_margin(RectOffset::new(52.0, 52.0, 52.0, 52.0))
104 .margin(RectOffset::new(-30.0, 0.0, -30.0, 0.0))
105 .build();
106
107 let button_style = root_ui()
108 .style_builder()
109 .background(
110 Image::from_file_with_format(
111 include_bytes!("../examples/ui_assets/button_background_2.png"),
112 None,
113 )
114 .unwrap(),
115 )
116 .background_margin(RectOffset::new(8.0, 8.0, 8.0, 8.0))
117 .background_hovered(
118 Image::from_file_with_format(
119 include_bytes!("../examples/ui_assets/button_hovered_background_2.png"),
120 None,
121 )
122 .unwrap(),
123 )
124 .background_clicked(
125 Image::from_file_with_format(
126 include_bytes!("../examples/ui_assets/button_clicked_background_2.png"),
127 None,
128 )
129 .unwrap(),
130 )
131 .with_font(&font)
132 .unwrap()
133 .text_color(Color::from_rgba(180, 180, 100, 255))
134 .font_size(40)
135 .build();
136
137 let checkbox_style = root_ui()
138 .style_builder()
139 .background(
140 Image::from_file_with_format(
141 include_bytes!("../examples/ui_assets/checkbox_background.png"),
142 None,
143 )
144 .unwrap(),
145 )
146 .background_hovered(
147 Image::from_file_with_format(
148 include_bytes!("../examples/ui_assets/checkbox_hovered_background.png"),
149 None,
150 )
151 .unwrap(),
152 )
153 .background_clicked(
154 Image::from_file_with_format(
155 include_bytes!("../examples/ui_assets/checkbox_clicked_background.png"),
156 None,
157 )
158 .unwrap(),
159 )
160 .build();
161
162 let editbox_style = root_ui()
163 .style_builder()
164 .background(
165 Image::from_file_with_format(
166 include_bytes!("../examples/ui_assets/editbox_background.png"),
167 None,
168 )
169 .unwrap(),
170 )
171 .background_margin(RectOffset::new(2., 2., 2., 2.))
172 .with_font(&font)
173 .unwrap()
174 .text_color(Color::from_rgba(120, 120, 120, 255))
175 .font_size(25)
176 .build();
177
178 let combobox_style = root_ui()
179 .style_builder()
180 .background(
181 Image::from_file_with_format(
182 include_bytes!("../examples/ui_assets/combobox_background.png"),
183 None,
184 )
185 .unwrap(),
186 )
187 .background_margin(RectOffset::new(4., 25., 6., 6.))
188 .with_font(&font)
189 .unwrap()
190 .text_color(Color::from_rgba(120, 120, 120, 255))
191 .color(Color::from_rgba(210, 210, 210, 255))
192 .font_size(25)
193 .build();
194
195 Skin {
196 window_style,
197 button_style,
198 label_style,
199 checkbox_style,
200 editbox_style,
201 combobox_style,
202 ..root_ui().default_skin()
203 }
204 };
205 let default_skin = root_ui().default_skin().clone();
206
207 let mut window1_skin = skin1.clone();
208 let mut window2_skin = skin2.clone();
209
210 let mut checkbox = false;
211 let mut text = String::new();
212 let mut number = 0.0f32;
213 let mut combobox = 0;
214
215 loop {
216 clear_background(GRAY);
217
218 root_ui().group(hash!(), vec2(70.0, 100.0), |ui| {
219 ui.label(None, "Window 1");
220
221 if ui.button(None, "Skin 1") {
222 window1_skin = skin1.clone();
223 }
224 if ui.button(None, "Skin 2") {
225 window1_skin = skin2.clone();
226 }
227 if ui.button(None, "No Skin") {
228 window1_skin = default_skin.clone();
229 }
230 });
231 root_ui().same_line(0.);
232 root_ui().group(hash!(), vec2(70.0, 100.0), |ui| {
233 ui.label(None, "Window 2");
234 if ui.button(None, "Skin 1") {
235 window2_skin = skin1.clone();
236 }
237 if ui.button(None, "Skin 2") {
238 window2_skin = skin2.clone();
239 }
240 if ui.button(None, "No Skin") {
241 window2_skin = default_skin.clone();
242 }
243 });
244
245 root_ui().push_skin(&window1_skin);
246
247 root_ui().window(hash!(), vec2(20., 250.), vec2(300., 300.), |ui| {
248 widgets::Button::new("Play")
249 .position(vec2(65.0, 15.0))
250 .ui(ui);
251 widgets::Button::new("Options")
252 .position(vec2(40.0, 75.0))
253 .ui(ui);
254
255 widgets::Button::new("Quit")
256 .position(vec2(65.0, 195.0))
257 .ui(ui);
258 });
259 root_ui().pop_skin();
260
261 root_ui().push_skin(&window2_skin);
262 root_ui().window(hash!(), vec2(250., 20.), vec2(500., 250.), |ui| {
263 ui.checkbox(hash!(), "Checkbox 1", &mut checkbox);
264 ui.combo_box(
265 hash!(),
266 "Combobox",
267 &["First option", "Second option"],
268 &mut combobox,
269 );
270 ui.input_text(hash!(), "Text", &mut text);
271 ui.drag(hash!(), "Drag", None, &mut number);
272
273 widgets::Button::new("Apply")
274 .position(vec2(80.0, 150.0))
275 .ui(ui);
276 widgets::Button::new("Cancel")
277 .position(vec2(280.0, 150.0))
278 .ui(ui);
279 });
280 root_ui().pop_skin();
281
282 next_frame().await;
283 }
284}