kaplay-ui 0.20.1 β 0.20.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -207
- package/assets/kaplay-ui-logo.png +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,245 +1,81 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="assets/kaplay-ui-logo.png" alt="kaplay-ui logo" width="400" >
|
|
3
|
+
</p>
|
|
4
4
|
|
|
5
|
-
# KAPLAY UI
|
|
5
|
+
# KAPLAY UI
|
|
6
6
|
|
|
7
|
-
_A simple and customizable
|
|
7
|
+
_A simple and customizable UI plugin library for building interfaces in https://kaplayjs.com/._
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Kaplay UI provides a gameβoriented **UI plugin** designed specifically for KAPLAY.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
It helps you build buttons, menus, controls, HUD elements, input fields, and moreβwithout reinventing the wheel.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
> β οΈ **Note**
|
|
14
|
+
> The currently published stable version (`0.20.1`) is being replaced by a complete redesign.
|
|
15
|
+
> A new **v1** version is under active development and can be installed in prerelease form (see below).
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
---
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
## π¦ Installation
|
|
20
|
+
|
|
21
|
+
### Stable release
|
|
20
22
|
|
|
21
23
|
```bash
|
|
22
24
|
npm install kaplay-ui
|
|
23
25
|
```
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
### Inputs
|
|
28
|
-
|
|
29
|
-
All inputs are imported from the <code>/inputs</code> folder.
|
|
30
|
-
|
|
31
|
-
```javascript
|
|
32
|
-
import {} from "kaplay-ui/inputs";
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
#### Checkbox
|
|
36
|
-
|
|
37
|
-
To make a checkbox, one must use the exported <code>makeCheckbox()</code> function.
|
|
38
|
-
|
|
39
|
-
##### Example
|
|
40
|
-
|
|
41
|
-
An example usage of a checkbox.
|
|
42
|
-
|
|
43
|
-
```javascript
|
|
44
|
-
import kaplay from "kaplay";
|
|
45
|
-
import "kaplay/global";
|
|
46
|
-
|
|
47
|
-
import { makeCheckbox } from "kaplay-ui/inputs";
|
|
48
|
-
|
|
49
|
-
kaplay();
|
|
50
|
-
|
|
51
|
-
const checkBox = makeCheckbox();
|
|
52
|
-
|
|
53
|
-
add(checkBox);
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
##### State
|
|
57
|
-
|
|
58
|
-
A cehckbox has the following state:
|
|
59
|
-
|
|
60
|
-
| state | Type | Default | State change by |
|
|
61
|
-
| --------- | --------- | ------- | ----------------- |
|
|
62
|
-
| `checked` | `boolean` | false | Click on checkbox |
|
|
63
|
-
|
|
64
|
-
##### Parameters
|
|
65
|
-
|
|
66
|
-
A checkbox can take the following parameters:
|
|
67
|
-
|
|
68
|
-
| Parameter | Type | Default | Required | Description |
|
|
69
|
-
| --------- | -------- | ------- | -------- | ------------------- |
|
|
70
|
-
| `x` | `number` | 0 | β No | Checkbox x position |
|
|
71
|
-
| `y` | `number` | 0 | β No | Checkbox x position |
|
|
72
|
-
| `width` | `number` | 25 | β No | Checkbox width |
|
|
73
|
-
| `height` | `number` | 25 | β No | Checkbox height |
|
|
74
|
-
|
|
75
|
-
<br>
|
|
76
|
-
|
|
77
|
-
#### Switch
|
|
78
|
-
|
|
79
|
-
To make a text button, one must use the exported <code>makeSwitch()</code> function.
|
|
80
|
-
|
|
81
|
-
##### Example
|
|
82
|
-
|
|
83
|
-
An example usage of a text button.
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
import kaplay from "kaplay";
|
|
87
|
-
import "kaplay/global";
|
|
88
|
-
|
|
89
|
-
import { makeSwitch } from "kaplay-ui/inputs";
|
|
90
|
-
|
|
91
|
-
kaplay();
|
|
92
|
-
|
|
93
|
-
const switchBtn = makeSwitch();
|
|
94
|
-
|
|
95
|
-
add(switchBtn);
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
##### State
|
|
27
|
+
### Prerelease (new v1 work)
|
|
99
28
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
| state | Type | Default | State change by |
|
|
103
|
-
| ---------- | --------- | ------- | --------------- |
|
|
104
|
-
| `switched` | `boolean` | false | Click on switch |
|
|
105
|
-
|
|
106
|
-
##### Parameters
|
|
107
|
-
|
|
108
|
-
A switch can take the following parameters:
|
|
109
|
-
|
|
110
|
-
| Parameter | Type | Default | Required | Description |
|
|
111
|
-
| --------- | -------- | ------- | -------- | ----------------- |
|
|
112
|
-
| `x` | `number` | 0 | β No | Switch x position |
|
|
113
|
-
| `y` | `number` | 0 | β No | Switch x position |
|
|
114
|
-
| `width` | `number` | 50 | β No | Switch width |
|
|
115
|
-
| `height` | `number` | 25 | β No | Switch height |
|
|
116
|
-
|
|
117
|
-
<br>
|
|
118
|
-
|
|
119
|
-
#### Text Button
|
|
120
|
-
|
|
121
|
-
To make a text button, one must use the exported <code>makeTextButton()</code> function.
|
|
122
|
-
|
|
123
|
-
##### Example
|
|
124
|
-
|
|
125
|
-
An example usage of a text button.
|
|
126
|
-
|
|
127
|
-
```javascript
|
|
128
|
-
import kaplay from "kaplay";
|
|
129
|
-
import "kaplay/global";
|
|
130
|
-
|
|
131
|
-
import { makeTextButton } from "kaplay-ui/inputs";
|
|
132
|
-
|
|
133
|
-
kaplay();
|
|
134
|
-
|
|
135
|
-
const txtBtn = makeTextButton("Start");
|
|
136
|
-
|
|
137
|
-
add(txtBtn);
|
|
29
|
+
```bash
|
|
30
|
+
npm install kaplay-ui@next
|
|
138
31
|
```
|
|
139
32
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
A text button can take the following parameters:
|
|
33
|
+
This gives you the latest `1.0.0βalpha.*` builds.
|
|
143
34
|
|
|
144
|
-
|
|
145
|
-
| ------------ | -------- | ------- | -------- | ---------------------------------- |
|
|
146
|
-
| `text` | `string` | N/A | β
Yes | The text to display on the button. |
|
|
147
|
-
| `x` | `number` | 0 | β No | Button x position |
|
|
148
|
-
| `y` | `number` | 0 | β No | Button y position |
|
|
149
|
-
| `width` | `number` | 100 | β No | Button width |
|
|
150
|
-
| `height` | `number` | 50 | β No | Button height |
|
|
151
|
-
| `btnRadius` | `number` | 8 | β No | Button radius |
|
|
152
|
-
| `btnOutline` | `number` | 1 | β No | Button outline |
|
|
153
|
-
| `txtSize` | `number` | 15 | β No | Text size |
|
|
35
|
+
---
|
|
154
36
|
|
|
155
|
-
|
|
37
|
+
## π Usage
|
|
156
38
|
|
|
157
|
-
|
|
39
|
+
Kaplay UI exports a plugin for adding UI elements.
|
|
158
40
|
|
|
159
|
-
|
|
41
|
+
The plugin is exported from the package root:
|
|
160
42
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
An example usage of a toggle.
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
import kaplay from "kaplay";
|
|
167
|
-
import "kaplay/global";
|
|
168
|
-
|
|
169
|
-
import { makeTextInput } from "kaplay-ui/inputs";
|
|
170
|
-
|
|
171
|
-
kaplay();
|
|
172
|
-
|
|
173
|
-
const txtInput = makeTextInput();
|
|
174
|
-
|
|
175
|
-
add(txtInput);
|
|
43
|
+
```ts
|
|
44
|
+
import kaplayUI from "kaplay-ui";
|
|
176
45
|
```
|
|
177
46
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
A text input can take the following parameters:
|
|
181
|
-
|
|
182
|
-
| Parameter | Type | Default | Required | Description |
|
|
183
|
-
| ---------- | --------- | ------- | -------- | ------------------------------ |
|
|
184
|
-
| `x` | `number` | 0 | β No | x position |
|
|
185
|
-
| `y` | `number` | 0 | β No | y position |
|
|
186
|
-
| `width` | `number` | 400 | β No | width |
|
|
187
|
-
| `txtSize` | `number` | 15 | β No | Input text size |
|
|
188
|
-
| `pad` | `number` | 10 | β No | Padding |
|
|
189
|
-
| `hasFocus` | `boolean` | true | β No | If text input has focus or not |
|
|
47
|
+
---
|
|
190
48
|
|
|
191
|
-
|
|
49
|
+
## 𧩠Game Object (_**will evolve over time**_)
|
|
192
50
|
|
|
193
|
-
|
|
51
|
+
### **Switch**
|
|
194
52
|
|
|
195
|
-
|
|
53
|
+
### **Text Button**
|
|
196
54
|
|
|
197
|
-
|
|
55
|
+
Clickable text-based button:
|
|
198
56
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
```javascript
|
|
202
|
-
import kaplay from "kaplay";
|
|
203
|
-
import "kaplay/global";
|
|
204
|
-
|
|
205
|
-
import { makeToggle } from "kaplay-ui/inputs";
|
|
206
|
-
|
|
207
|
-
kaplay();
|
|
208
|
-
|
|
209
|
-
const toggle = makeToggle();
|
|
210
|
-
|
|
211
|
-
add(toggle);
|
|
57
|
+
```ts
|
|
58
|
+
const txtBtn = addTextButton("Play!", 200, 100);
|
|
212
59
|
```
|
|
213
60
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
A cehckbox has the following state:
|
|
217
|
-
|
|
218
|
-
| state | Type | Default | State change by |
|
|
219
|
-
| --------- | --------- | ------- | --------------- |
|
|
220
|
-
| `toggled` | `boolean` | false | Click on toggle |
|
|
221
|
-
|
|
222
|
-
##### Parameters
|
|
61
|
+
---
|
|
223
62
|
|
|
224
|
-
|
|
63
|
+
## π£οΈ Roadmap
|
|
225
64
|
|
|
226
|
-
|
|
227
|
-
| --------- | -------- | ------- | -------- | ----------------- |
|
|
228
|
-
| `x` | `number` | 0 | β No | Toggle x position |
|
|
229
|
-
| `y` | `number` | 0 | β No | Toggle y position |
|
|
230
|
-
| `width` | `number` | 50 | β No | Toggle width |
|
|
231
|
-
| `height` | `number` | 25 | β No | Toggle height |
|
|
65
|
+
_to be added shortly .._
|
|
232
66
|
|
|
233
|
-
|
|
67
|
+
---
|
|
234
68
|
|
|
235
|
-
## License
|
|
69
|
+
## π License
|
|
236
70
|
|
|
237
|
-
This project is licensed under the MIT License
|
|
71
|
+
This project is licensed under the **MIT License**.
|
|
72
|
+
See the `LICENSE` file for details.
|
|
238
73
|
|
|
239
|
-
|
|
74
|
+
---
|
|
240
75
|
|
|
241
|
-
## Contact
|
|
76
|
+
## π¬ Contact
|
|
242
77
|
|
|
243
|
-
Have questions or suggestions?
|
|
78
|
+
Have questions or suggestions?
|
|
79
|
+
Open an issue on GitHub:
|
|
244
80
|
|
|
245
|
-
-
|
|
81
|
+
π <https://github.com/jbakchr/kaplay-ui>
|
|
Binary file
|