rapid-render 1.0.15 → 1.0.16
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 +25 -14
- package/dist/buffer.d.ts +0 -5
- package/dist/color.d.ts +0 -4
- package/dist/index.d.ts +1 -0
- package/dist/math.d.ts +0 -3
- package/dist/matrix-engine.d.ts +17 -11
- package/dist/rapid-render.js +462 -1390
- package/dist/rapid-render.umd.cjs +17 -17
- package/dist/render.d.ts +0 -1
- package/dist/texture.d.ts +0 -2
- package/package.json +4 -3
- package/dist/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -3,11 +3,18 @@
|
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
|
-
|
|
6
|
+
<a href="https://www.npmjs.com/package/rapid-render"><img src="https://img.shields.io/npm/v/rapid-render?logo=npm&label=npm" alt="npm version"></a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/rapid-render"><img src="https://img.shields.io/badge/gzipped-~20.8%20kB-5C7CFA" alt="gzipped size"></a>
|
|
8
|
+
<a href="https://github.com/Nightre/Rapid.js/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/rapid-render" alt="license"></a>
|
|
9
|
+
<img src="https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white" alt="TypeScript strict">
|
|
7
10
|
</p>
|
|
8
11
|
|
|
9
12
|
<p align="center">
|
|
10
|
-
|
|
13
|
+
An immediate-mode, high-performance WebGL 2D renderer for browser games.
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://nightre.github.io/Rapid.js/">Website & Examples</a>
|
|
11
18
|
|
|
|
12
19
|
<a href="https://nightre.github.io/Rapid.js/docs.html">Docs</a>
|
|
13
20
|
|
|
|
@@ -24,19 +31,15 @@ Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightwe
|
|
|
24
31
|
|
|
25
32
|
If you don't want your renderer to dictate how your game is organized, Rapid.js is for you!
|
|
26
33
|
|
|
27
|
-
##
|
|
28
|
-
|
|
29
|
-
- **Rendering speed**
|
|
30
|
-
An efficient batching system significantly reduces draw calls, allowing Rapid.js to maintain smooth, stable performance even when rendering large numbers of sprites at once.
|
|
34
|
+
## Architecture Recipes
|
|
31
35
|
|
|
32
|
-
- **
|
|
33
|
-
Add sprite and geometry effects through shader hooks while still using Rapid's normal renderer, transforms, textures, and draw APIs.
|
|
36
|
+
Rapid.js is frame-stateless, making it easy to build games with different architectures. Below are minimal, working implementations of several popular architectures built on Rapid.js, each in **around 100 lines** of JavaScript.
|
|
34
37
|
|
|
35
|
-
- **
|
|
36
|
-
|
|
38
|
+
- **Architecture recipes**
|
|
39
|
+
[Game Object](recipes/game-object.js) · [Component](recipes/component.js) · [Display List](recipes/display-list.js) · [ECS Integration](recipes/ecs-integration.js) · [Immediate Mode](recipes/immediate-mode.js)
|
|
37
40
|
|
|
38
|
-
- **
|
|
39
|
-
|
|
41
|
+
- **Game-engine-style recipes**
|
|
42
|
+
[Kaplay-like](recipes/game-engine/kaplay-like.js) · [Pixi-like](recipes/game-engine/pixi-like.js) · [Phaser-like](recipes/game-engine/phaser-like.js) · [Excalibur-like](recipes/game-engine/excalibur-like.js) · [LittleJS-like](recipes/game-engine/littlejs-like.js) · [p5-like](recipes/game-engine/p5-like.js)
|
|
40
43
|
|
|
41
44
|
## Install
|
|
42
45
|
|
|
@@ -44,6 +47,12 @@ If you don't want your renderer to dictate how your game is organized, Rapid.js
|
|
|
44
47
|
npm install rapid-render
|
|
45
48
|
```
|
|
46
49
|
|
|
50
|
+
Or via the unpkg CDN
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<script src="https://unpkg.com/rapid-render/dist/rapid-render.umd.cjs"></script>
|
|
54
|
+
```
|
|
55
|
+
|
|
47
56
|
## Quick Start
|
|
48
57
|
|
|
49
58
|
```ts
|
|
@@ -64,7 +73,7 @@ rapid.flush();
|
|
|
64
73
|
|
|
65
74
|
## Render a scene
|
|
66
75
|
|
|
67
|
-
|
|
76
|
+
`rapid.matrixStack` brings the familiar, intuitive `save()` and `restore()` flow from Canvas 2D into high-performance WebGL, letting you compose parent-child relationships with zero object allocation.
|
|
68
77
|
|
|
69
78
|
```ts
|
|
70
79
|
// root
|
|
@@ -98,7 +107,7 @@ rapid.drawSprite(ui);
|
|
|
98
107
|
|
|
99
108
|
## Reuse and Update Matrix Subtrees
|
|
100
109
|
|
|
101
|
-
|
|
110
|
+
Use `customMatrix` to render with any matrix in the hierarchy(even after its stack scope has been popped)
|
|
102
111
|
|
|
103
112
|
When you modify a node's local matrix, call `updateMatrixSubtree()` to automatically recalculate that node and all affected descendant world matrices, without rebuilding the entire matrix hierarchy.
|
|
104
113
|
|
|
@@ -135,6 +144,8 @@ rapid.drawSprite({
|
|
|
135
144
|
rapid.flush();
|
|
136
145
|
```
|
|
137
146
|
|
|
147
|
+
With this flexible matrix stack, you can build your own architecture with minimal friction. It doesn't care how you organize your game logic. you can use ECS, scene graphs, components, or any hybrid approach you prefer.
|
|
148
|
+
|
|
138
149
|
For more information about matrix transformations, see the [Transformations](https://nightre.github.io/Rapid.js/docs.html#transformations).
|
|
139
150
|
|
|
140
151
|
## Benchmark
|
package/dist/buffer.d.ts
CHANGED
|
@@ -104,11 +104,6 @@ export declare class DynamicArrayBuffer {
|
|
|
104
104
|
* The number of elements currently stored in the buffer.
|
|
105
105
|
*/
|
|
106
106
|
get length(): number;
|
|
107
|
-
/**
|
|
108
|
-
* Resets the buffer's used element count, effectively emptying it.
|
|
109
|
-
* Same behavior as `clear`.
|
|
110
|
-
*/
|
|
111
|
-
reset(): void;
|
|
112
107
|
}
|
|
113
108
|
/**
|
|
114
109
|
* A specialized dynamic buffer intended for WebGL operations.
|
package/dist/color.d.ts
CHANGED
|
@@ -66,7 +66,6 @@ export declare class Color {
|
|
|
66
66
|
*/
|
|
67
67
|
setRGBA(r: number, g: number, b: number, a: number): void;
|
|
68
68
|
setHSL(h: number, s: number, l: number): Color;
|
|
69
|
-
toHex(): string;
|
|
70
69
|
/**
|
|
71
70
|
* Copies the RGBA values from another color.
|
|
72
71
|
* @param color - The color to copy from.
|
|
@@ -88,7 +87,6 @@ export declare class Color {
|
|
|
88
87
|
* @param color - The color to compare with.
|
|
89
88
|
* @returns True if the colors are equal, otherwise false.
|
|
90
89
|
*/
|
|
91
|
-
equal(color: Color): boolean;
|
|
92
90
|
equals(color: Color): boolean;
|
|
93
91
|
/**
|
|
94
92
|
* Creates a Color instance from normalized float components (0–1 range).
|
|
@@ -104,7 +102,6 @@ export declare class Color {
|
|
|
104
102
|
static FromHSL(h: number, s: number, l: number): Color;
|
|
105
103
|
static FromRGB(r: number, g: number, b: number): Color;
|
|
106
104
|
static fromNorm(r: number, g: number, b: number, a?: number): Color;
|
|
107
|
-
static clampColorByte(value: number): number;
|
|
108
105
|
static packColor(r: number, g: number, b: number, a: number, premultipliedAlpha: boolean): number;
|
|
109
106
|
/**
|
|
110
107
|
* Creates a Color instance from a hexadecimal color string.
|
|
@@ -142,5 +139,4 @@ export declare class Color {
|
|
|
142
139
|
static White: Color;
|
|
143
140
|
static Black: Color;
|
|
144
141
|
static Transparent: Color;
|
|
145
|
-
static TRANSPARENT: Color;
|
|
146
142
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './texture';
|
|
|
7
7
|
export * from './webgl/glshader';
|
|
8
8
|
export * from './region/region';
|
|
9
9
|
export * from './region/spriteRegion';
|
|
10
|
+
export * from './region/particleRegion';
|
|
10
11
|
export * from './region/graphicRegion';
|
|
11
12
|
export * from './math';
|
|
12
13
|
export * from './particle';
|
package/dist/math.d.ts
CHANGED
|
@@ -11,16 +11,13 @@ export declare class Vec2 {
|
|
|
11
11
|
set(x: number, y?: number): Vec2;
|
|
12
12
|
add(v: Vec2): Vec2;
|
|
13
13
|
subtract(v: Vec2): Vec2;
|
|
14
|
-
sub(v: Vec2): Vec2;
|
|
15
14
|
multiply(f: number | Vec2): Vec2;
|
|
16
|
-
mul(f: number | Vec2): Vec2;
|
|
17
15
|
divide(f: number | Vec2): Vec2;
|
|
18
16
|
dot(v: Vec2): number;
|
|
19
17
|
cross(v: Vec2): number;
|
|
20
18
|
distanceTo(v: Vec2): number;
|
|
21
19
|
clone(): Vec2;
|
|
22
20
|
to(vec: Vec2): void;
|
|
23
|
-
copy(): Vec2;
|
|
24
21
|
equals(vec: Vec2): boolean;
|
|
25
22
|
perpendicular(): this;
|
|
26
23
|
invert(): this;
|
package/dist/matrix-engine.d.ts
CHANGED
|
@@ -204,6 +204,11 @@ export declare class MatrixStore {
|
|
|
204
204
|
multiplyAffineInPlace(index: number, a: number, b: number, c: number, dValue: number, tx: number, ty: number): void;
|
|
205
205
|
multiplyAffine(indexIn: number, indexOut: number, a: number, b: number, c: number, dValue: number, tx: number, ty: number): void;
|
|
206
206
|
}
|
|
207
|
+
export interface MatrixSaveState {
|
|
208
|
+
world: number;
|
|
209
|
+
local: number;
|
|
210
|
+
step: number;
|
|
211
|
+
}
|
|
207
212
|
/**
|
|
208
213
|
* A highly performant MatrixStack useful for hierarchal scene graphs.
|
|
209
214
|
* Handles both local and world transformations automatically.
|
|
@@ -221,8 +226,8 @@ export declare class MatrixStack {
|
|
|
221
226
|
stepAction: DynamicArrayBuffer;
|
|
222
227
|
/** Records the parent world matrix for each step (used by updateMatrixSubtree). */
|
|
223
228
|
stepParentM: DynamicArrayBuffer;
|
|
224
|
-
|
|
225
|
-
|
|
229
|
+
stepClose: DynamicArrayBuffer;
|
|
230
|
+
stepStack: DynamicArrayBuffer;
|
|
226
231
|
/** The index of the current local matrix in the matrix store. */
|
|
227
232
|
curLocalM: number;
|
|
228
233
|
/** The index of the current world matrix in the matrix store. */
|
|
@@ -237,20 +242,21 @@ export declare class MatrixStack {
|
|
|
237
242
|
* Equivalent to context.save().
|
|
238
243
|
* @returns The current step counter before saving.
|
|
239
244
|
*/
|
|
240
|
-
save():
|
|
241
|
-
world: number;
|
|
242
|
-
local: number;
|
|
243
|
-
step: number;
|
|
244
|
-
};
|
|
245
|
+
save(): MatrixSaveState;
|
|
245
246
|
/**
|
|
246
247
|
* Restores the matrix state from the top of the stack.
|
|
247
248
|
* Equivalent to context.restore().
|
|
248
249
|
*/
|
|
249
250
|
restore(): void;
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
251
|
+
restoreAll(): void;
|
|
252
|
+
private getStep;
|
|
253
|
+
private walkSubtree;
|
|
254
|
+
getParent(step: number | {
|
|
255
|
+
step: number;
|
|
256
|
+
}): number;
|
|
257
|
+
getChildren(step: number | {
|
|
258
|
+
step: number;
|
|
259
|
+
}): number[];
|
|
254
260
|
updateMatrixSubtree(step: number | {
|
|
255
261
|
step: number;
|
|
256
262
|
}): void;
|