Nate escreveu
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.