update

Nightre · Mar 5, 2024 · 1237159 · 1237159
1 parent 2702d79
commit 1237159
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 29 deletions.
diff --git a/demo/index.js b/demo/index.js
@@ -3,8 +3,8 @@ let rapid = new Rapid({
     canvas: document.getElementById("game"),
     backgroundColor: Color.fromHex("FFFFFF")
 })
-const cat = await rapid.texture.textureFromUrl("./cat.png")
-const plane = await rapid.texture.textureFromUrl("./plane.png")
+const cat = await rapid.textures.textureFromUrl("./cat.png")
+const plane = await rapid.textures.textureFromUrl("./plane.png")
 
 const spriteCountDom = document.getElementById("sprite-count")
 const sprites = []

diff --git a/demo/matrix_stack.js b/demo/matrix_stack.js
@@ -3,8 +3,8 @@ let rapid = new Rapid({
     canvas: document.getElementById("game"),
     backgroundColor: Color.fromHex("FFFFFF")
 })
-const cat = await rapid.texture.textureFromUrl("./cat.png")
-const plane = await rapid.texture.textureFromUrl("./plane.png")
+const cat = await rapid.textures.textureFromUrl("./cat.png")
+const plane = await rapid.textures.textureFromUrl("./plane.png")
 
 //           R    G  B  A
 const red = new Color(255, 0, 0, 255)

diff --git a/dist/rapid.js b/dist/rapid.js
@@ -445,7 +445,7 @@ class RenderRegion {
         this.rapid = rapid;
         this.gl = rapid.gl;
         this.webglArrayBuffer = new WebglBufferArray(rapid.gl, Float32Array, rapid.gl.ARRAY_BUFFER);
-        this.TEXTURE_UNITS_ARRAY = Array.from({ length: rapid.MAX_TEXTURE_UNITS }, (_, index) => index);
+        this.TEXTURE_UNITS_ARRAY = Array.from({ length: rapid.maxTextureUnits }, (_, index) => index);
     }
     addVertex(x, y, ..._) {
         const [tx, ty] = this.rapid.transformPoint(x, y);
@@ -456,7 +456,7 @@ class RenderRegion {
         let textureUnit = this.usedTextures.indexOf(texture);
         if (textureUnit === -1) {
             // 新纹理 
-            if (this.usedTextures.length >= this.rapid.MAX_TEXTURE_UNITS) {
+            if (this.usedTextures.length >= this.rapid.maxTextureUnits) {
                 this.render();
             }
             this.usedTextures.push(texture);
@@ -523,6 +523,19 @@ class GraphicRegion extends RenderRegion {
         this.webglArrayBuffer.pushUint(color);
         this.vertex += 1;
     }
+    drawCircle(x, y, radius, color) {
+        const numSegments = 30; // Increase this for a smoother circle
+        const angleStep = (2 * Math.PI) / numSegments;
+        this.startRender();
+        this.addVertex(x, y, color); // Center point
+        for (let i = 0; i <= numSegments; i++) {
+            const angle = i * angleStep;
+            const dx = x + radius * Math.cos(angle);
+            const dy = y + radius * Math.sin(angle);
+            this.addVertex(dx, dy, color);
+        }
+        this.executeRender();
+    }
     executeRender() {
         super.executeRender();
         const gl = this.gl;
@@ -566,7 +579,7 @@ class SpriteRegion extends RenderRegion {
             { name: "aColor", size: 4, type: gl.UNSIGNED_BYTE, stride, offset: 5 * Float32Array.BYTES_PER_ELEMENT, normalized: true },
         ]);
         this.batchSprite = 0;
-        this.initDefaultShader(vertString, this.generateFragShader(fragString, rapid.MAX_TEXTURE_UNITS));
+        this.initDefaultShader(vertString, this.generateFragShader(fragString, rapid.maxTextureUnits));
         this.MAX_BATCH = Math.floor(2 ** 16 / VERTEX_PER_SPRITE);
         this.indexBuffer = new SpriteElementArray(gl, this.MAX_BATCH);
     }
@@ -723,25 +736,24 @@ class Texture {
      * @returns A new `Texture` instance created from the specified URL.
      */
     static fromUrl(rapid, url) {
-        return rapid.texture.textureFromUrl(url);
+        return rapid.textures.textureFromUrl(url);
     }
 }
 
 class Rapid {
     constructor(options) {
         this.projectionDirty = true;
         this.matrixStack = new MatrixStack();
-        this.texture = new TextureCache(this);
+        this.textures = new TextureCache(this);
         this.devicePixelRatio = window.devicePixelRatio || 1;
-        this.regions = new Map;
         this.defaultColor = new Color(255, 255, 255, 255);
+        this.regions = new Map;
         const gl = getContext(options.canvas);
         this.gl = gl;
         this.canvas = options.canvas;
-        this.MAX_TEXTURE_UNITS = gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
+        this.maxTextureUnits = gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
         this.width = options.width || this.canvas.width;
         this.height = options.width || this.canvas.height;
-        //        this.projection = this.createOrthMatrix(0, this.canvas.width, this.canvas.height, 0)
         this.backgroundColor = options.backgroundColor || new Color(255, 255, 255, 255);
         this.registerBuildInRegion();
         this.initWebgl(gl);

diff --git a/dist/regions/graphic_region.d.ts b/dist/regions/graphic_region.d.ts
@@ -5,6 +5,7 @@ declare class GraphicRegion extends RenderRegion {
     constructor(rapid: Rapid);
     startRender(): void;
     addVertex(x: number, y: number, color: number): void;
+    drawCircle(x: number, y: number, radius: number, color: number): void;
     protected executeRender(): void;
 }
 export default GraphicRegion;
diff --git a/dist/render.d.ts b/dist/render.d.ts
@@ -9,16 +9,16 @@ declare class Rapid {
     projection: Float32Array;
     projectionDirty: boolean;
     matrixStack: MatrixStack;
-    texture: TextureCache;
+    textures: TextureCache;
     width: number;
     height: number;
     backgroundColor: Color;
-    devicePixelRatio: number;
+    readonly devicePixelRatio: number;
+    readonly maxTextureUnits: number;
+    private readonly defaultColor;
     private currentRegion?;
     private currentRegionName?;
     private regions;
-    readonly MAX_TEXTURE_UNITS: number;
-    private readonly defaultColor;
     constructor(options: IRapiadOptions);
     private initWebgl;
     private registerBuildInRegion;

diff --git a/src/regions/graphic_region.ts b/src/regions/graphic_region.ts
@@ -30,6 +30,22 @@ class GraphicRegion extends RenderRegion {
         this.webglArrayBuffer.pushUint(color)
         this.vertex += 1
     }
+    drawCircle(x: number, y: number, radius: number, color: number): void {
+        const numSegments = 30; // Increase this for a smoother circle
+        const angleStep = (2 * Math.PI) / numSegments;
+
+        this.startRender();
+        this.addVertex(x, y, color); // Center point
+
+        for (let i = 0; i <= numSegments; i++) {
+            const angle = i * angleStep;
+            const dx = x + radius * Math.cos(angle);
+            const dy = y + radius * Math.sin(angle);
+            this.addVertex(dx, dy, color);
+        }
+
+        this.executeRender();
+    }
 
     protected override executeRender(): void {
         super.executeRender()

diff --git a/src/regions/region.ts b/src/regions/region.ts
@@ -19,7 +19,7 @@ class RenderRegion {
         this.rapid = rapid
         this.gl = rapid.gl
         this.webglArrayBuffer = new WebglBufferArray(rapid.gl, Float32Array, rapid.gl.ARRAY_BUFFER)
-        this.TEXTURE_UNITS_ARRAY = Array.from({ length: rapid.MAX_TEXTURE_UNITS },
+        this.TEXTURE_UNITS_ARRAY = Array.from({ length: rapid.maxTextureUnits },
             (_, index) => index);
     }
     protected addVertex(x: number, y: number, ..._: unknown[]) {
@@ -31,7 +31,7 @@ class RenderRegion {
         let textureUnit = this.usedTextures.indexOf(texture)
         if (textureUnit === -1) {
             // 新纹理 
-            if (this.usedTextures.length >= this.rapid.MAX_TEXTURE_UNITS) {
+            if (this.usedTextures.length >= this.rapid.maxTextureUnits) {
                 this.render()
             }
             this.usedTextures.push(texture)

diff --git a/src/regions/sprite_region.ts b/src/regions/sprite_region.ts
@@ -45,7 +45,7 @@ class SpriteRegion extends RenderRegion {
         ])
         this.initDefaultShader(
             vertString,
-            this.generateFragShader(fragString, rapid.MAX_TEXTURE_UNITS)
+            this.generateFragShader(fragString, rapid.maxTextureUnits)
         )
         this.MAX_BATCH = Math.floor(2 ** 16 / VERTEX_PER_SPRITE)
         this.indexBuffer = new SpriteElementArray(gl, this.MAX_BATCH)

diff --git a/src/render.ts b/src/render.ts
@@ -14,28 +14,27 @@ class Rapid {
     projectionDirty: boolean = true
 
     matrixStack = new MatrixStack()
-    texture = new TextureCache(this)
+    textures = new TextureCache(this)
     width: number
     height: number
 
-    backgroundColor: Color
-    devicePixelRatio = window.devicePixelRatio || 1
+    backgroundColor: Color    
+    readonly devicePixelRatio = window.devicePixelRatio || 1
+    readonly maxTextureUnits: number
+    private readonly defaultColor = new Color(255, 255, 255, 255)
+
     private currentRegion?: RenderRegion
     private currentRegionName?: string
     private regions: Map<string, RenderRegion> = new Map
-
-    readonly MAX_TEXTURE_UNITS: number
-    private readonly defaultColor = new Color(255, 255, 255, 255)
+
     constructor(options: IRapiadOptions) {
         const gl = getContext(options.canvas)
         this.gl = gl
         this.canvas = options.canvas
-        this.MAX_TEXTURE_UNITS = gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
+        this.maxTextureUnits = gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
 
         this.width = options.width || this.canvas.width
         this.height = options.width || this.canvas.height        
-//        this.projection = this.createOrthMatrix(0, this.canvas.width, this.canvas.height, 0)
-
 
         this.backgroundColor = options.backgroundColor || new Color(255, 255, 255, 255)
         this.registerBuildInRegion()

diff --git a/src/texture.ts b/src/texture.ts
@@ -136,7 +136,7 @@ class Texture {
      * @returns A new `Texture` instance created from the specified URL.
      */
     static fromUrl(rapid: Rapid, url: string) {
-        return rapid.texture.textureFromUrl(url)
+        return rapid.textures.textureFromUrl(url)
     }
 }