Nate wrote
It sounds like you have a web page where you are putting a WebGL canvas on top of Phaser's rendering. Is that right? In that case, maybe what you want is to remove the WebGL canvas entirely. You can do that like this, where canvasID is the ID of your canvas DOM node:
document.getElementById("canvasID").remove();
If this still doesn't help, I suggest showing an example of what you are doing so we can better understand the problem.
Right, and I can understand that is an effective way.
But remove the WebGL canvas would remove all my skeletons, and having multiple WebGL canvas in my project is not allowed.
So in the beginning, I do such a stupid way like state.update(undefined); to implement clearing a specified skeleton.
Here's my simplified code:
removeSkeleton(targetIndex) {
mySkeletons[targetIndex] = null;
drawEmpty(targetIndex);
}
drawEmpty(targetIndex) {
myStates[targetIndex].update(undefined);
}
update() {
const now = Date.now() / 1000;
for (let i = 0; i < this.mySkeletons.length; i++) {
if(!this.mySkeletons[i]) {
continue;
}
const state = this.myStates[i];
const skeleton = this.mySkeletons[i].skeleton;
let delta;
delta = now - this.lastFrameTimes[i];
this.lastFrameTimes[i] = now;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
this.shader.bind();
this.shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
this.shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, this.mvp.values);
this.batcher.begin(this.shader);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton);
this.batcher.end();
this.shader.unbind();
}
}
This definitely TROLL but somehow it works for me, clearing the target skeleton on my screen.
I was expecting there's something or method that I can do with state, skeleton or something it's own property to achieve clearing.
Now I think it's clear that the best way to use Spine-WebGL is creating canvas DOM for each Spine animation, am I right?
Then, replanning this project may be my following job.
