kaplay-ui 0.20.9 → 0.20.11
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 +45 -37
- 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.11`) 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
|
|
|
@@ -29,7 +29,7 @@ This gives you the latest `1.0.0‑alpha.*` builds.
|
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
32
|
-
## 🚀 Usage
|
|
32
|
+
## 🚀 Usage (_1.0.0-alpha.\*_)
|
|
33
33
|
|
|
34
34
|
**Kaplay UI** exports a plugin for adding UI Game Objects.
|
|
35
35
|
|
|
@@ -47,15 +47,15 @@ const k = kaplay({
|
|
|
47
47
|
You now have access to the UI helpers via your `k` instance:
|
|
48
48
|
|
|
49
49
|
```ts
|
|
50
|
-
const btn = k.addTextButton("Play"
|
|
50
|
+
const btn = k.addTextButton("Play");
|
|
51
51
|
const label = k.addLabel("Score: 0");
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
---
|
|
55
55
|
|
|
56
|
-
## 🧩 Game Objects (_**1.0.0‑alpha
|
|
56
|
+
## 🧩 Game Objects (_**1.0.0‑alpha.\***_)
|
|
57
57
|
|
|
58
|
-
### 🔤 **Text Button**
|
|
58
|
+
### 🔤 **Text Button**
|
|
59
59
|
|
|
60
60
|
Creates a button-like GameObj with centered text and some convenient defaults.
|
|
61
61
|
|
|
@@ -63,40 +63,41 @@ Creates a button-like GameObj with centered text and some convenient defaults.
|
|
|
63
63
|
|
|
64
64
|
```ts
|
|
65
65
|
addTextButton(
|
|
66
|
-
txt
|
|
67
|
-
|
|
68
|
-
height?: number
|
|
66
|
+
txt: string,
|
|
67
|
+
opts?: object
|
|
69
68
|
): GameObj
|
|
70
69
|
```
|
|
71
70
|
|
|
72
|
-
#### _**Default values**_
|
|
71
|
+
#### _**Default `opts` parameter values**_
|
|
73
72
|
|
|
74
|
-
| Parameter | Default
|
|
75
|
-
| --------- |
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
73
|
+
| Parameter | Default |
|
|
74
|
+
| --------- | :------ |
|
|
75
|
+
| `width` | `200` |
|
|
76
|
+
| `height` | `100` |
|
|
77
|
+
| `radius` | `10` |
|
|
78
|
+
| `posX` | `0` |
|
|
79
|
+
| `posY` | `0` |
|
|
80
|
+
| `outline` | `3` |
|
|
81
|
+
| `txtSize` | `22` |
|
|
79
82
|
|
|
80
83
|
#### _**Default styling**_
|
|
81
84
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
| Comps | Values |
|
|
86
|
+
| ---------------------- | :-------------- |
|
|
87
|
+
| `button anchor` | `"topleft"` |
|
|
88
|
+
| `button color` | `200, 200, 200` |
|
|
89
|
+
| `button outline color` | `92, 91, 91` |
|
|
90
|
+
| `text anchor` | `"center"` |
|
|
91
|
+
| `text color` | `0, 0, 0` |
|
|
88
92
|
|
|
89
93
|
#### _**Examples**_
|
|
90
94
|
|
|
91
95
|
```ts
|
|
92
|
-
//
|
|
93
|
-
const btn1 = k.addTextButton();
|
|
96
|
+
// Basic button
|
|
97
|
+
const btn1 = k.addTextButton("Play!");
|
|
94
98
|
|
|
95
|
-
// Custom
|
|
96
|
-
const btn2 = k.addTextButton("
|
|
97
|
-
|
|
98
|
-
// Custom size
|
|
99
|
-
const btn3 = k.addTextButton("Start", 150, 75);
|
|
99
|
+
// Custom button
|
|
100
|
+
const btn2 = k.addTextButton("Play!", { posX: 300, posY: 200 });
|
|
100
101
|
|
|
101
102
|
// Add interactivity
|
|
102
103
|
btn2.onClick(() => {
|
|
@@ -115,30 +116,37 @@ A lightweight text-based UI element — ideal for HUD counters, tooltips, status
|
|
|
115
116
|
```ts
|
|
116
117
|
addLabel(
|
|
117
118
|
txt: string,
|
|
118
|
-
|
|
119
|
-
height: number
|
|
119
|
+
opts?: object
|
|
120
120
|
)
|
|
121
121
|
```
|
|
122
122
|
|
|
123
|
-
#### _**Default values**_
|
|
123
|
+
#### _**Default `opts` values**_
|
|
124
124
|
|
|
125
125
|
| Parameter | Default |
|
|
126
126
|
| --------- | ------- |
|
|
127
|
-
| `txt` | `""` |
|
|
128
127
|
| `width` | `160` |
|
|
129
128
|
| `height` | `96` |
|
|
129
|
+
| `txtSize` | `22` |
|
|
130
130
|
|
|
131
|
-
#### _**
|
|
131
|
+
#### _**Default styling**_
|
|
132
|
+
|
|
133
|
+
| Comps | Values |
|
|
134
|
+
| --------------- | :-------------- |
|
|
135
|
+
| `label pos` | `0, 0` |
|
|
136
|
+
| `label color` | `0, 0,0 ` |
|
|
137
|
+
| `label opacity` | `0.7` |
|
|
138
|
+
| `label anchor` | `"topleft"` |
|
|
139
|
+
| `text color` | `255, 255, 255` |
|
|
140
|
+
| `text anchor` | `"center"` |
|
|
132
141
|
|
|
133
|
-
|
|
134
|
-
// Default button
|
|
135
|
-
const lbl1 = k.addLabel();
|
|
142
|
+
#### _**Examples**_
|
|
136
143
|
|
|
144
|
+
```ts
|
|
137
145
|
// Basic label
|
|
138
146
|
const lbl2 = k.addLabel("Score: 0");
|
|
139
147
|
|
|
140
|
-
// Custom
|
|
141
|
-
const lbl3 = k.addLabel("Start", 100, 50);
|
|
148
|
+
// Custom label
|
|
149
|
+
const lbl3 = k.addLabel("Start", { width: 100, height: 50 });
|
|
142
150
|
|
|
143
151
|
// Update label text example
|
|
144
152
|
let score = 0;
|