Hey,

So I'm finally getting around to changing shaders, and I'm able to do it if I just change it "for the whole app" on runtime, but if I try to change shaders for rendering specific objects (i.e. just water tiles), this doesn't work. Basically the browser just hangs, so I'm assuming I'm doing/reiniting something that I shouldn't be when changing shaders, but it's really not obvious to me -> this is first time I'm trying to use them so I'm probably missing something super obvious about how webGL works, any chance you could have a quick look at my below code?

From some webGL examples from what I understand when changing shaders after useProgram, buffers and vertexAttribs should be re-inited for the shared you're using, but it seems this is causing some sort of overkill when done hundreds of times per frame - do you see something obvious I should just need to remove/Change a bit to get this working? And sorry for wasting your time with what I assume are some of the webGL basics 😅

//////// engineWebGL.js changes

let shaders = { // just defining some different shaders
	base: {
		vs: // vs1 string
		fs: // fs1 string
	}
	custom: {
		vs: // vs2 string
		fs: // fs2 string
	}	
};		
		
let customGLShader;
let usingShader = 0, glVertexData;

function initShaderVertextAttribArray() { // this is essentially moved from glInit, to be able to reinit when I change a shader

    // init buffers
    glCreateBuffer(gl_ARRAY_BUFFER, glVertexData.byteLength, gl_DYNAMIC_DRAW);

    // setup the vertex data array
    let offset =0;// glBatchCount = 0;
    const initVertexAttribArray = (shaderRef, name, type, typeSize, size, normalize=0)=>
    {
        const location = glContext.getAttribLocation(shaderRef, name);
        glContext.enableVertexAttribArray(location);
        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
        offset += size*typeSize;
    };

    let program = (usingShader === 0 ? glShader : customGLShader);
    initVertexAttribArray(program, 'p', gl_FLOAT, 4, 2);            // position
    initVertexAttribArray(program, 't', gl_FLOAT, 4, 2);            // texture coords
    initVertexAttribArray(program, 'c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
    initVertexAttribArray(program, 'a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
}

function glInit() {
	... //unchanged up to below point 

	// setup vertex and fragment shaders
	glShader = glCreateProgram(
		shaders.base.vs                      // end of shader
		,
		shaders.base.fs
		// end of shader
	);

	customGLShader =  glCreateProgram(
		shaders.custom.vs
		,
		shaders.custom.fs
	);

	glVertexData = new ArrayBuffer(gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE);
	glPositionData = new Float32Array(glVertexData);
	glColorData = new Uint32Array(glVertexData);

	glBatchCount = 0;
	initShaderVertextAttribArray();
}
function glPreRender() {
	// everything is the same, instead of using glShader directly, its using this:
	
    let program = (usingShader === 0 ? glShader : customGLShader);
}



////// in-game changes:
function changeToShader(shaderName) {
    usingShader = shaderName;
    initShaderVertextAttribArray();
}


// When rendering an object, I just try to switch shader in a certain situation:

render() {
	if (this.tileIndex >= 256 && this.tileIndex < 320) { // change onyl for certain i.e. water tiles
		changeToShader(1);
	}
	// render stuff here
	
	
	if (this.tileIndex >= 256 && this.tileIndex < 320) {
		changeToShader(0); // change back to original/default shader
	}
}

From what I've looked at this is currently unsupported, or at least can't see a "neat way" to draw an image from the texture, that is NOT following the tileSize and tileIndex "rules".

For example, say I do want to use tiles in most cases, but simply have some objects to draw which are much bigger than the tileSize (and the image has to be bigger, or even not a square, but rectangular (use case can only be inside render functions of objects, and no need to be supported usage by tileLayers).

How could I achieve this to use gl renderer, and be able to use "custom "tileImage spriteCut" parameters", i.e.: sx ... x of which area of the texture to take sy ... y ^^ sw ... w ^^ sh ... h ^^

Would the simplest be to adjust the drawTile tileIndex parameter, that if it's passed as object of sx,sy,sw,sh values, just calculate uvX, uvY differently? I'm not sure if that's all that's needed, as I didn't dive yet into what all the other params of bleed etc. mean.

Any help/point in the right direction much appreciated!

While this is a more complex use case, I could imagine it be useful to a lot, to be able to do animations on tiles when needed, and use tilelayer rendering for them whenever possible for best performance.

TLDR: I'm wondering if it's possible to change data of a tileLayer and redraw just that tile, instead of the whole layer (clearing works, but not redrawing, because of the assert check in drawTileData)

While I could just remove the assert that feels wrong, but so does redrawing the whole layer. Is there something you'd suggest doing here? If this could be done without breaking "the laws of littlejs", it would be an amazing performance improvement to run a ton of temporary animations on tiles when needed

Below is my code, which I intend to later use for basically doing animations on tiles (where I'll temporarily unset tile data, and render animation on the mainContext instead, then when animation ends, fallback to using tileData), but currently I'm just trying to get this working:

let ongoingTileAnimations = []; // stores info about any ongoing tileAnimations, which are then checked and handled every frame

function beginTileAnimation(data) {
    /* function that is used for animating stuff, i.e. if a tile has to be animated, we remove that tile from the tilelayer data,
        perform the animation in a new object we create on the mainCanvas,
        and when animation ends, we restore the original (or modified) tilelayer data at that position
     */

    /* ** signifies required params
    * Data:
    * pos/posTileIndex**
    * tileLayer**
    * animationData: duration**,
    * + any other data I might need for diff animations
    * */

    data.startedAt = realTime;
    data.endAt = realTime + data.animationData.duration;
    if (data.tileLayer) {

        data.originalTileData = tileLayers[data.tileLayer].getData(data.pos);

        tileLayers[data.tileLayer].setData(data.pos, new TileLayerData, 1); // set and clear tile
    }
    ongoingTileAnimations.push(data);
}

function processTileAnimations() { // this function is ran from gameUpdate(), and checks for any ongoing animations
    let animData;
    for(let i=ongoingTileAnimations.length-1; i >= 0; i--) {
        animData = ongoingTileAnimations[i];

        if (animData.endAt <= realTime) {
            /* for now, this examples just attempts to restore tileData after passed time, but here, the setData ASSERT error happens,
            * because the tile is attempting to render a tile, not just a color (in function drawTileData)
            */
            //console.log("animation ended here!, data: " + JSON.stringify(animData));

            tileLayers[animData.tileLayer].setData(animData.pos, animData.originalTileData, 1); // doesn't work <- assert error

            /* // this DOES work, but seems like overkill redrawing whole tileLayer
            tileLayers[animData.tileLayer].setData(animData.pos, animData.originalTileData);
            tileLayers.terrain_pri.redraw();
            */

            ongoingTileAnimations.splice(i, 1); // remove animationData
        }
    }
}

• Typescript is added as an optional dependency
• run npm run update-type-declarations to update the type declarations.
• add a script to generate the type declarations from the JSDocs in the source files
• Typescript users can import the declarations in a project by referencing them in a *.d.ts file via /// <reference types="..." />

I'm not sure if this is a bug, or I should be doing something I'm not.

I have an objectSpawner object, which renders a grid of tiles where you can place based on mouse position, which works like:

1. user clicks UI, and it creates a ObjectSpawner object, and stores a global reference to "objectSpawner", so I can update it when moving mouse etc
2. this objectSpawner has a custom render function that does something like this: for (var pl=0; pl < this.objectsData.length; pl++) { // draw above tileLayers where an object you have has certain range/grid coverage // get color, etc... drawTile(pos, this.drawSize, this.tileIndex, this.tileSize, this.color, this.angle, this.mirror); }

Now this all works fine generally speaking when I place the object properly (which destroyed the object, sets reference of objectSpawner = false and then, it setsData in tileLayers which renders those after), but there's an issue in a situation where user cancels placement, and tileLayers data isn't changed/refreshed (.destroy and reference are cleaned as well), and it apparantely doesn't cause a redraw of the gl layer, and leave the "grid of tiles" still rendered.

What is the correct way to "force a refresh" of the gl layer in such a situation? I currently can do something like this to force a refresh, but it seems hacky at best - is there a more proper way to do this?

drawRect(vec2(1), 1, new Color(1,1,1,0), 0);

I recently made a game using LittleJS and overall had a great experience. But since I like to use ES modules, it was a little awkward using the little engine because it doesn't expose the variables/methods it uses.

I'm looking to build on the previous project, and I wanted to improve this experience so I did a proof of concept turning the engine.all.js file into a file that can be imported ESM-style. See code here: https://github.com/deathraygames/wisdom-of-the-ages/tree/main/src/little-engine-esm The way it works is that if you run little-builder.js it will just append the three files together: little-header.js, engine.all.js (latest from node modules), and little-footer.js. In the footer I'm exposing all the variables and methods, and had to add a few getter and setter methods. The resulting file is little-engine-esm-build.all.js.

Work on the footer is not complete. To expand on this I would add get/set methods for all variables, and avoid exporting them directly. The downside of all of this is that makes the code somewhat larger: 177+ versus 172 KB. But to someone who loves ESM, that trade-off is worth it. Maybe someone has ideas of ways to make this smaller and/or to make the footer generation more automatic?

Would you like to have this kind of ESM build included in the LittleJS repo? If so I can fork and do a PR.

1. I've spent a bit too much time than I'd like on this, figuring out how I can set the direction where the particle emmiter emits to, trying out all different combinations of params. Only to find out, I can easily do it by setting the particleEmitter.angle after creating it.

Unless you dive into the code this is really unclear - imo it would make a lot of sense to add another clear parameter for "emitAngle" that allows users to easily control use.

2. To add onto this, the current particles can only be of square shape -> unless if I used a tile image that was of rectangular shape. But if I want to just use colored particles that are shaped like a rectangle, it's not currently possible. Am I thinking in "the wrong way again", and there's no reason for this to be added, and I should just make a rectangular tile and use that one?

I'm having a bit of a hard time wrapping my head around of how I could apply shaders to a specific layer or all of the canvases based on time, to i.e. be able to continually animate something (for example waves on water tiles) without having to resort to sprite animations which would require redrawing that said layer every frame.

From what I've gathered so far:

• applying a shader to the glCanvas is super straightforward -> anything using GL rendering every frame will simply work with a shader (example of that hover object in example)
• applying shaders to tileLayer only works at the time when they are refreshed/redrawn (i.e. after I click to place an object, it redraws that tileLayer and applies the updated shader)

So if I currently have say water tiles on a tileLayer, and I'd like to use a shader every frame on it, it would require a tileLayer.redraw() every frame, which feels like an overkill. Do you have an idea how something like this would be best to achieve in the current state of the engine?

I assume your post-processing task when done would sort of allow someone to do this quite easily?

I'm attaching an example that modulates the Blue in the shader based on time. The hover grids are drawn on gl, and everything below is are tileLayers - as you can see they are not changing color, until I place something on them (Which redraws those specific tiles):

https://user-images.githubusercontent.com/10269798/142209764-d3a263ad-bab0-406a-ac7c-d553f7183e21.mp4

TLDR: Is it safe to use any amount of different render orders, or is it recommended for some sort of reason to stay under a certain amount?

I'm wondering about something, and if it might cause potential performance issues -> I think not, as the way renderOrder works is just a sort, but just wanted to double check in case I'm missing some intricacy of how it all works under the hood.

Essentially, if I have objects with the same renderOrder, they will be rendered in order of their creation, which can cause situation like this: (top tree being rendered on top):

Now this is easily solvable, if I give every tree a different render order, based on their position (i.e. rendering goes from higher pos.y down to the lowest, and from lowest pos.x to the highest), but i.e. if I had a map of 50x50 then that's potentially 2500 different render orders. I suppose that shouldn't be an issue, as the render order is just a matter of sorting the integers?

Essentially I want to render objects on different layers (but without using tileLayers as they're often animated etc), and I could keep diff objects layered properly, and avoid these render issues like so: Say on a 10x10 map, I have undergrowth & trees layer, I could then say that all:

Undergrowth have a renderOrder of  0 + (100 - (pos.x + levelSize.x * pos.y)) =  (0 - 99)
Trees have a base a renderOrder of 100 + (100 - (pos.x + levelSize.x * pos.y)) (100 - 199)

And this should work with basically any map size and any amount of different layers (besides obviously hardware limit of how many can be rendered at the same time)

Thank you very much for providing this library, I am going to read the source code through Hello World, I know that you don't want to release NPM versions, each JS file is interactive through a lot of global variables, so it has caused a lot of doubts, which JS file from these global variables?

I think it will be easier to understand the principle of this library if we organize the code (such as import or require) in combination with the modularization of JS

Would appreciate an additional legend to be added to debug overlay explaining the various colors/squares:

I assume one of the blues is showing world pos, 1 is showing render pos of the tile or something like that? I could decipher it but a quick glimpse at what these things mean would be great to haves!

Every time the board is updated, the currently possible moves are calculated and shown on the dashboard.

Not a necessary addition, but it kind of keeps me less frustrated. Take it if you see deem it useful.

The touchend event seems to be cancelable on mobile phones.

So the following code will prevent the page focus back sometime.

// try to enable touch mouse
if (isTouchDevice)
{
    // handle all touch events the same way
    let wasTouching, hadTouchInput;
    ontouchstart = ontouchmove = ontouchend = (e)=>
    {
        e.button = 0; // all touches are left click

        // check if touching and pass to mouse events
        const touching = e.touches.length;
        if (touching)
        {
            hadTouchInput || zzfx(0, hadTouchInput=1) ; // fix mobile audio, force it to play a sound the first time

            // set event pos and pass it along
            e.x = e.touches[0].clientX;
            e.y = e.touches[0].clientY;
            wasTouching ? onmousemove(e) : onmousedown(e);
        }
        else if (wasTouching)
            onmouseup(e);

        // set was touching
        wasTouching = touching;

        // prevent normal mouse events from being called
        return !e.cancelable; // 💥 touchend return false
    }
}

For example, if I search for "utilities.abs" on https://killedbyapixel.github.io/LittleJS/docs/Input.html:

abs is listed as returning undefined, but it actually returns a Number.