kaplay-ui 0.20.13 → 0.20.15
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 +26 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ Kaplay UI provides a game‑oriented **UI plugin** designed specifically for KAP
|
|
|
11
11
|
For now it helps you build Game Objects like text buttons and labels — without reinventing the wheel.
|
|
12
12
|
|
|
13
13
|
> ⚠️ **Note**
|
|
14
|
-
> The currently published stable version (`0.20.
|
|
14
|
+
> The currently published stable version (`0.20.15`) is being replaced by a complete redesign.
|
|
15
15
|
>
|
|
16
16
|
> A new **v1** version is under active development and can be installed in prerelease form (see below).
|
|
17
17
|
|
|
@@ -82,13 +82,13 @@ addTextButton(
|
|
|
82
82
|
|
|
83
83
|
#### _**Default styling**_
|
|
84
84
|
|
|
85
|
-
| Comps
|
|
86
|
-
|
|
|
87
|
-
| `button anchor` | `"topleft"` |
|
|
88
|
-
| `button color` | `200, 200, 200` |
|
|
89
|
-
| `button outline color` | `92, 91, 91` |
|
|
90
|
-
| `text anchor`
|
|
91
|
-
| `
|
|
85
|
+
| Comps | Values |
|
|
86
|
+
| --------------------------- | :-------------- |
|
|
87
|
+
| `button base anchor` | `"topleft"` |
|
|
88
|
+
| `button base color` | `200, 200, 200` |
|
|
89
|
+
| `button base outline color` | `92, 91, 91` |
|
|
90
|
+
| `button text anchor` | `"center"` |
|
|
91
|
+
| `buttontext color` | `0, 0, 0` |
|
|
92
92
|
|
|
93
93
|
#### _**Examples**_
|
|
94
94
|
|
|
@@ -99,12 +99,15 @@ const btn1 = k.addTextButton("Play!");
|
|
|
99
99
|
// Custom button by opts parameter
|
|
100
100
|
const btn2 = k.addTextButton("Play!", { posX: 300, posY: 200 });
|
|
101
101
|
|
|
102
|
-
// Customize
|
|
102
|
+
// Customize button base by `use()`
|
|
103
103
|
btn2.use(k.color(150, 150, 150));
|
|
104
104
|
|
|
105
|
+
// Customize button text by `use()`
|
|
106
|
+
btn2.children[0].text = "Go!";
|
|
107
|
+
|
|
105
108
|
// Add interactivity
|
|
106
109
|
btn2.onClick(() => {
|
|
107
|
-
|
|
110
|
+
k.go("game");
|
|
108
111
|
});
|
|
109
112
|
```
|
|
110
113
|
|
|
@@ -129,18 +132,19 @@ addLabel(
|
|
|
129
132
|
| --------- | ------- |
|
|
130
133
|
| `width` | `160` |
|
|
131
134
|
| `height` | `96` |
|
|
135
|
+
| `posX` | `0` |
|
|
136
|
+
| `posY` | `0` |
|
|
137
|
+
| `opacity` | `0.7` |
|
|
132
138
|
| `txtSize` | `22` |
|
|
133
139
|
|
|
134
140
|
#### _**Default styling**_
|
|
135
141
|
|
|
136
|
-
| Comps
|
|
137
|
-
|
|
|
138
|
-
| `label
|
|
139
|
-
| `label
|
|
140
|
-
| `label
|
|
141
|
-
| `label anchor`
|
|
142
|
-
| `text color` | `255, 255, 255` |
|
|
143
|
-
| `text anchor` | `"center"` |
|
|
142
|
+
| Comps | Values |
|
|
143
|
+
| ------------------- | :-------------- |
|
|
144
|
+
| `label base color` | `0, 0,0 ` |
|
|
145
|
+
| `label base anchor` | `"topleft"` |
|
|
146
|
+
| `label text color` | `255, 255, 255` |
|
|
147
|
+
| `label text anchor` | `"center"` |
|
|
144
148
|
|
|
145
149
|
#### _**Examples**_
|
|
146
150
|
|
|
@@ -151,9 +155,12 @@ const lbl1 = k.addLabel("Score: 0");
|
|
|
151
155
|
// Custom label by opts parameter
|
|
152
156
|
const lbl2 = k.addLabel("Start", { width: 100, height: 50 });
|
|
153
157
|
|
|
154
|
-
// Customize label
|
|
158
|
+
// Customize label base by `use()`
|
|
155
159
|
lbl2.use(k.color(150, 150, 150));
|
|
156
160
|
|
|
161
|
+
// Customize label text by `use()`
|
|
162
|
+
lbl2.children[0].text = "Coins: 100";
|
|
163
|
+
|
|
157
164
|
// Update label text example
|
|
158
165
|
let score = 0;
|
|
159
166
|
const scoreLabel = k.addLabel(`Score: ${score}`);
|