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 CHANGED
@@ -3,11 +3,18 @@
3
3
  </p>
4
4
 
5
5
  <p align="center">
6
- A Immediate-mode, high-performance WebGL 2D renderer for browser games.
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
- <a href="https://nightre.github.io/Rapid.js/">Website</a>
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
- ## Highlights
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
- - **Powerful custom shaders**
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
- - **Flexible transforms**
36
- Fast, flexible, matrix-powered transforms for motion and hierarchies. **Retain the matrix tree after traversal**; local changes update only affected subtrees. No rebuild required.
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
- - **A complete 2D toolkit**
39
- Draw sprites, lines, masks, particles, render textures, text, and custom geometry from one compact WebGL renderer.
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
- Expressing complex game hierarchies doesn't require `DisplayObject` trees. `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.
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
- `rapid.matrixStack` does not sacrifice the flexibility of a retained scene graph. Use `customMatrix` to render with any matrix in the hierarchy(even after its stack scope has been popped)
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;
@@ -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
- /** Buffer used during hierarchy traversal updates. */
225
- parentStack: DynamicArrayBuffer;
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
- * Evaluates and updates matrices from the given step. Used primarily for deferred transformation.
252
- * @param step - The initial step to update matrices from.
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;