rapid-render 1.0.12 → 1.0.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 CHANGED
@@ -3,7 +3,7 @@
3
3
  </p>
4
4
 
5
5
  <p align="center">
6
- A stateless, high-performance WebGL 2D renderer for browser games.
6
+ A Immediate-mode, high-performance WebGL 2D renderer for browser games.
7
7
  </p>
8
8
 
9
9
  <p align="center">
@@ -20,7 +20,9 @@
20
20
 
21
21
  ## What is Rapid?
22
22
 
23
- Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightweight at just **67 kB** (**~19.5 kB gzipped**) It handles the rendering layer while leaving your game architecture, update loop, and state management fully in your hands.
23
+ Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightweight just **69 kB** (**~20 kB gzipped**) and handles only the rendering layer, leaving your game architecture entirely in your hands.
24
+
25
+ If you don't want your renderer to dictate how your game is organized, Rapid.js is for you!
24
26
 
25
27
  ## Highlights
26
28
 
@@ -31,7 +33,7 @@ Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightwe
31
33
  Add sprite and geometry effects through shader hooks while still using Rapid's normal renderer, transforms, textures, and draw APIs.
32
34
 
33
35
  - **Flexible transforms**
34
- Fast, flexible, matrix-powered transforms for motion and hierarchies. Retain the matrix tree after traversal; local changes update only affected subtrees. No rebuild required.
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.
35
37
 
36
38
  - **A complete 2D toolkit**
37
39
  Draw sprites, lines, masks, particles, render textures, text, and custom geometry from one compact WebGL renderer.
@@ -49,19 +51,91 @@ import { Rapid, Color } from "rapid-render";
49
51
 
50
52
  const canvas = document.querySelector("canvas")!;
51
53
  const rapid = new Rapid({canvas});
54
+ const texture = await rapid.texture.load("./image/sprite.png")
52
55
 
53
56
  rapid.clear();
54
- rapid.drawRect({
55
- x: 40,
56
- y: 40,
57
- width: 160,
58
- height: 96,
59
- color: new Color(84, 184, 234),
57
+ rapid.drawSprite({
58
+ texture: texture,
59
+ x: 40,
60
+ y: 40,
60
61
  });
61
62
  rapid.flush();
62
63
  ```
63
64
 
64
- Next step: <a href="https://nightre.github.io/Rapid.js/docs.html">Docs</a>
65
+ ## Render a scene
66
+
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.
68
+
69
+ ```ts
70
+ // root
71
+ // ├── world
72
+ // │ ├── player
73
+ // │ └── enemies
74
+ // │ ├── enemy #0
75
+ // │ ├── enemy #1
76
+ // │ └── ...
77
+ // └── ui
78
+
79
+ const stack = rapid.matrixStack;
80
+ // 1.root
81
+ stack.save();
82
+ stack.translate(0, 0);
83
+ // 2.world
84
+ stack.save();
85
+ rapid.drawSprite(player); // player
86
+ // 3.enemies
87
+ stack.save();
88
+ for (let i = 0; i < 2; i++) {
89
+ stack.translate(x, y);
90
+ rapid.drawSprite(enemies[i]); // enemy
91
+ }
92
+ stack.restore(); // 3.enemies
93
+ stack.restore(); // 2.world
94
+ stack.restore(); // 1.root
95
+ // ui
96
+ rapid.drawSprite(ui);
97
+ ```
98
+
99
+ ## Reuse and Update Matrix Subtrees
100
+
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)
102
+
103
+ 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
+
105
+ ```ts
106
+ rapid.clear();
107
+
108
+ const stack = rapid.matrixStack;
109
+ const matrix = rapid.matrix;
110
+
111
+ // Build a transform hierarchy.
112
+ const world = stack.save();
113
+ stack.translate(200, 200);
114
+
115
+ const enemyNode = stack.save();
116
+ stack.translate(80, 0);
117
+
118
+ stack.restore(); // enemyNode
119
+ stack.restore(); // world
120
+
121
+ // Both nodes have been popped, but their matrices remain available.
122
+ // Move the world node later in the same frame.
123
+ matrix.identity(world.local);
124
+ matrix.translate(world.local, 100, 100);
125
+
126
+ // Recalculate only `world` and its descendants.
127
+ stack.updateMatrixSubtree(world);
128
+
129
+ // Render using the stored matrix of the popped child node.
130
+ rapid.drawSprite({
131
+ texture: enemy,
132
+ customMatrix: enemyNode.world,
133
+ });
134
+
135
+ rapid.flush();
136
+ ```
137
+
138
+ For more information about matrix transformations, see the [Transformations](https://nightre.github.io/Rapid.js/docs.html#transformations).
65
139
 
66
140
  ## Benchmark
67
141
 
@@ -121,6 +121,7 @@ export declare class ParticleEmitter {
121
121
  scaleY: DynamicArrayBuffer;
122
122
  rotation: DynamicArrayBuffer;
123
123
  color: DynamicArrayBuffer;
124
+ private remainingLife;
124
125
  animations: {
125
126
  speed: ParticleAttributeStore;
126
127
  rotation: ParticleAttributeStore;