Skip to content

Commit

Permalink
use multiplication instead mix color
Browse files Browse the repository at this point in the history
  • Loading branch information
@iLauncherDev
iLauncherDev committed Sep 12, 2024
1 parent 8a37f9c commit 239c80f
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 50 deletions.
46 changes: 21 additions & 25 deletions iLGE-2d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,11 +374,9 @@ class iLGE_2D_GameObject_Font {
}

class iLGE_2D_GameObject_Component_Sprite {
enableColorReplacement = false;
colorTolerance = 0.25;
blendFactor = 0.5;
inputColor = "#000000";
replaceColor = "#000000";
useGrayscaleMultiplier = false;
multiplyFactor = 1;
targetColor = "#ffffff";

image = 0;
type = iLGE_2D_GameObject_Component_Type_Sprite;
Expand Down Expand Up @@ -2006,7 +2004,6 @@ class iLGE_2D_Engine {
*/
#draw_camera_scene(viewer, camera, vcamera, objects) {
const context = viewer.canvas_context;
const transforms = context.transforms;

for (let object of objects) {
switch (object.type) {
Expand Down Expand Up @@ -2064,15 +2061,7 @@ class iLGE_2D_Engine {
}
break;
case iLGE_2D_GameObject_Component_Type_Sprite:
if (context.isCustomCanvas) {
transforms.image.enableColorReplacement = component.enableColorReplacement;
transforms.image.colorTolerance = component.colorTolerance;
transforms.image.blendFactor = component.blendFactor;
transforms.image.inputColor =
context.parseColor(component.inputColor);
transforms.image.replaceColor =
context.parseColor(component.replaceColor);
}
this.#setSpriteFlags(context, component);

this.#drawImage(
context, component.image,
Expand Down Expand Up @@ -2398,10 +2387,25 @@ class iLGE_2D_Engine {
return effect_frame;
}

#draw_hud(objects) {
/**
*
* @param {iLGE_Canvas} canvas_context
*/
#setSpriteFlags(canvas_context, component) {
const context = this.canvas_context;
const transforms = context.transforms;

if (context.isCustomCanvas) {
transforms.image.useGrayscaleMultiplier = component.useGrayscaleMultiplier;
transforms.image.multiplyFactor = component.multiplyFactor;
transforms.image.targetColor =
context.parseColor(component.targetColor);
}
}

#draw_hud(objects) {
const context = this.canvas_context;

for (let object of objects) {
switch (object.type) {
case iLGE_2D_GameObject_Type_GameObject:
Expand Down Expand Up @@ -2455,15 +2459,7 @@ class iLGE_2D_Engine {
}
break;
case iLGE_2D_GameObject_Component_Type_Sprite:
if (context.isCustomCanvas) {
transforms.image.enableColorReplacement = component.enableColorReplacement;
transforms.image.colorTolerance = component.colorTolerance;
transforms.image.blendFactor = component.blendFactor;
transforms.image.inputColor =
context.parseColor(component.inputColor);
transforms.image.replaceColor =
context.parseColor(component.replaceColor);
}
this.#setSpriteFlags(context, component);

this.#drawImage(
context, component.image,
Expand Down
46 changes: 21 additions & 25 deletions iLGE-Canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,10 @@ class iLGE_Canvas {
uniform vec4 uColor;
uniform sampler2D uSampler;
uniform int uIsImage;
uniform int uEnableColorReplacement;
uniform int uUseGrayscaleMultiplier;
uniform float uAlpha;
uniform float uBlendFactor;
uniform float uColorTolerance;
uniform vec4 uInputColor;
uniform vec4 uReplaceColor;
uniform float uMultiplyFactor;
uniform vec4 uTargetColor;
varying vec2 vTexCoord;
void main(void) {
Expand All @@ -72,11 +70,15 @@ class iLGE_Canvas {
if (uIsImage == 1) {
vec4 texColor = texture2D(uSampler, vTexCoord);
if (uEnableColorReplacement == 1 && length(texColor.rgba - uInputColor.rgba) < uColorTolerance) {
vec4 blendedColor = mix(texColor, uReplaceColor, uBlendFactor);
color = blendedColor;
} else {
color = texColor;
float multiplyFactor = uMultiplyFactor;
float invertedMultiplyFactor = 1.0 - multiplyFactor;
color = texColor;
if (uUseGrayscaleMultiplier == 1){
if (texColor.r == texColor.g && texColor.g == texColor.b) {
color = (texColor.rgba * invertedMultiplyFactor) + (texColor.rgba * multiplyFactor) * uTargetColor.rgba;
}
}
} else {
color = uColor;
Expand Down Expand Up @@ -108,11 +110,9 @@ class iLGE_Canvas {
this.isImageLocation = gl.getUniformLocation(this.program, 'uIsImage');
this.alphaLocation = gl.getUniformLocation(this.program, 'uAlpha');

this.enableColorReplacementLocation = gl.getUniformLocation(this.program, 'uEnableColorReplacement');
this.blendFactorLocation = gl.getUniformLocation(this.program, 'uBlendFactor');
this.colorToleranceLocation = gl.getUniformLocation(this.program, 'uColorTolerance');
this.inputColorLocation = gl.getUniformLocation(this.program, 'uInputColor');
this.replaceColorLocation = gl.getUniformLocation(this.program, 'uReplaceColor');
this.useGrayscaleMultiplierLocation = gl.getUniformLocation(this.program, 'uUseGrayscaleMultiplier');
this.multiplyFactorLocation = gl.getUniformLocation(this.program, "uMultiplyFactor");
this.targetColorLocation = gl.getUniformLocation(this.program, 'uTargetColor');

this.positionLocation = gl.getAttribLocation(this.program, 'aVertexPosition');
this.texCoordLocation = gl.getAttribLocation(this.program, 'aTexCoord');
Expand Down Expand Up @@ -196,11 +196,9 @@ class iLGE_Canvas {
*/
const gl = this.canvas_context;

gl.uniform1i(this.enableColorReplacementLocation, this.transforms.image.enableColorReplacement);
gl.uniform1f(this.colorToleranceLocation, this.transforms.image.colorTolerance);
gl.uniform1f(this.blendFactorLocation, this.transforms.image.blendFactor);
gl.uniform4fv(this.inputColorLocation, new Float32Array(this.transforms.image.inputColor));
gl.uniform4fv(this.replaceColorLocation, new Float32Array(this.transforms.image.replaceColor));
gl.uniform1i(this.useGrayscaleMultiplierLocation, this.transforms.image.useGrayscaleMultiplier);
gl.uniform1f(this.multiplyFactorLocation, this.transforms.image.multiplyFactor);
gl.uniform4fv(this.targetColorLocation, new Float32Array(this.transforms.image.targetColor));

gl.uniform1f(this.alphaLocation, this.transforms.globalAlpha);
gl.uniformMatrix4fv(
Expand Down Expand Up @@ -520,11 +518,9 @@ class iLGE_Canvas {

this.transforms = {
image: {
enableColorReplacement: false,
colorTolerance: 0.25,
blendFactor: 0.5,
inputColor: [0.0, 0.0, 0.0, 1.0],
replaceColor: [0.0, 0.0, 0.0, 1.0],
multiplyFactor: 1,
useGrayscaleMultiplier: false,
targetColor: "#ffffff",
},

strokeLineSize: 1.0,
Expand Down

0 comments on commit 239c80f

Please sign in to comment.