[ts][pixi] Fix existing meshes when attachments are remove, and clippings for slot objects.

spine-ts/spine-pixi/src/Spine.ts

@@ -143,6 +143,7 @@ export class Spine extends Container {
 
 	private lightColor = new Color();
 	private darkColor = new Color();
+	private clippingVertAux = new Float32Array(6);
 
 	constructor (skeletonData: SkeletonData, options?: ISpineOptions) {
 		super();
@@ -225,6 +226,7 @@ export class Spine extends Container {
 	}
 
 	/**
+	 * Check the existence of a mesh for the given slot.
 	 * If you want to manually handle which meshes go on which slot and how you cache, overwrite this method.
 	 */
 	protected hasMeshForSlot(slot: Slot) {
@@ -232,6 +234,7 @@ export class Spine extends Container {
 	}
 
 	/**
+	 * Search the mesh corresponding to the given slot or create it, if it does not exists.
 	 * If you want to manually handle which meshes go on which slot and how you cache, overwrite this method.
 	 */
 	protected getMeshForSlot(slot: Slot): ISlotMesh {
@@ -341,9 +344,15 @@ export class Spine extends Container {
 			if (!pixiMaskSource.computed) {
 				pixiMaskSource.computed = true;
 				const clippingAttachment = pixiMaskSource.slot.attachment as ClippingAttachment;
-				const world = new Array(clippingAttachment.worldVerticesLength);
-				clippingAttachment.computeWorldVertices(pixiMaskSource.slot, 0, clippingAttachment.worldVerticesLength, world, 0, 2);
-				mask.clear().lineStyle(0).beginFill(0x000000).drawPolygon(world);
+				const worldVerticesLength = clippingAttachment.worldVerticesLength;
+				if (this.clippingVertAux.length < worldVerticesLength) this.clippingVertAux = new Float32Array(worldVerticesLength);
+				clippingAttachment.computeWorldVertices(pixiMaskSource.slot, 0, worldVerticesLength, this.clippingVertAux, 0, 2);
+				mask.clear().lineStyle(0).beginFill(0x000000);
+				mask.moveTo(this.clippingVertAux[0], this.clippingVertAux[1]);
+				for (let i = 2; i < worldVerticesLength; i+=2) {
+					mask.lineTo(this.clippingVertAux[i], this.clippingVertAux[i+1]);
+				}
+				mask.finishPoly();
 			}
 			pixiObject.mask = mask;
 		} else if (pixiObject.mask) {
@@ -351,13 +360,13 @@ export class Spine extends Container {
 		}
 	}
 
-	/* 
+	/*
 	* Colors in pixi are premultiplied.
 	* Pixi blending modes are modified to work with premultiplied colors. We cannot create custom blending modes.
 	* Textures are loaded as premultiplied (see assers/atlasLoader.ts: alphaMode: `page.pma ? ALPHA_MODES.PMA : ALPHA_MODES.UNPACK`):
 	* - textures non premultiplied are premultiplied on GPU on upload
 	* - textures premultiplied are uploaded on GPU as is since they are already premultiplied
-	* 
+	*
 	* We need to take this into consideration and calculates final colors for both light and dark color as if textures were always premultiplied.
 	* This implies for example that alpha for dark tint is always 1. This is way in DarkTintRenderer we have only the alpha of the light color.
 	* If we ever want to load texture as non premultiplied on GPU, we must add a new dark alpha parameter to the TintMaterial and set the alpha.
@@ -418,7 +427,7 @@ export class Spine extends Container {
 				continue;
 			} else {
 				if (this.hasMeshForSlot(slot)) {
-					this.getMeshForSlot(slot).renderable = false;
+					this.getMeshForSlot(slot).visible = false;
 				}
 				Spine.clipper.clipEndWithSlot(slot);
 				this.pixiMaskCleanup(slot);