TextureCache.length can't be decreased about melonjs HOT 5 CLOSED

First of all, thank you for the quick answer.

Thank you also for your suggestions on alternatives: for sure I going to try the canvas-like APIs of Renderer, also because, in my case, the potential performance loss shouldn't be a problem at all and also because I'm not sure about the alternative with CanvasTexture.

from melonjs.

the length not being decrease when an image (and corresponding texture) is removed from the cache is definitely a bug, so good catch on that one, and that's definitely something to be fixed.

About your use case and the use of multiple dynamic single texture, one thing to remember is that the amount of single texture you can use is a limit of the machine you are running the game on, and as of today the sweet spot seems still to be around maximum 16 textures (https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_IMAGE_UNITS), remove a couple of them for background or others, and you cannot really go higher than 14 anyway.

I'm not saying this to say there is nothing to fix in melonJS but just to say that maybe there are different approaches :

1. maybe use one big texture (see https://melonjs.github.io/melonJS/docs/melonjs/CanvasTexture.html) in which you create all your blocks dynamically and just keep beside it a table with offset and size of each of them ? Plus performance wise its definitely better to have one big texture rather than using single one for everthying.

2. what about actually literally drawing each piece dynamically ? since version 15.6, the Renderer object also exposes more Canvas drawing like API, and support masking and tinting for sprite drawing, so by mixing drawing and sprite you can have something like :

// save the drawing context
renderer.save();

// rotate renderering context based on the piece current rotation
renderer.rotate(radian);

// draw a shape with different fill and stroke colours
renderer.beginPath();
renderer.moveTo(...);
renderer.lineTo(...);
..
renderer.lineTo(...);
renderer.setColor("#F00");
renderer.closePath();
renderer.fill();
renderer.setColor("A00");
renderer.stroke();

// can also draw a specific shape
renderer.fill(shape);
renderer.stroke(shape);

// add a tinted sprite on top of it
renderer.setTint("F00");
// apply a mask corresponding to the shape type
renderer.setMask(shape);
renderer.drawImage(myImage);

// restore previous drawing context
renderer.restore();

see as well here for an example of primitive drawing

and you can also use different blend mode when drawing sprite over the current context : https://melonjs.github.io/melonJS/docs/melonjs/CanvasRenderer.html#setBlendMode

from melonjs.

also just to comment back on the length issue, it cannot just be decreased. Imagine a scenario where 16 texture unit have been allocated. Length is therefore equals to 16, but if you delete the texture allocate to unit 4, and just decrease length by one, the current code will override the texture currently allocated with the texture unit 15, instead of taking the first non allocated unit within the max range (which is 4 in this example). So that's more what I'm looking at right now on how to fix it. actually remove length, and properly manage a range of texture unit in term of (de)allocation.

from melonjs.

for sure I going to try the canvas-like APIs of Renderer

Even just using tinting and masking are already quite just a super powerful couple of tools already. Look at the below demo, it's just one single sprite draw several times with different cutout mask, different tint, and different rotation. warning as it's a bit psychedelic, but the result is quite nice when you know there is only one sprite being used :
https://melonjs.github.io/examples/masking/

(link to demo and source code : https://github.com/melonjs/melonJS#demos)

let me know how you progress, and I wouldn't complain for a quick demo or even just a video/gif to see how things look :)

from melonjs.

with the 15.8 version now being released, and fixing the issue initially reported here, I'm closing this ticket.

come to show us your progress on the discord examples-progress channel : https://discord.com/channels/608636676461428758/986554136717844503

from melonjs.