diff --git a/demo/index.js b/demo/index.js index 50d2f80..6c8205f 100644 --- 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 index 5f7eb54..af1e814 100644 --- 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 index 0b4ccd4..ec939bb 100644 --- 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,7 +736,7 @@ 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); } } @@ -731,17 +744,16 @@ 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 index e0f4df0..57e80a6 100644 --- 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 index 0320586..7ce58ea 100644 --- 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 index d88efcf..f81a4f9 100644 --- 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 index 1fd689c..63c3887 100644 --- 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 index 657b2fb..7d8d948 100644 --- 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 index a9d9e16..d2513a6 100644 --- 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 = 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 index 3c6f588..9c981bb 100644 --- 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) } }