UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-24 10:41:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Simplified clip to div by using scissor rather than changing viewport+camera.

Browse Source 
In this way we can treat coordinates equally for cliped and not clipped widgets!
This commit is contained in:
Davide Tantillo 2024-12-13 11:08:10 +01:00
parent 2b6e1ff578
commit 89976b7f48
1 changed files with 25 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -1311,47 +1311,21 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.renderer.context.gl.clear(this.renderer.context.gl.COLOR_BUFFER_BIT); this.renderer.context.gl.clear(this.renderer.context.gl.COLOR_BUFFER_BIT);
} }
const clipToBoundStart = (divBounds: Rectangle) => { const startScissor = (divBounds: Rectangle) => {
// break current batch and start a new one
this.renderer.end(); this.renderer.end();
this.renderer.begin();
// set the new viewport to the div bound this.renderer.context.gl.enable(this.renderer.context.gl.SCISSOR_TEST);
const viewportWidth = this.screenToWorldLength(divBounds.width); this.renderer.context.gl.scissor(
const viewporthHeight = this.screenToWorldLength(divBounds.height);
this.renderer.context.gl.viewport(
this.screenToWorldLength(divBounds.x), this.screenToWorldLength(divBounds.x),
this.canvas.height - this.screenToWorldLength(divBounds.y + divBounds.height), this.canvas.height - this.screenToWorldLength(divBounds.y + divBounds.height),
viewportWidth, this.screenToWorldLength(divBounds.width),
viewporthHeight this.screenToWorldLength(divBounds.height)
); );
this.renderer.camera.setViewport(viewportWidth, viewporthHeight);
this.renderer.camera.update();
// start the new batch that will be filled with only this skeleton
this.renderer.begin();
// Debug viewport
// if (true) {
// this.renderer.circle(true, -viewportWidth / 2, -viewporthHeight / 2, 20, red);
// this.renderer.circle(true, viewportWidth / 2, -viewporthHeight / 2, 20, red);
// this.renderer.circle(true, -viewportWidth / 2, viewporthHeight / 2, 20, red);
// this.renderer.circle(true, viewportWidth / 2, viewporthHeight / 2, 20, red);
// this.renderer.circle(true, 0, 0, 10, red);
// this.renderer.rect(true, 0, 0, -viewportWidth, -viewporthHeight, transparentWhite);
// this.renderer.rect(true, 0, 0, viewportWidth, viewporthHeight, transparentWhite);
// }
} }
const clipToBoundEnd = () => { const endScissor = () => {
// end clip batch
this.renderer.end(); this.renderer.end();
this.renderer.context.gl.disable(this.renderer.context.gl.SCISSOR_TEST);
this.renderer.context.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
this.renderer.camera.setViewport(this.canvas.width, this.canvas.height);
this.renderer.camera.update();
// start new normal batch
this.renderer.begin(); this.renderer.begin();
} }
@ -1380,33 +1354,27 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
const { padLeft, padRight, padTop, padBottom } = widget const { padLeft, padRight, padTop, padBottom } = widget
const paddingShiftHorizontal = (padLeft - padRight) / 2; const paddingShiftHorizontal = (padLeft - padRight) / 2;
const paddingShiftVertical = (padTop - padBottom) / 2; const paddingShiftVertical = (padTop - padBottom) / 2;
let divOriginX = 0;
let divOriginY = 0; // get the desired point into the the div (center by default) in world coordinate
if (clip) { const divX = divBounds.x + divBounds.width * ((xAxis + .5) + paddingShiftHorizontal);
// in clip mode, the world origin is the div center (divBounds center) const divY = divBounds.y + divBounds.height * ((-yAxis + .5) + paddingShiftVertical) - 1;
clipToBoundStart(divBounds); this.screenToWorld(tempVector, divX, divY);
divOriginX = this.screenToWorldLength(divBounds.width * (xAxis + paddingShiftHorizontal)); let divOriginX = tempVector.x;
divOriginY = this.screenToWorldLength(divBounds.height * (yAxis - paddingShiftVertical)); let divOriginY = tempVector.y;
} else {
// get the desired point into the the div (center by default) in world coordinate
const divX = divBounds.x + divBounds.width * ((xAxis + .5) + paddingShiftHorizontal);
const divY = divBounds.y + divBounds.height * ((-yAxis + .5) + paddingShiftVertical) - 1;
this.screenToWorld(tempVector, divX, divY);
divOriginX = tempVector.x;
divOriginY = tempVector.y;
}
const paddingShrinkWidth = 1 - (padLeft + padRight); const paddingShrinkWidth = 1 - (padLeft + padRight);
const paddingShrinkHeight = 1 - (padTop + padBottom); const paddingShrinkHeight = 1 - (padTop + padBottom);
const divWidthWorld = this.screenToWorldLength(divBounds.width * paddingShrinkWidth); const divWidthWorld = this.screenToWorldLength(divBounds.width * paddingShrinkWidth);
const divHeightWorld = this.screenToWorldLength(divBounds.height * paddingShrinkHeight); const divHeightWorld = this.screenToWorldLength(divBounds.height * paddingShrinkHeight);
if (clip) startScissor(divBounds);
if (loading) { if (loading) {
if (loadingSpinner) { if (loadingSpinner) {
if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer); if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer);
widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY); widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY);
} }
if (clip) clipToBoundEnd(); if (clip) endScissor();
return; return;
} }
@ -1499,19 +1467,14 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
widget.dragBoundsRectangle.width = this.worldToScreenLength(aw * skeleton.scaleX); widget.dragBoundsRectangle.width = this.worldToScreenLength(aw * skeleton.scaleX);
widget.dragBoundsRectangle.height = this.worldToScreenLength(ah * skeleton.scaleY); widget.dragBoundsRectangle.height = this.worldToScreenLength(ah * skeleton.scaleY);
if (clip) { if (debug) {
widget.dragBoundsRectangle.x += divBounds.x; widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`;
widget.dragBoundsRectangle.y += divBounds.y; widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`;
widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`;
widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`;
if (!widget.debugDragDiv.isConnected) document.body.appendChild(widget.debugDragDiv);
} }
if (debug && !widget.debugDragDiv.isConnected) {
document.body.appendChild(widget.debugDragDiv);
}
widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`;
widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`;
widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`;
widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`;
if (!debug && widget.debugDragDiv.isConnected) widget.debugDragDiv.remove(); if (!debug && widget.debugDragDiv.isConnected) widget.debugDragDiv.remove();
} else { } else {
if (widget.debugDragDiv.isConnected) widget.debugDragDiv.remove(); if (widget.debugDragDiv.isConnected) widget.debugDragDiv.remove();
@ -1549,7 +1512,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
if (elementRef === widget) widget.classList.remove("debug-background-color"); if (elementRef === widget) widget.classList.remove("debug-background-color");
} }
if (clip) clipToBoundEnd(); if (clip) endScissor();
} }
}); });