rapid-render 0.1.1 → 0.1.3

package/README.md

@@ -1,26 +1,34 @@
-# 🚀 Rapid.js
+<p align="center">
+  <img src="./screenshot/logo.png" alt="Rapid.js Logo" width="100" style="image-rendering: pixelated;">
+</p>
 
-A highly efficient and lightweight WebGL renderer
+<a href="https://nightre.github.io/Rapid.js/docs/index.html"><h1 align="center">Rapid.js</h1></a>
 
-## [API Docs](https://nightre.github.io/Rapid.js/docs/)
+A highly efficient ([stress-test](./docs/examples.html)) and lightweight WebGL-based 2D rendering engine focused on rendering capabilities. Rapid.js provides a simple and intuitive API for developers to quickly build high-performance 2D 
+games, while staying completely independent from your game's architecture and logic.
 
-[stress test demo](https://nightre.github.io/Rapid.js/demo/) ( [source code](./demo/index.js) )
 
-[render demo](https://nightre.github.io/Rapid.js/demo/matrix_stack.html) ( [source code](./demo/matrix_stack.js) )
+### [Website](https://nightre.github.io/Rapid.js/docs/index.html)
 
-[custom shader demo](https://nightre.github.io/Rapid.js/demo/custom-shader.html) ( [source code](./demo/custom-shader.js) )
+#### [Document](https://nightre.github.io/Rapid.js/docs/docs.html)
 
+#### [API Docs](https://nightre.github.io/Rapid.js/docs/api/index.html)
 
+#### [Examples](https://nightre.github.io/Rapid.js/demo/)
 
 # Features
-* **Fast Rendering**: Render 10,000 sprites at 60fps
-* **Multi-Texture Support**: Batch rendering using GPU's maximum texture units
+
+* **Fast Rendering**
+* **TileMap** - YSort, isometric
 * **Graphics Drawing**
-* **Matrix Stack**
 * **Text Rendering**
 * **Line Drawing**
 * **Custom Shaders**
-* **Texture Clipping**
+* **Mask**
+
+> [!WARNING]  
+> This project is under active development! Please expect bugs, report any issues you find, and contributions are welcome.
+
 
 # Install
 
@@ -40,87 +48,69 @@ Or use unpkg
 import { Rapid } from "rapid-render"
 ```
 
-# Useage
+# Usage
 
-```js
-let rapid = new Rapid({
-    canvas: document.getElementById("game"),
-    backgroundColor: Color.fromHex("FFFFFF")
-});
+Rapid.js is a focused WebGL-based 2D rendering engine that provides rendering capabilities only. It does not include any game architecture, state management, physics, or other game-related systems - it's purely a rendering engine. This intentional design choice means you have complete freedom to structure your game however you want.
 
-// Create texture
-const cat = await rapid.textures.textureFromUrl("./cat.png");
-//                      R   G   B   A
-const color = new Color(255, 255, 255, 255); // Or use Color.fromHex
+Here's a simple example showing how to use Rapid.js to create a bouncing box:
 
-// Call before rendering
-rapid.startRender();
+First, create a canvas element in your HTML:
 
-// Render here...
-
-// Call after rendering
-rapid.endRender();
-
-// Set canvas size
-rapid.resize(100, 100);
+```html
+<canvas id="gameCanvas" width="500" height="500"></canvas>
 ```
 
-# Render
+Then, add the following JavaScript code:
 
 ```js
-const text = rapid.textures.createText({ text: "Hello!", fontSize: 30 })
-
-rapid.save() // Save state
-rapid.matrixStack.translate(0,0)
-rapid.matrixStack.scale(1)
-rapid.matrixStack.rotate(0)
-
-// Render Sprit
-rapid.renderSprite(cat, 0, 0, color) // or rapid.renderSprite(cat, 0, 0, { color })
-
-// Rendr Graphic
-const path = Vec2.FormArray([[0, 0], [100, 0], [100, 100]])
-rapid.renderGraphic(0,0,{points:path, color:green})
-// or
-// rapid.startGraphicDraw()
-// rapid.addGraphicVertex(0, 0, color)
-// rapid.endGraphicDraw()
-
-// Render Text
-rapid.renderSprite(text, 200, 0)
-text.setText("time:" + Math.round(time))
-
-rapid.restore() // back to the previous saved state
+import { Rapid, Color, Vec2 } from "rapid-render"
+
+// Initialize Rapid
+const rapid = new Rapid({
+    canvas: document.getElementById("gameCanvas"),
+    backgroundColor: Color.fromHex("E6F0FF")
+})
+
+// Position and velocity
+let position = new Vec2(100, 100)
+let velocity = new Vec2(2, 2)
+
+function gameLoop() {
+    // Update position
+    position.x += velocity.x
+    position.y += velocity.y
+    
+    // Simple collision with boundaries
+    if (position.x < 0 || position.x > 400) velocity.x *= -1
+    if (position.y < 0 || position.y > 400) velocity.y *= -1
+    
+    // Render using the recommended render callback method
+    rapid.render(() => {
+        rapid.renderRect({ 
+            offset: position, 
+            width: 50, 
+            height: 50, 
+            color: Color.Red 
+        })
+    })
+    // rapid.startRender();
+    // ...
+    // rapid.endRender();
+    requestAnimationFrame(gameLoop);
+}
+
+gameLoop()
 ```
 
-# Custom Shader
+This will create a red square that bounces around the canvas, demonstrating basic animation and collision detection.
 
-View demo and watch detailed shader code [custom shader demo](https://nightre.github.io/Rapid.js/demo/custom-shader.html) ( [source code](./demo/custom-shader.js) )
+Note: All rendering operations must be performed within a render context, either:
+- Inside a `rapid.render(() => { ... })` callback (Recommended), or
+- Between `rapid.startRender()` and `rapid.endRender()` calls
 
-```js
-const vertexShaderSource = `...`
-const fragmentShaderSource = `...`
-
-const customShader = new GLShader(rapid, vertexShaderSource, fragmentShaderSource)
-rapid.startRender()
-
-rapid.renderSprite(plane, 100, 100, {
-    shader: customShader, // shader
-    uniforms: {
-        // Set custom uniform (You can set mat3, vec2, and so on here)
-        uCustomUniform: Number(costumUniformValue)
-        //  uVec2Uniform: [0,2] // recognized as vec2
-        //  uMat3Uniform: [
-        //     [0,0,0],
-        //     [0,0,0],
-        //     [0,0,0],
-        //  ]
-        // recognized as mat3
-    }
-});
-
-rapid.endRender()
-```
-# Screen Shot
+# Road Map
 
-![screen](./screenshot/screen.png)
+* Frame Buffer Object (allows rendering to a texture instead of screen) [Under development]
+* Light system
+* Line Texture 
+* Particle system

package/dist/depth.d.ts

@@ -0,0 +1,8 @@
+declare class DepthScaler {
+    private max;
+    private min;
+    constructor();
+    getDepth(depth?: number): number | undefined;
+}
+declare const _default: DepthScaler;
+export default _default;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-import { graphicAttributes } from "./regions/graphic_region";
-import { spriteAttributes } from "./regions/sprite_region";
 import Rapid from "./render";
 import GLShader from "./webgl/glshader";
 import { Text } from "./texture";
-export { Text, Rapid, GLShader, spriteAttributes, graphicAttributes, };
+import { TileMapRender, TileSet } from "./tilemap";
+import { Uniform } from "./webgl/uniform";
+import { spriteAttributes, graphicAttributes } from "./regions/attributes";
+export { Text, Rapid, GLShader, TileMapRender, TileSet, Uniform, graphicAttributes, spriteAttributes, };
 export * from "./math";
 export * from "./interface";
 export * from "./texture";

package/dist/interface.d.ts

@@ -1,12 +1,26 @@
 import { Color, Vec2 } from "./math";
+import { Texture } from "./texture";
+import { TileSet } from "./tilemap";
 import GLShader from "./webgl/glshader";
+import { Uniform } from "./webgl/uniform";
+/**
+ * @ignore
+ */
 export type WebGLContext = WebGL2RenderingContext | WebGLRenderingContext;
-export interface IRapiadOptions {
+/**
+ * @ignore
+ */
+export interface IMathStruct<T> {
+    clone(obj: T): T;
+    copy(obj: T): void;
+    equal(obj: T): boolean;
+}
+export interface IRapidOptions {
     canvas: HTMLCanvasElement;
-    pixelDensity?: number;
     width?: number;
     height?: number;
     backgroundColor?: Color;
+    antialias?: boolean;
 }
 export interface IAttribute {
     name: string;
@@ -16,16 +30,33 @@ export interface IAttribute {
     stride: number;
     offset?: number;
 }
-export interface IRenderSpriteOptions {
+export interface ITransform {
+    position?: Vec2;
+    scale?: Vec2 | number;
+    rotation?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    offset?: Vec2;
+    x?: number;
+    y?: number;
+    offsetX?: number;
+    offsetY?: number;
+    origin?: Vec2 | number;
+    restoreTransform?: boolean;
+    saveTransform?: boolean;
+    afterSave?(): unknown;
+    beforRestore?(): unknown;
+}
+export interface IRenderSpriteOptions extends ITransform, IShader {
     color?: Color;
-    shader?: GLShader;
-    uniforms?: UniformType;
+    texture?: Texture;
+    offset?: Vec2;
 }
 export interface ITextOptions {
     /**
      * The text string to be rendered.
      */
-    text: string;
+    text?: string;
     /**
      * The font size for the text.
      * Default is 16.
@@ -53,36 +84,66 @@ export interface ITextOptions {
      * Default is 'top'.
      */
     textBaseline?: CanvasTextBaseline;
-    /**
-     * Whether to apply antialiasing to the texture.
-     * Default is `false`.
-     */
-    antialias?: boolean;
-}
-export declare enum JoinTyps {
-    BEVEL = 0,
-    ROUND = 1,
-    MITER = 2
-}
-export declare enum CapTyps {
-    BUTT = 0,
-    ROUND = 1,
-    SQUARE = 2
 }
 export interface ILineOptions {
-    cap?: CapTyps;
-    join?: JoinTyps;
     width?: number;
-    miterLimit?: number;
-}
-export interface IRenderLineOptions extends ILineOptions {
+    closed?: boolean;
     points: Vec2[];
+    roundCap?: boolean;
     color?: Color;
 }
-export interface IGraphicOptions {
+export interface IRenderLineOptions extends ILineOptions, ITransform {
+}
+export interface IGraphicOptions extends ITransform, IShader {
     points: Vec2[];
-    color?: Color;
+    color?: Color | Color[];
     drawType?: number;
+    uv?: Vec2[];
+    texture?: Texture;
+}
+export interface ICircleOptions extends IGraphicOptions {
+    radius: number;
+    segments?: number;
+}
+export interface IRectOptions extends IGraphicOptions {
+    width: number;
+    height: number;
 }
-export type UniformType = Record<string, number | Array<any>>;
+export declare enum MaskType {
+    Include = "normal",
+    Exclude = "inverse"
+}
+export type UniformType = Record<string, number | Array<any> | boolean | Texture>;
 export type Images = ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas;
+export interface IRegisterTileOptions extends IRenderSpriteOptions {
+    texture: Texture;
+    offsetX?: number;
+    offsetY?: number;
+    ySortOffset?: number;
+}
+export interface YSortCallback {
+    ySort: number;
+    render?: () => void;
+    renderSprite?: IRenderSpriteOptions;
+}
+export interface ILayerRender extends ITransform {
+    error?: number | Vec2;
+    errorX?: number;
+    errorY?: number;
+    ySortCallback?: Array<YSortCallback>;
+    shape?: TilemapShape;
+    tileSet: TileSet;
+    eachTile?: (tileId: string | number, mapX: number, mapY: number) => IRenderSpriteOptions | undefined | void;
+}
+export interface IShader {
+    shader?: GLShader;
+    uniforms?: Uniform;
+}
+export declare enum TilemapShape {
+    SQUARE = "square",
+    ISOMETRIC = "isometric"
+}
+export declare enum ShaderType {
+    SPRITE = "sprite",
+    GRAPHIC = "graphic"
+}

package/dist/line.d.ts

@@ -1,3 +1,10 @@
 import { ILineOptions } from "./interface";
 import { Vec2 } from "./math";
-export declare const getStrokeGeometry: (points: Vec2[], attrs: ILineOptions) => Vec2[];
+/**
+ * @ignore
+ */
+export declare const getLineNormal: (points: Vec2[], closed?: boolean) => {
+    normal: Vec2;
+    miters: number;
+}[];
+export declare const getLineGeometry: (options: ILineOptions) => Vec2[];

package/dist/log.d.ts

@@ -0,0 +1,2 @@
+declare const warn: (text: string) => void;
+export default warn;