kaplay-ui 0.20.7 → 0.20.8
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 +108 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,22 +8,17 @@ _A simple and customizable UI plugin library for building interfaces in https://
|
|
|
8
8
|
|
|
9
9
|
Kaplay UI provides a game‑oriented **UI plugin** designed specifically for KAPLAY.
|
|
10
10
|
|
|
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.8`) is being replaced by a complete redesign.
|
|
15
|
+
>
|
|
15
16
|
> A new **v1** version is under active development and can be installed in prerelease form (see below).
|
|
16
17
|
|
|
17
18
|
---
|
|
18
19
|
|
|
19
20
|
## 📦 Installation
|
|
20
21
|
|
|
21
|
-
### Stable release
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install kaplay-ui
|
|
25
|
-
```
|
|
26
|
-
|
|
27
22
|
### Prerelease (new v1 work)
|
|
28
23
|
|
|
29
24
|
```bash
|
|
@@ -36,9 +31,9 @@ This gives you the latest `1.0.0‑alpha.*` builds.
|
|
|
36
31
|
|
|
37
32
|
## 🚀 Usage
|
|
38
33
|
|
|
39
|
-
Kaplay UI exports a plugin for adding UI Game Objects.
|
|
34
|
+
**Kaplay UI** exports a plugin for adding UI Game Objects.
|
|
40
35
|
|
|
41
|
-
The plugin is exported from the package root:
|
|
36
|
+
The `kaplayUI` plugin is exported from the package root:
|
|
42
37
|
|
|
43
38
|
```ts
|
|
44
39
|
import kaplay from "kaplay";
|
|
@@ -47,36 +42,127 @@ import kaplayUI from "kaplay-ui";
|
|
|
47
42
|
const k = kaplay({
|
|
48
43
|
plugins: [kaplayUI],
|
|
49
44
|
});
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
You now have access to the UI helpers via your `k` instance:
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
const btn = k.addTextButton("Play", 200, 100);
|
|
51
|
+
const label = k.addLabel("Score: 0");
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## 🧩 Game Objects (_**1.0.0‑alpha.\* version**_)
|
|
57
|
+
|
|
58
|
+
### 🔤 **Text Button** (`addTextButton()`)
|
|
59
|
+
|
|
60
|
+
Creates a button-like GameObj with centered text and some convenient defaults.
|
|
61
|
+
|
|
62
|
+
#### _**Signature**_
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
addTextButton(
|
|
66
|
+
txt?: string,
|
|
67
|
+
width?: number,
|
|
68
|
+
height?: number
|
|
69
|
+
): GameObj
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
#### _**Default values**_
|
|
50
73
|
|
|
74
|
+
| Parameter | Default |
|
|
75
|
+
| --------- | ---------- |
|
|
76
|
+
| `txt` | `"Button"` |
|
|
77
|
+
| `width` | `200` |
|
|
78
|
+
| `height` | `100` |
|
|
79
|
+
|
|
80
|
+
#### _**Default styling**_
|
|
81
|
+
|
|
82
|
+
When created, the button includes:
|
|
83
|
+
|
|
84
|
+
- k.outline(3)
|
|
85
|
+
- k.pos(0, 0)
|
|
86
|
+
- k.anchor("topleft")
|
|
87
|
+
- k.area() — for click/hover detection
|
|
88
|
+
|
|
89
|
+
#### _**Examples**_
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
// Default button
|
|
93
|
+
const btn1 = k.addTextButton();
|
|
94
|
+
|
|
95
|
+
// Custom label
|
|
96
|
+
const btn2 = k.addTextButton("Start");
|
|
97
|
+
|
|
98
|
+
// Custom size
|
|
99
|
+
const btn3 = k.addTextButton("Start", 150, 75);
|
|
100
|
+
|
|
101
|
+
// Add interactivity
|
|
102
|
+
btn2.onClick(() => {
|
|
103
|
+
console.log("Button clicked!");
|
|
104
|
+
});
|
|
51
105
|
```
|
|
52
106
|
|
|
53
107
|
---
|
|
54
108
|
|
|
55
|
-
|
|
109
|
+
### 🏷️ **Label** (`addLabel()`)
|
|
56
110
|
|
|
57
|
-
|
|
111
|
+
A lightweight text-based UI element — ideal for HUD counters, tooltips, status text, or titles.
|
|
58
112
|
|
|
59
|
-
|
|
113
|
+
#### _**Signature**_
|
|
60
114
|
|
|
61
115
|
```ts
|
|
62
|
-
|
|
63
|
-
|
|
116
|
+
addLabel(
|
|
117
|
+
txt: string,
|
|
118
|
+
width: number
|
|
119
|
+
height: number
|
|
120
|
+
)
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### _**Default values**_
|
|
124
|
+
|
|
125
|
+
| Parameter | Default |
|
|
126
|
+
| --------- | ------- |
|
|
127
|
+
| `txt` | `""` |
|
|
128
|
+
| `width` | `160` |
|
|
129
|
+
| `height` | `96` |
|
|
130
|
+
|
|
131
|
+
#### _**Examples**_
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
// Default button
|
|
135
|
+
const lbl1 = k.addLabel();
|
|
64
136
|
|
|
65
|
-
//
|
|
66
|
-
const
|
|
137
|
+
// Basic label
|
|
138
|
+
const lbl2 = k.addLabel("Score: 0");
|
|
67
139
|
|
|
68
|
-
//
|
|
69
|
-
const
|
|
140
|
+
// Custom size
|
|
141
|
+
const lbl3 = k.addLabel("Start", 100, 50);
|
|
70
142
|
|
|
71
|
-
//
|
|
72
|
-
|
|
143
|
+
// Update label text example
|
|
144
|
+
let score = 0;
|
|
145
|
+
const scoreLabel = k.addLabel(`Score: ${score}`);
|
|
146
|
+
|
|
147
|
+
k.wait(2, () => {
|
|
148
|
+
score++;
|
|
149
|
+
scoreLabel.children[0].text = `Score: ${score}`;
|
|
150
|
+
});
|
|
73
151
|
```
|
|
74
152
|
|
|
153
|
+
#### _**Common use cases**_
|
|
154
|
+
|
|
155
|
+
- HUD overlays
|
|
156
|
+
- Score counters
|
|
157
|
+
- Time and health displays
|
|
158
|
+
- UI section headings
|
|
159
|
+
- Tooltips and indicators
|
|
160
|
+
|
|
75
161
|
---
|
|
76
162
|
|
|
77
163
|
## 🛣️ Roadmap
|
|
78
164
|
|
|
79
|
-
|
|
165
|
+
_See evolving roadmap at: https://github.com/jbakchr/kaplay-ui/blob/v1/ROADMAP.md_
|
|
80
166
|
|
|
81
167
|
---
|
|
82
168
|
|