├── compile.hxml
├── gc.code-workspace
├── haxeui-heaps.properties
├── readme.md
├── res
├── base
│ ├── fnt
│ │ ├── Avdira.fnt
│ │ └── Avdira.png
│ ├── main-view.xml
│ ├── main.css
│ └── test.xml
├── fonts
│ ├── Arial.cfg
│ ├── Arial.fnt
│ ├── Arial.png
│ ├── Avdira.fnt
│ ├── Avdira.png
│ └── arial.ttf
└── gui
│ ├── hud.xml
│ ├── hud_orig.xml
│ ├── indButton.xml
│ ├── init.xml
│ ├── loadGame.xml
│ ├── myTheme
│ ├── fonts
│ │ ├── Arial.fnt
│ │ ├── Arial.png
│ │ ├── Avdira.fnt
│ │ └── Avdira.png
│ ├── images
│ │ ├── Button.png
│ │ ├── flw_corp.png
│ │ ├── haxe_logo.png
│ │ ├── haxeui.png
│ │ ├── heaps_logo.png
│ │ ├── heaps_logo.svg
│ │ ├── icons
│ │ │ └── gc
│ │ │ │ ├── arrow.png
│ │ │ │ ├── folder.png
│ │ │ │ ├── gc_camper.png
│ │ │ │ ├── gc_fun.png
│ │ │ │ ├── gc_lot.png
│ │ │ │ ├── gc_money.png
│ │ │ │ ├── gc_options.png
│ │ │ │ ├── gc_plus.png
│ │ │ │ ├── gc_restroom.png
│ │ │ │ ├── gc_rv.png
│ │ │ │ ├── gc_shower.png
│ │ │ │ ├── gc_swim.png
│ │ │ │ ├── gc_swings.png
│ │ │ │ └── gc_tent.png
│ │ ├── parchment.png
│ │ ├── tent3.png
│ │ ├── white_tent.xcf
│ │ ├── wood_border.png
│ │ └── woodplank.png
│ ├── sounds
│ │ └── cherokee_shuffle.wav
│ └── styles
│ │ ├── buttons.css
│ │ ├── dialog.css
│ │ └── main.css
│ ├── newGame.xml
│ ├── options.xml
│ ├── splash.xml
│ └── start.xml
├── simplescreenrecorder.mp4
└── src
├── Main.hx
├── gui
├── GcFunButton.hx
├── GcLotButton.hx
├── Gui.hx
├── Hud.hx
├── LoadScreen.hx
├── NewScreen.hx
├── OptionsScreen.hx
└── StartMenu.hx
├── module.xml
└── template.hx
/compile.hxml:
--------------------------------------------------------------------------------
1 | -cp src
2 |
3 | -lib heaps
4 | -lib hlsdl
5 | -lib haxeui-core
6 | -lib haxeui-heaps
7 |
8 | -D linux
9 | -D windowSize=1024x768
10 | -D debug
11 | -hl gc.hl
12 | -main Main
13 | --debug
--------------------------------------------------------------------------------
/gc.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "folders": [
3 | {
4 | "path": "."
5 | }
6 | ],
7 | "settings": {}
8 | }
--------------------------------------------------------------------------------
/haxeui-heaps.properties:
--------------------------------------------------------------------------------
1 | haxe.ui.heaps.background.color=0x000000
2 | haxe.ui.theme=myTheme
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # A HaxeUI Basic Gui
2 |
3 | This project is an example of an actual basic gui that I am using in my projects. It is currently targeted for Heaps HashLink but certainly can be easily modified for any other HaxeUI Target.
4 |
5 | ## Features
6 | 1. Animated Initialization screen with logos and music to load shared system items (eg: assets, music, gui items)
7 | 2. Custom Components (HaxeUI)
8 | 3. Directory/File loading example
9 | 4. Options settings
10 | 5. HUD
11 | 6. Themed Styles
12 |
13 | ## Info
14 |
15 | As you look at the scenes hx code, you will see an "@:build". This macro will build the screen for you and has the additional feature of making any component with a defined "id" a variable to be used in the code. No need to do a "findComponent".
16 |
17 | The "custom components" along with the "theme" is defined in the module.xml file. Note: it is important to have the parent theme define unless you are going to define a style for every component used.
18 |
19 | The HUD screen has some additional custom components for indicators used on the expanding menus.
20 |
21 | ## Acknowledgement
22 |
23 | I can not express enough thanks to Ian Harrigan for being patient with me trying to learn HaxeUI. I hope that whatever project you use his library in, you would give him credit for such a great resource to provide the building blocks to our UIs.
--------------------------------------------------------------------------------
/res/base/fnt/Avdira.fnt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/res/base/fnt/Avdira.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredlangva/HaxeUI_Base/af6448289bd911e2623a30e84579d8da6f29a108/res/base/fnt/Avdira.png
--------------------------------------------------------------------------------
/res/base/main-view.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/res/base/main.css:
--------------------------------------------------------------------------------
1 | /*************************************************
2 | ** Main styles
3 | *************************************************/
4 | .component {
5 |
6 | }
7 |
8 | .custom-component {
9 | width: auto;
10 | height: auto;
11 | }
12 |
13 |
14 |
15 | .default-background {
16 | background-color: #61da10;
17 | }
18 |
19 | /*************************************************
20 | ** Container Styles
21 | *************************************************/
22 | .box .hbox .vbox {
23 | width: auto;
24 | height: auto;
25 | padding: 5px 5px;
26 | background-color: #61da10;
27 | }
28 |
29 | /*************************************************
30 | ** Label Styles
31 | *************************************************/
32 | .label {
33 | width: auto;
34 | height: auto;
35 | font-size: 48px;
36 | font-family: Arial, Helvetica, sans-serif;
37 | font-name: "fonts/Avdira.ttf";
38 | color: white;
39 | /* text-align: center; */
40 | }
41 |
42 | /*************************************************
43 | ** Image Styles
44 | *************************************************/
45 | .image {
46 | width: auto;
47 | height: auto;
48 | }
49 |
50 | /*************************************************
51 | ** Specific
52 | *************************************************/
53 |
54 |
55 | #buttonBox {
56 | /* background-color: green;*/
57 | background-image: "images/parchment.png";
58 | background-image-repeat: stretch;
59 | background-color: #61da10;
60 | }
61 |
62 | #splash {
63 | background-image: "../myTheme/images/hong_kong.jpg";
64 | background-image-repeat: stretch;
65 | background-color: #61da10;
66 | }
67 |
68 | #haxelogo {
69 | opacity: 0;
70 | }
71 |
72 | #haxeui {
73 | opacity: 0;
74 | }
75 |
76 | /*************************************************
77 | ** Animations
78 | *************************************************/
79 | @keyframes fade {
80 | 0% {
81 | opacity: 0;
82 | }
83 | 100% {
84 | opacity: 1;
85 | }
86 | }
87 |
88 | .fadeIn {
89 | animation: fade 5s ease 0s 1;
90 | }
91 |
92 | .fadeOut {
93 | animation: fade 2s ease 0s 1 reverse backwards;
94 | }
95 |
96 |
--------------------------------------------------------------------------------
/res/base/test.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/res/fonts/Arial.cfg:
--------------------------------------------------------------------------------
1 | {
2 | "opt": {
3 | "version": "msdf-bmfont-xml v2.5.4",
4 | "outputType": "xml",
5 | "filename": "Arial",
6 | "fontSize": 42,
7 | "textureSize": [
8 | 512,
9 | 256
10 | ],
11 | "texturePadding": 1,
12 | "border": 0,
13 | "distanceRange": 3,
14 | "fieldType": "sdf",
15 | "roundDecimal": 0,
16 | "vector": false,
17 | "smartSize": false,
18 | "pot": false,
19 | "square": false,
20 | "rot": false,
21 | "rtl": false,
22 | "fontFile": "arial.ttf",
23 | "fontSpacing": [
24 | 0,
25 | 0
26 | ],
27 | "fontPadding": [
28 | 1,
29 | 1,
30 | 1,
31 | 1
32 | ],
33 | "textureWidth": 512,
34 | "textureHeight": 256,
35 | "tolerance": 0,
36 | "charset": [
37 | " ",
38 | "!",
39 | "\"",
40 | "#",
41 | "$",
42 | "%",
43 | "&",
44 | "'",
45 | "(",
46 | ")",
47 | "*",
48 | "+",
49 | ",",
50 | "-",
51 | ".",
52 | "/",
53 | "0",
54 | "1",
55 | "2",
56 | "3",
57 | "4",
58 | "5",
59 | "6",
60 | "7",
61 | "8",
62 | "9",
63 | ":",
64 | ";",
65 | "<",
66 | "=",
67 | ">",
68 | "?",
69 | "@",
70 | "A",
71 | "B",
72 | "C",
73 | "D",
74 | "E",
75 | "F",
76 | "G",
77 | "H",
78 | "I",
79 | "J",
80 | "K",
81 | "L",
82 | "M",
83 | "N",
84 | "O",
85 | "P",
86 | "Q",
87 | "R",
88 | "S",
89 | "T",
90 | "U",
91 | "V",
92 | "W",
93 | "X",
94 | "Y",
95 | "Z",
96 | "[",
97 | "\\",
98 | "]",
99 | "^",
100 | "_",
101 | "`",
102 | "a",
103 | "b",
104 | "c",
105 | "d",
106 | "e",
107 | "f",
108 | "g",
109 | "h",
110 | "i",
111 | "j",
112 | "k",
113 | "l",
114 | "m",
115 | "n",
116 | "o",
117 | "p",
118 | "q",
119 | "r",
120 | "s",
121 | "t",
122 | "u",
123 | "v",
124 | "w",
125 | "x",
126 | "y",
127 | "z",
128 | "{",
129 | "|",
130 | "}",
131 | "~"
132 | ]
133 | },
134 | "pages": [
135 | "Arial.png"
136 | ],
137 | "packer": {
138 | "bins": [
139 | {
140 | "width": 512,
141 | "height": 256,
142 | "maxWidth": 512,
143 | "maxHeight": 256,
144 | "freeRects": [
145 | {
146 | "x": 15,
147 | "y": 162,
148 | "width": 19,
149 | "height": 6
150 | },
151 | {
152 | "x": 42,
153 | "y": 109,
154 | "width": 5,
155 | "height": 17
156 | },
157 | {
158 | "x": 34,
159 | "y": 196,
160 | "width": 12,
161 | "height": 12
162 | },
163 | {
164 | "x": 47,
165 | "y": 143,
166 | "width": 12,
167 | "height": 19
168 | },
169 | {
170 | "x": 55,
171 | "y": 0,
172 | "width": 5,
173 | "height": 33
174 | },
175 | {
176 | "x": 59,
177 | "y": 177,
178 | "width": 10,
179 | "height": 19
180 | },
181 | {
182 | "x": 82,
183 | "y": 170,
184 | "width": 2,
185 | "height": 7
186 | },
187 | {
188 | "x": 130,
189 | "y": 67,
190 | "width": 17,
191 | "height": 1
192 | },
193 | {
194 | "x": 141,
195 | "y": 33,
196 | "width": 11,
197 | "height": 1
198 | },
199 | {
200 | "x": 152,
201 | "y": 66,
202 | "width": 21,
203 | "height": 1
204 | },
205 | {
206 | "x": 106,
207 | "y": 203,
208 | "width": 3,
209 | "height": 1
210 | },
211 | {
212 | "x": 126,
213 | "y": 169,
214 | "width": 3,
215 | "height": 1
216 | },
217 | {
218 | "x": 144,
219 | "y": 135,
220 | "width": 4,
221 | "height": 1
222 | },
223 | {
224 | "x": 129,
225 | "y": 202,
226 | "width": 2,
227 | "height": 1
228 | },
229 | {
230 | "x": 148,
231 | "y": 168,
232 | "width": 13,
233 | "height": 1
234 | },
235 | {
236 | "x": 161,
237 | "y": 201,
238 | "width": 25,
239 | "height": 1
240 | },
241 | {
242 | "x": 147,
243 | "y": 100,
244 | "width": 28,
245 | "height": 2
246 | },
247 | {
248 | "x": 173,
249 | "y": 99,
250 | "width": 2,
251 | "height": 3
252 | },
253 | {
254 | "x": 175,
255 | "y": 165,
256 | "width": 13,
257 | "height": 3
258 | },
259 | {
260 | "x": 206,
261 | "y": 124,
262 | "width": 11,
263 | "height": 8
264 | },
265 | {
266 | "x": 245,
267 | "y": 26,
268 | "width": 268,
269 | "height": 7
270 | },
271 | {
272 | "x": 188,
273 | "y": 198,
274 | "width": 29,
275 | "height": 3
276 | },
277 | {
278 | "x": 195,
279 | "y": 190,
280 | "width": 22,
281 | "height": 11
282 | },
283 | {
284 | "x": 268,
285 | "y": 0,
286 | "width": 245,
287 | "height": 200
288 | },
289 | {
290 | "x": 262,
291 | "y": 26,
292 | "width": 251,
293 | "height": 174
294 | },
295 | {
296 | "x": 239,
297 | "y": 200,
298 | "width": 22,
299 | "height": 15
300 | },
301 | {
302 | "x": 131,
303 | "y": 235,
304 | "width": 55,
305 | "height": 22
306 | },
307 | {
308 | "x": 283,
309 | "y": 0,
310 | "width": 230,
311 | "height": 225
312 | },
313 | {
314 | "x": 284,
315 | "y": 0,
316 | "width": 229,
317 | "height": 257
318 | },
319 | {
320 | "x": 209,
321 | "y": 234,
322 | "width": 8,
323 | "height": 6
324 | },
325 | {
326 | "x": 209,
327 | "y": 256,
328 | "width": 304,
329 | "height": 1
330 | },
331 | {
332 | "x": 227,
333 | "y": 97,
334 | "width": 12,
335 | "height": 2
336 | },
337 | {
338 | "x": 234,
339 | "y": 85,
340 | "width": 5,
341 | "height": 14
342 | },
343 | {
344 | "x": 239,
345 | "y": 108,
346 | "width": 274,
347 | "height": 42
348 | },
349 | {
350 | "x": 257,
351 | "y": 26,
352 | "width": 256,
353 | "height": 59
354 | },
355 | {
356 | "x": 255,
357 | "y": 59,
358 | "width": 258,
359 | "height": 26
360 | },
361 | {
362 | "x": 249,
363 | "y": 108,
364 | "width": 264,
365 | "height": 67
366 | },
367 | {
368 | "x": 109,
369 | "y": 236,
370 | "width": 77,
371 | "height": 1
372 | },
373 | {
374 | "x": 113,
375 | "y": 236,
376 | "width": 73,
377 | "height": 21
378 | },
379 | {
380 | "x": 69,
381 | "y": 255,
382 | "width": 24,
383 | "height": 2
384 | },
385 | {
386 | "x": 85,
387 | "y": 237,
388 | "width": 8,
389 | "height": 8
390 | },
391 | {
392 | "x": 249,
393 | "y": 248,
394 | "width": 264,
395 | "height": 9
396 | },
397 | {
398 | "x": 249,
399 | "y": 240,
400 | "width": 12,
401 | "height": 17
402 | },
403 | {
404 | "x": 11,
405 | "y": 243,
406 | "width": 16,
407 | "height": 7
408 | },
409 | {
410 | "x": 41,
411 | "y": 243,
412 | "width": 5,
413 | "height": 14
414 | },
415 | {
416 | "x": 0,
417 | "y": 256,
418 | "width": 27,
419 | "height": 1
420 | },
421 | {
422 | "x": 41,
423 | "y": 256,
424 | "width": 145,
425 | "height": 1
426 | },
427 | {
428 | "x": 217,
429 | "y": 164,
430 | "width": 11,
431 | "height": 1
432 | },
433 | {
434 | "x": 224,
435 | "y": 150,
436 | "width": 4,
437 | "height": 15
438 | },
439 | {
440 | "x": 45,
441 | "y": 67,
442 | "width": 15,
443 | "height": 1
444 | },
445 | {
446 | "x": 59,
447 | "y": 67,
448 | "width": 1,
449 | "height": 8
450 | },
451 | {
452 | "x": 59,
453 | "y": 68,
454 | "width": 11,
455 | "height": 7
456 | },
457 | {
458 | "x": 228,
459 | "y": 188,
460 | "width": 11,
461 | "height": 2
462 | },
463 | {
464 | "x": 235,
465 | "y": 175,
466 | "width": 4,
467 | "height": 15
468 | },
469 | {
470 | "x": 24,
471 | "y": 75,
472 | "width": 18,
473 | "height": 9
474 | },
475 | {
476 | "x": 77,
477 | "y": 136,
478 | "width": 5,
479 | "height": 7
480 | },
481 | {
482 | "x": 84,
483 | "y": 205,
484 | "width": 1,
485 | "height": 6
486 | }
487 | ],
488 | "rects": [],
489 | "options": {
490 | "smart": false,
491 | "pot": false,
492 | "square": false,
493 | "allowRotation": false,
494 | "tag": false,
495 | "exclusiveTag": true,
496 | "border": 0,
497 | "logic": 1
498 | }
499 | }
500 | ]
501 | }
502 | }
--------------------------------------------------------------------------------
/res/fonts/Arial.fnt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
--------------------------------------------------------------------------------
/res/fonts/Arial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredlangva/HaxeUI_Base/af6448289bd911e2623a30e84579d8da6f29a108/res/fonts/Arial.png
--------------------------------------------------------------------------------
/res/fonts/Avdira.fnt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/res/fonts/Avdira.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredlangva/HaxeUI_Base/af6448289bd911e2623a30e84579d8da6f29a108/res/fonts/Avdira.png
--------------------------------------------------------------------------------
/res/fonts/arial.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredlangva/HaxeUI_Base/af6448289bd911e2623a30e84579d8da6f29a108/res/fonts/arial.ttf
--------------------------------------------------------------------------------
/res/gui/hud.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/res/gui/hud_orig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/res/gui/indButton.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/res/gui/init.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/res/gui/loadGame.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
9 |
10 |
11 |
12 |
13 |
14 |