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
|
# Menus
The menus are stored in Menus directory in the package. The game will scan all the menus automatically. The structure for the menu is as follows:
``` JSON
{
"Contents": <element>
}
```
# General concepts
## Weight
In the grid elements the elements fill all the free space evenly by default. To add or reduce the part of the screen occupied by an element you can use the "Weight" param of the element. All the element have this property.
The weight is not normalized and can be added or reduced without it adding one to 1.
## Background element
Some components allow you to use another element as a background. If not specified, the default style background is used.
## Style
If the style is specified in the schema you can add a style. The schema for it is as follows:
``` JSON
{
"BackgroundColor": string,
"FontColor": string,
"Padding": number,
"Roundness" number
}
```
The color string is presented in HEX CSS-style color. Padding is calulated in fractions of a screen where 1 is the entire screen. Roundness is a raylib parameter used in a DrawRectangleRounded. Read more on that in their documentation.
You can partially override default style with the rest of the properies filling the unspecified fields
# Elements
As you can see, the root of the menu contains nothing but a single element by default. You can fill it with the following elements:
### NOTE: Some elements reference the \<element\> tag. It means that the element is nested and can reference any of the tags specified.
## Grid row
The grid row is a list of horizontal elements stacked together and works like CSS's `display: flex`. The schema for this is as follows:
``` JSON
{
"Type": "gridrow",
"Weight": number,
"Style": <style> | null,
"BackgroundElement": <element> | null,
"Spacing": number,
"Children": <element>[]
}
```
Default style:
``` JSON
{
"BackgroundColor": "#00000000",
"FontColor": "#828282",
"Padding": 0,
"Roundness": 0
}
```
## Grid column
The grid column is a list of verical elements stacked together and works like CSS's `display: flex; flex-direction: column`. The schema for this is as follows:
``` JSON
{
"Type": "gridcolumn",
"Weight": number,
"Style": <style> | null,
"BackgroundElement": <element> | null,
"Spacing": number,
"Children": <element>[]
}
```
Default style:
``` JSON
{
"BackgroundColor": "#00000000",
"FontColor": "#828282",
"Padding": 0,
"Roundness": 0
}
```
## Void
The empty element. Use to create blanks. The schema is as follows:
``` JSON
{
"Type": "void",
"Weight": number
}
```
## Label
An element containing a text. The schema is as follows:
``` JSON
{
"Type": "label",
"Text": string,
"Weight": number,
"Style": <style> | null,
"BackgroundElement": <element> | null
}
```
Default style:
``` JSON
{
"BackgroundColor": "#c8c8c8",
"FontColor": "#828282",
"Padding": 0.1,
"Roundness": 0.2
}
```
## Image
An image containing a texture. To specify the texture you have to load it in the package and query accordingly. The schema is as follows:
``` JSON
{
"Type": "image",
"Weight": number,
"Style": <style> | null,
"TextureName": string
}
```
|
