Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(1 edit)

The engine is ExcaliburJS. About the lighting, since the library does not provide anything related, I achieved a similar (yet very, very raw) effect of "lighting" using a PostProcessing Shader. The approach is straightforward:

Let me describe the shader I used (here) using this stripped version:

// As uniforms, you need (at least)
uniform sampler2D u_image; // current image
uniform vec2 u_resolution; // screen resolution
uniform int u_lightCount; // light count
uniform vec2 u_lightPos[16]; // light position
uniform float u_lightIntensity[16]; // light intensity
in vec2 v_texcoord; // text coords 
out vec4 fragColor; // final color
void main() {
    // Here I get the current pixel color
    vec4 tex = texture(u_image, v_texcoord);
    
    // Compute pixel position
    // Since its a post processing effect, its fairly easy
    vec2 px_pos = vec2(v_texcoord.x * u_resolution.x, (1.0 - v_texcoord.y) * u_resolution.y);
    
    // Find intesity of lighting
    float maxIntensity = 0.0; // here you store the maximum
    for (int i = 0; i < u_lightCount; i++) { // iterate over lights
        vec2 lightPos = u_lightPos[i]; // get light pos (in screen coordinates!)
        float lightIntensity = u_lightIntensity[i]; // get light intensity
        vec2 diff = lightPos - px_pos; // compute distance vector
        float dist = length(diff); // get magnitude of the distance vector
    
        // Enter only if in light range
        if (dist < lightIntensity) {
            float dOverI = (dist / lightIntensity); // divide by maximum distance to get value between 0 and 1
            float intensity = (dOverI > 0.75) ? 0.5 : 1.0; // set intesity to half above 75% of distance
            maxIntensity = max(maxIntensity, intensity); // update maximum
        }
    }
    
    // Set final pixel color using intesity
    fragColor.rgb = tex.rgb * maxIntensity;
    fragColor.a = tex.a; // alpha is untouched
}

It's pretty simple and rough but can get the job done in less time than a solid lighting equation.

Let me know! If you need anything more, send me an email and we can share discord handles and chat there!

Wow javascript huh?  That's amazing.  I guess I need to learn post processing and shaders, thank you so much!