From 444eb63ac78a1e5d10b511fd6b4ec1bd8ff69673 Mon Sep 17 00:00:00 2001 From: luxluth Date: Sat, 17 Feb 2024 23:03:39 +0100 Subject: [PATCH 1/5] feat: implement tinting for DrawTexture --- raylib.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 87 insertions(+), 4 deletions(-) diff --git a/raylib.js b/raylib.js index a6a0154..34973ee 100644 --- a/raylib.js +++ b/raylib.js @@ -288,6 +288,7 @@ class RaylibJs { var result = new Uint32Array(buffer, result_ptr, 5) var img = new Image(); img.src = filename; + img.crossOrigin = "anonymous"; this.images.push(img); result[0] = this.images.indexOf(img); @@ -304,10 +305,17 @@ class RaylibJs { DrawTexture(texture_ptr, posX, posY, color_ptr) { const buffer = this.wasm.instance.exports.memory.buffer; const [id, width, height, mipmaps, format] = new Uint32Array(buffer, texture_ptr, 5); - // // TODO: implement tinting for DrawTexture - // const tint = getColorFromMemory(buffer, color_ptr); - - this.ctx.drawImage(this.images[id], posX, posY); + const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4); + const img = this.images[id]; + if (img.complete) { + const texture = genTextureTint(img, r, g, b, a) + this.ctx.drawImage(texture, posX, posY); + } else { + img.addEventListener('load', () => { + const texture = genTextureTint(img, r, g, b, a) + this.ctx.drawImage(texture, posX, posY); + }, {once: true}) + } } // TODO: codepoints are not implemented @@ -509,3 +517,78 @@ function getColorFromMemory(buffer, color_ptr) { const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4); return color_hex_unpacked(r, g, b, a); } + +function generateImageFilters(img) { + const w = img.width; + const h = img.height; + let imageFilters = []; + + let canvas = document.createElement("canvas"); + canvas.width = w; + canvas.height = h; + + const ctx = canvas.getContext("2d"); + ctx.drawImage(img, 0, 0); + + const pixels = ctx.getImageData(0, 0, w, h).data; + + for (let rgbI = 0; rgbI < 4; rgbI++) { + let canvas = document.createElement("canvas"); + canvas.width = w; + canvas.height = h; + + const ctx = canvas.getContext("2d"); + ctx.drawImage(img, 0, 0); + const to = ctx.getImageData(0, 0, w, h); + const toData = to.data; + + for (let i = 0, len = pixels.length; i < len; i += 4) { + toData[i] = rgbI === 0 ? pixels[i] : 0; + toData[i + 1] = rgbI === 1 ? pixels[i + 1] : 0; + toData[i + 2] = rgbI === 2 ? pixels[i + 2] : 0; + toData[i + 3] = pixels[i + 3]; + } + + ctx.putImageData(to, 0, 0); + + const imgComp = new Image(); + imgComp.src = canvas.toDataURL(); + imgComp.height = canvas.height; + imgComp.width = canvas.width; + + imageFilters.push(imgComp); + } + + return imageFilters; +} + +function genTextureTint(img, r, g, b, a) { + const imfs = generateImageFilters(img); + const buff = document.createElement("canvas"); + buff.width = img.width; + buff.height = img.height; + const alpha = a / 255; + + const ctx = buff.getContext("2d"); + + ctx.globalAlpha = 1 - alpha; + ctx.globalCompositeOperation = "copy"; + ctx.drawImage(imfs[3], 0, 0); + + ctx.globalCompositeOperation = "lighter"; + if (r > 0) { + ctx.globalAlpha = (r * alpha) / 255.0; + ctx.drawImage(imfs[0], 0, 0); + } + if (g > 0) { + ctx.globalAlpha = (g * alpha) / 255.0; + ctx.drawImage(imfs[1], 0, 0); + } + if (b > 0) { + ctx.globalAlpha = (b * alpha) / 255.0; + ctx.drawImage(imfs[2], 0, 0); + } + + return buff; +} + From 279c176fddcd54d4ef55ffdb8e5a3ae5c9b5f07c Mon Sep 17 00:00:00 2001 From: luxluth Date: Sat, 17 Feb 2024 23:14:32 +0100 Subject: [PATCH 2/5] note: removing eventListener when the image is not loaded yet --- raylib.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/raylib.js b/raylib.js index 34973ee..0aa26d0 100644 --- a/raylib.js +++ b/raylib.js @@ -310,11 +310,6 @@ class RaylibJs { if (img.complete) { const texture = genTextureTint(img, r, g, b, a) this.ctx.drawImage(texture, posX, posY); - } else { - img.addEventListener('load', () => { - const texture = genTextureTint(img, r, g, b, a) - this.ctx.drawImage(texture, posX, posY); - }, {once: true}) } } From ba91e4e637c60ba8ca3db4b473467123dadcaf85 Mon Sep 17 00:00:00 2001 From: luxluth Date: Sun, 18 Feb 2024 00:47:23 +0100 Subject: [PATCH 3/5] feat: adding letter spacing --- raylib.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/raylib.js b/raylib.js index 0aa26d0..a7195dc 100644 --- a/raylib.js +++ b/raylib.js @@ -331,6 +331,7 @@ class RaylibJs { const buffer = this.wasm.instance.exports.memory.buffer; const text = cstr_by_ptr(buffer, text_ptr); const result = new Float32Array(buffer, result_ptr, 2); + this.ctx.letterSpacing = spacing; this.ctx.font = fontSize+"px myfont"; const metrics = this.ctx.measureText(text) result[0] = metrics.width; @@ -342,6 +343,7 @@ class RaylibJs { const text = cstr_by_ptr(buffer, text_ptr); const [posX, posY] = new Float32Array(buffer, position_ptr, 2); const tint = getColorFromMemory(buffer, tint_ptr); + this.ctx.letterSpacing = spacing; this.ctx.fillStyle = tint; this.ctx.font = fontSize+"px myfont"; this.ctx.fillText(text, posX, posY + fontSize); From 2d50a5040cba4089b2140721de57abb4f5d00e2c Mon Sep 17 00:00:00 2001 From: luxluth Date: Sun, 18 Feb 2024 00:49:53 +0100 Subject: [PATCH 4/5] Revert "feat: adding letter spacing" This reverts commit ba91e4e637c60ba8ca3db4b473467123dadcaf85. --- raylib.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/raylib.js b/raylib.js index a7195dc..0aa26d0 100644 --- a/raylib.js +++ b/raylib.js @@ -331,7 +331,6 @@ class RaylibJs { const buffer = this.wasm.instance.exports.memory.buffer; const text = cstr_by_ptr(buffer, text_ptr); const result = new Float32Array(buffer, result_ptr, 2); - this.ctx.letterSpacing = spacing; this.ctx.font = fontSize+"px myfont"; const metrics = this.ctx.measureText(text) result[0] = metrics.width; @@ -343,7 +342,6 @@ class RaylibJs { const text = cstr_by_ptr(buffer, text_ptr); const [posX, posY] = new Float32Array(buffer, position_ptr, 2); const tint = getColorFromMemory(buffer, tint_ptr); - this.ctx.letterSpacing = spacing; this.ctx.fillStyle = tint; this.ctx.font = fontSize+"px myfont"; this.ctx.fillText(text, posX, posY + fontSize); From 086cf1f62c84eef80a296b16749d7128ecb52c94 Mon Sep 17 00:00:00 2001 From: luxluth Date: Sun, 18 Feb 2024 13:25:40 +0100 Subject: [PATCH 5/5] converting texture to image before return --- raylib.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/raylib.js b/raylib.js index 0aa26d0..b1358ee 100644 --- a/raylib.js +++ b/raylib.js @@ -584,6 +584,9 @@ function genTextureTint(img, r, g, b, a) { ctx.drawImage(imfs[2], 0, 0); } - return buff; + const buffImg = new Image(buff.width, buff.height); + buffImg.src = buff.toDataURL() + + return buffImg; }