1.4.1: text artifacts and textures filtering fixes

README.md

@@ -1,4 +1,4 @@
-# JsGE@1.4.0
+# JsGE@1.4.1
 
 Javascript Game Engine
 

examples/main.js

@@ -43,7 +43,7 @@ function createOptionsBlock() {
     const webGLErrorsWrap = document.createElement("div");
     webGLErrorsWrap.style.marginBottom = "20px";
     const webGLErrorsLabel = document.createElement("label");
-    webGLErrorsLabel.innerText = "Show WebGl Errors";
+    webGLErrorsLabel.innerText = "Output WebGl Errors";
     const webGLErrorsCheckbox = document.createElement("input");
     webGLErrorsCheckbox.setAttribute('type', 'checkbox');
     webGLErrorsCheckbox.name = "webGLErrors";

history/history-roadmap.txt

@@ -48,6 +48,11 @@ r: code refactoring
 f: fixed defects
 
 # History
+1.4.1:
+    f: fixed texts box size measurements
+    f: texts artifacts
+    f: textures images and tiles filtering NEAREST -> LINEAR
+
 1.4.0:
     +: Tiled Editor: added animated tiles support
     +: Examples: setting options switch screen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsge",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Javascript Game Engine",
   "main": "src/index.js",
   "type": "module",

src/base/DrawCircleObject.js

@@ -23,7 +23,7 @@ export class DrawCircleObject extends DrawShapeObject {
     constructor(x, y, radius, bgColor) {
         super(CONST.DRAW_TYPE.CIRCLE, x, y, bgColor);
         this.#radius = radius;
-        this.#vertices = this._calculateConusVertices(radius);
+        this.#vertices = this._interpolateConus(radius);
     }
 
     /**

src/base/DrawConusObject.js

@@ -32,7 +32,7 @@ export class DrawConusObject extends DrawShapeObject {
         this.#radius = radius;
         this.#angle = angle;
         this.#fade_min = fade;
-        this.#vertices = this._calculateConusVertices(radius, angle);
+        this.#vertices = this._interpolateConus(radius, angle);
     }
 
     /**

src/base/DrawShapeObject.js

@@ -218,7 +218,7 @@ export class DrawShapeObject {
      * @returns {Array<number>}
      * @ignore
      */
-    _calculateConusVertices(radius, angle = 2*Math.PI, step = Math.PI/14) {
+    _interpolateConus(radius, angle = 2*Math.PI, step = Math.PI/14) {
         let conusPolygonCoords = [0, 0];
 
         for (let r = 0; r <= angle; r += step) {

src/base/DrawTextObject.js

@@ -19,7 +19,7 @@ export class DrawTextObject extends DrawShapeObject {
     /**
      * @type {HTMLCanvasElement}
      */
-    #textureCanvas;
+    #textureCanvas = document.createElement("canvas");
 
     /**
      * @type {TextureStorage}
@@ -43,8 +43,8 @@ export class DrawTextObject extends DrawShapeObject {
      * @type {Rectangle}
      */
     get boundariesBox() {
-        const width = this.textMetrics ? this.textMetrics.width : 300,
-            height = this.textMetrics ? this.textMetrics.actualBoundingBoxAscent + /*this.textMetrics.actualBoundingBoxDescent*/ 5: 30;
+        const width = this.textMetrics ? Math.floor(this.textMetrics.width) : 300,
+            height = this.textMetrics ? Math.floor(this.textMetrics.fontBoundingBoxAscent + this.textMetrics.fontBoundingBoxDescent): 30;
         return new Rectangle(this.x, this.y - height, width, height);
     }
 
@@ -177,22 +177,17 @@ export class DrawTextObject extends DrawShapeObject {
      * @returns {void}
      */
     #calculateCanvasTextureAndMeasurements() {
-        const canvas = document.createElement("canvas"),
-            ctx = canvas.getContext("2d");
-        if (ctx) { 
-            if (this.#textureCanvas) {
-                // remove old one
-                this.#textureCanvas.remove();
-            }
+        const ctx = this.#textureCanvas.getContext("2d", { willReadFrequently: true }); // cpu counting instead gpu
+        if (ctx) {
+            //ctx.clearRect(0, 0, this.#textureCanvas.width, this.#textureCanvas.height);
             ctx.font = this.font;
             this._textMetrics = ctx.measureText(this.text);
             const boxWidth = this.boundariesBox.width, 
                 boxHeight = this.boundariesBox.height;
 
             ctx.canvas.width = boxWidth;
             ctx.canvas.height = boxHeight;
-            // writing texture unit without cleanup the canvas, 
-            // case text artifacts in chrome
+            // after canvas resize, have to cleanup and set the font again
             ctx.clearRect(0, 0, boxWidth, boxHeight);
             ctx.font = this.font;
             ctx.textBaseline = "bottom";// bottom
@@ -205,10 +200,13 @@ export class DrawTextObject extends DrawShapeObject {
                 ctx.strokeText(this.text, 0, boxHeight);
             }
 
-            this.#textureCanvas = canvas;
             if (this.#textureStorage) {
                 this.#textureStorage._isTextureRecalculated = true;
             }
+
+            // debug canvas
+            // this.#textureCanvas.style.position = "absolute";
+            // document.body.appendChild(this.#textureCanvas);
 
         } else {
             Exception(ERROR_CODES.UNHANDLED_EXCEPTION, "can't getContext('2d')");

src/base/WebGl/ImagesDrawProgram.js

@@ -56,7 +56,6 @@ const imgFragmentShader = `
 
     //texCoords passed in from the vertex shader
     varying vec2 v_texCoord;
-
     void main() {
         vec4 color = texture2D(u_image, v_texCoord);
         gl_FragColor = color;

src/base/WebGl/WebGlEngine.js

@@ -451,7 +451,7 @@ export class WebGlEngine {
             renderObject._textureStorage = textureStorage;
         }
         if (textureStorage._isTextureRecalculated === true) {
-            this.#updateWebGlTexture(gl, textureStorage._texture, renderObject._textureCanvas);
+            this.#updateTextWebGlTexture(gl, textureStorage._texture, renderObject._textureCanvas);
             textureStorage._isTextureRecalculated = false;
         } else {
             this.#bindTexture(gl, textureStorage._texture);
@@ -480,7 +480,7 @@ export class WebGlEngine {
             image_name = renderObject.key,
             shapeMaskId = renderObject._maskId,
             spacing = renderObject.spacing,
-            blend = renderObject.blendFunc ? renderObject.blendFunc : [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA],
+            blend = renderObject.blendFunc ? renderObject.blendFunc : [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
             scale = [1, 1];
         let imageX = 0,
             imageY = 0,
@@ -1476,14 +1476,23 @@ export class WebGlEngine {
     #updateWebGlTexture(gl, texture, textureImage, textureNum = 0, useMipMaps = false) {
         this.#bindTexture(gl, texture, textureNum);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
-        // already default value
+        // LINEAR filtering is better for images and tiles, but for texts it produces a small blur
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        // for textures not power of 2 (texts for example)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+    }
+
+    #updateTextWebGlTexture(gl, texture, textureImage, textureNum = 0) {
+        this.#bindTexture(gl, texture, textureNum);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
+        // LINEAR filtering is better for images and tiles, but for texts it produces a small blur
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         // for textures not power of 2 (texts for example)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST);
-        if (useMipMaps)
-            gl.generateMipmap(gl.TEXTURE_2D);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     }
 
     #bindTexture(gl, texture, textureNum = 0) {