add: canvas scale

Author: Nightre

README.md

@@ -78,3 +78,5 @@ Issues and PRs are welcome!
 ![2](./screenshot/2.gif)
 ![3](./screenshot/3.png)
 ![4](./screenshot/4.png)
+![4](./screenshot/5.png)
+

dist/interface.d.ts

@@ -15,12 +15,22 @@ export interface IMathStruct<T> {
     copy(obj: T): void;
     equal(obj: T): boolean;
 }
+export declare enum ScaleRadio {
+    KEEP = "keep",
+    KEEP_H = "keep_h",
+    KEEP_W = "keep_w",
+    IGNORE = "ignore",
+    EXPAND = "expand"
+}
 export interface IRapidOptions {
     canvas: HTMLCanvasElement;
     width?: number;
     height?: number;
     backgroundColor?: Color;
     antialias?: boolean;
+    devicePixelRatio?: number;
+    scaleEnable?: boolean;
+    scaleRadio?: ScaleRadio;
 }
 export interface IAttribute {
     name: string;

dist/rapid.global.js

@@ -21,7 +21,13 @@ declare class Rapid {
     width: number;
     height: number;
     backgroundColor: Color;
-    readonly devicePixelRatio: number;
+    devicePixelRatio: number;
+    private physicsWidth;
+    private physicsHeight;
+    private logicWidth;
+    private logicHeight;
+    private scaleEnable;
+    private scaleRadio;
     readonly maxTextureUnits: number;
     private readonly defaultColor;
     private currentRegion?;
@@ -37,11 +43,12 @@ declare class Rapid {
      */
     constructor(options: IRapidOptions);
     /**
-     * Render a tile map layer.
-     * @param data - The map data to render.
-     * @param options - The options for rendering the tile map layer.
+     * @param displayWdith css px size
+     * @param displayHeight css px size
      */
-    renderTileMapLayer(data: (number | string)[][], options: ILayerRenderOptions | TileSet): void;
+    private updateDisplaySize;
+    private resizeSize;
+    private updateProjection;
     /**
      * Initializes WebGL context settings.
      * @param gl - The WebGL context.
@@ -96,6 +103,12 @@ declare class Rapid {
      * @param cb - The function to render.
      */
     render(cb: (dt: number) => void): void;
+    /**
+     * Render a tile map layer.
+     * @param data - The map data to render.
+     * @param options - The options for rendering the tile map layer.
+     */
+    renderTileMapLayer(data: (number | string)[][], options: ILayerRenderOptions | TileSet): void;
     applyCameraTransform(options: ICameraOptions): void;
     /**
      * Renders a sprite with the specified options.
@@ -156,14 +169,6 @@ declare class Rapid {
      * @param options - The options for rendering the circle, including radius, position, color, and segment count.
      */
     renderCircle(options: ICircleRenderOptions): void;
-    /**
-     * Resizes the canvas and updates the viewport and projection matrix.
-     * @param width - The new width of the canvas.
-     * @param height - The new height of the canvas.
-     */
-    resize(logicalWidth: number, logicalHeight: number): void;
-    private resizeWebglSize;
-    private updateProjection;
     /**
      * Clears the canvas with the background color.
      * @param bgColor - The background color to clear the canvas with.

dist/rapid.js

@@ -102,6 +102,8 @@
         <div class="sidebar">
             <div class="list-nav" id="sidebar-container">
                 <h3>Examples</h3>
+
+                <a class="list-btn" href="/examples/window-scale.html">canvas scale</a>
             </div>
         </div>
 

dist/rapid.umd.cjs

@@ -0,0 +1,120 @@
+import { Rapid, Color, Vec2, ParticleShape, ScaleRadio } from "/Rapid.js/dist/rapid.js";
+
+// 创建Rapid实例
+const rapid = new Rapid({
+    canvas: document.getElementById("game"),
+    backgroundColor: Color.fromHex("#000000"),
+
+    scaleEnable: true,
+    scaleRadio: ScaleRadio.EXPAND,
+
+    width: 500,
+    height: 500
+});
+
+const updateDisplaySize = () => {
+    rapid.updateDisplaySize(
+        document.documentElement.clientWidth,
+        document.documentElement.clientHeight
+    )
+}
+
+window.addEventListener('resize', updateDisplaySize)
+updateDisplaySize()
+
+const cat = await rapid.textures.textureFromUrl("./assets/cat.png")
+const plane = await rapid.textures.textureFromUrl("./assets/plane.png")
+
+const sprites = []
+
+let count = 0
+class Sprite {
+    constructor() {
+        this.position = new Vec2(100 * Math.random(), 100 * Math.random())
+
+        this.speedY = 10 * Math.random()
+        this.speedX = 10 * Math.random()
+
+        this.texture = Math.random() > 0.5 ? cat : plane
+        this.color = new Color(
+            200 + Math.random() * 55,
+            200 + Math.random() * 55,
+            200 + Math.random() * 55,
+        )
+
+        this.bounce = Math.random() * 15 + 15
+
+        count++
+    }
+
+
+    render() {
+        this.position.x += this.speedX
+        this.position.y += this.speedY
+
+        this.speedY += 1
+
+        if (this.position.y > 500 - 32) {
+            this.speedY = -this.bounce
+        }
+
+        if (this.position.x > 500 - 32) {
+            this.speedX = -5
+        } else if (this.position.x < 0) {
+            this.speedX = 5
+        }
+
+        rapid.renderSprite({
+            texture: this.texture,
+            position: this.position,
+            color: this.color,
+        })
+    }
+}
+
+
+const addSprite = () => {
+    sprites.push(new Sprite())
+}
+
+for (let index = 0; index < 500; index++) {
+    addSprite()
+}
+
+let add = false
+let time = 0
+
+rapid.canvas.onmousedown = () => {
+    add = true
+}
+rapid.canvas.onmouseup = () => {
+    add = false
+}
+
+const render = () => {
+    if (add) {
+        for (let index = 0; index < 50; index++) {
+            addSprite()
+        }
+    }
+
+    time += 0.01
+
+    rapid.startRender()
+
+    for (let index = 0; index < sprites.length; index++) {
+        const element = sprites[index]
+        element.render()
+    }
+
+    rapid.endRender()
+}
+
+
+
+function animate() {
+    render()
+    requestAnimationFrame(animate);
+}
+
+animate()

dist/render.d.ts

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rapid.js - 粒子系统示例</title>
+    <style>
+        body {
+            margin: 0% !important;
+            overflow: hidden;
+        }
+
+        #game {
+            outline: 0px solid black !important;
+            border-radius: 0 !important;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="game"></canvas>
+
+    <script src="./js/main.js"></script>
+    <script type="module" src="./js/window-scale.js"></script>
+</body>
+
+</html>

docs/examples.html

@@ -1,6 +1,6 @@
 {
   "name": "rapid-render",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "files": [
     "dist"