Fixed bounds...finally!

This commit is contained in:
Davide Tantillo 2025-08-13 11:45:33 +02:00
parent 50e8104e7c
commit 17a2b17f8a

View File

@ -1,6 +1,6 @@
// / <reference types="editor/sdk" /> // / <reference types="editor/sdk" />
import type { AnimationState, AssetLoader, Skeleton, SkeletonRendererCore, SpineBoundsProvider, TextureAtlas } from "@esotericsoftware/spine-construct3-lib"; import { AnimationState, AssetLoader, Skeleton, SkeletonRendererCore, SpineBoundsProvider, TextureAtlas } from "@esotericsoftware/spine-construct3-lib";
const SDK = globalThis.SDK; const SDK = globalThis.SDK;
@ -27,19 +27,21 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
private assetLoader: AssetLoader; private assetLoader: AssetLoader;
private skeletonRenderer: SkeletonRendererCore; private skeletonRenderer: SkeletonRendererCore;
private offsetX = 0;
private offsetY = 0;
private offsetWidth = 0;
private offsetHeight = 0;
private positioningBounds = false; private positioningBounds = false;
private spineBoundsProviderType: SpineBoundsProviderType = "setup"; private spineBoundsProviderType: SpineBoundsProviderType = "setup";
private spineBoundsProvider?: SpineBoundsProvider; private spineBoundsProvider?: SpineBoundsProvider;
private _spineBounds?: { private spineBounds?: {
x: number; x: number;
y: number; y: number;
width: number; width: number;
height: number; height: number;
}; };
private initialBounds = {
x: 0,
y: 0,
width: 0,
height: 0,
};
constructor (sdkType: SDK.ITypeBase, inst: SDK.IWorldInstance) { constructor (sdkType: SDK.ITypeBase, inst: SDK.IWorldInstance) {
super(sdkType, inst); super(sdkType, inst);
@ -64,7 +66,6 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
private tempVertices = new Float32Array(4096); private tempVertices = new Float32Array(4096);
Draw (iRenderer: SDK.Gfx.IWebGLRenderer, iDrawParams: SDK.Gfx.IDrawParams) { Draw (iRenderer: SDK.Gfx.IWebGLRenderer, iDrawParams: SDK.Gfx.IDrawParams) {
console.log("DRAW");
this.layoutView ||= iDrawParams.GetLayoutView(); this.layoutView ||= iDrawParams.GetLayoutView();
this.renderer ||= iRenderer; this.renderer ||= iRenderer;
@ -74,34 +75,24 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
if (this.skeleton) { if (this.skeleton) {
this.setSkin(); this.setSkin();
let x = this.overallOffsetX; let offsetX = this.baseOffsetX;
let y = this.overallOffsetY; let offsetY = this.baseOffsetY;
let offsetAngle = this.baseAngleOffset;
let width = this.offsetWidth;
let height = this.offsetHeight;
if (!this.positioningBounds) { if (!this.positioningBounds) {
x += this._inst.GetX(); this.baseScaleX = this._inst.GetWidth() / this.initialBounds.width;
y += this._inst.GetY(); this.baseScaleY = this._inst.GetHeight() / this.initialBounds.height;
width = this._inst.GetWidth(); offsetX += this._inst.GetX();
height = this._inst.GetHeight(); offsetY += this._inst.GetY();
} else { offsetAngle += this._inst.GetAngle();
// x += this._inst.GetX();
// y += this._inst.GetY();
// width += this._inst.GetWidth();
// height += this._inst.GetHeight();
} }
const rx = width / this._spineBounds!.width; this.skeleton.scaleX = this.baseScaleX;
this.skeleton.scaleY = this.baseScaleY;
console.log(width, this._spineBounds!.width, rx); const cos = Math.cos(offsetAngle);
const sin = Math.sin(offsetAngle);
const ry = height / this._spineBounds!.height;
this.skeleton.scaleX = rx;
this.skeleton.scaleY = ry;
this.update(0); this.update(0);
let command = this.skeletonRenderer.render(this.skeleton); let command = this.skeletonRenderer.render(this.skeleton);
while (command) { while (command) {
const { numVertices, positions, uvs, indices, numIndices } = command; const { numVertices, positions, uvs, indices, numIndices } = command;
@ -110,14 +101,15 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
for (let i = 0; i < numVertices; i++) { for (let i = 0; i < numVertices; i++) {
const srcIndex = i * 2; const srcIndex = i * 2;
const dstIndex = i * 3; const dstIndex = i * 3;
vertices[dstIndex] = positions[srcIndex] + x; const x = positions[srcIndex];
vertices[dstIndex + 1] = positions[srcIndex + 1] + y; const y = positions[srcIndex + 1];
vertices[dstIndex] = x * cos - y * sin + offsetX;
vertices[dstIndex + 1] = x * sin + y * cos + offsetY;
vertices[dstIndex + 2] = 0; vertices[dstIndex + 2] = 0;
} }
iRenderer.SetAlphaBlend(); iRenderer.SetAlphaBlend();
iRenderer.SetTexture(command.texture.texture); iRenderer.SetTexture(command.texture.texture);
iRenderer.DrawMesh( iRenderer.DrawMesh(
vertices.subarray(0, numVertices * 3), vertices.subarray(0, numVertices * 3),
uvs.subarray(0, numVertices * 2), uvs.subarray(0, numVertices * 2),
@ -127,10 +119,10 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
command = command.next; command = command.next;
} }
// iRenderer.SetAlphaBlend(); iRenderer.SetAlphaBlend();
// iRenderer.SetColorFillMode(); iRenderer.SetColorFillMode();
// iRenderer.SetColorRgba(0.25, 0, 0, 0.25); iRenderer.SetColorRgba(0.25, 0, 0, 0.25);
// iRenderer.LineRect(this._inst.GetX(), this._inst.GetY(), this._inst.GetWidth(), this._inst.GetHeight()); iRenderer.LineQuad(this._inst.GetQuad());
} else { } else {
// render placeholder // render placeholder
@ -146,11 +138,14 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
} }
} }
private overallOffsetX = 0; private baseOffsetX = 0;
private overallOffsetY = 0; private baseOffsetY = 0;
private overallScaleX = 1 private baseAngleOffset = 0;
private baseScaleX = 0;
private baseScaleY = 0;
async OnPropertyChanged (id: string, value: EditorPropertyValueType) { async OnPropertyChanged (id: string, value: EditorPropertyValueType) {
console.log("Prop change - Name: " + id + " - Value: " + value); console.log(`Prop change - Name: ${id} - Value: ${value}`);
switch (id) { switch (id) {
case PLUGIN_CLASS.PROP_ATLAS: case PLUGIN_CLASS.PROP_ATLAS:
@ -169,54 +164,22 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
this.setC3Bounds(true); this.setC3Bounds(true);
this.layoutView?.Refresh(); this.layoutView?.Refresh();
break; break;
case PLUGIN_CLASS.PROP_BOUNDS_PROVIDER_MOVE: case PLUGIN_CLASS.PROP_BOUNDS_PROVIDER_MOVE: {
value = value as boolean value = value as boolean
if (value) { if (value) {
this.overallOffsetX += this._inst.GetX(); this.baseOffsetX += this._inst.GetX();
this.overallOffsetY += this._inst.GetY(); this.baseOffsetY += this._inst.GetY();
this.offsetX = this._inst.GetX(); this.baseAngleOffset += this._inst.GetAngle();
this.offsetY = this._inst.GetY();
this.offsetWidth = this._inst.GetWidth();
this.offsetHeight = this._inst.GetHeight();
} else { } else {
const w = this.offsetWidth; this.initialBounds.width = this._inst.GetWidth() / this.baseScaleX;
this.initialBounds.height = this._inst.GetHeight() / this.baseScaleY;
this.overallOffsetX -= this._inst.GetX(); this.baseOffsetX -= this._inst.GetX();
this.overallOffsetY -= this._inst.GetY(); this.baseOffsetY -= this._inst.GetY();
this.offsetX -= this._inst.GetX(); this.baseAngleOffset -= this._inst.GetAngle();
this.offsetY -= this._inst.GetY();
this.offsetWidth -= this._inst.GetWidth();
this.offsetHeight -= this._inst.GetHeight();
console.log("OFFSETS");
console.log(this.offsetX);
console.log(this.offsetY);
console.log(this.overallOffsetX);
console.log(this.overallOffsetY);
console.log("OFFSETS");
this.spineBoundsProvider = new spine.AABBRectangleBoundsProvider(
this._spineBounds!.x - this.offsetX,
this._spineBounds!.y - this.offsetY,
this._spineBounds!.width - this.offsetWidth,
this._spineBounds!.height - this.offsetHeight,
);
this._spineBounds = this.spineBoundsProvider.calculateBounds(this);
const { x, y, width, height } = this._spineBounds;
console.log(this._inst.GetX(), this._inst.GetY());
console.log(x, y, width, height, (-x) / width, (-y) / height);
// this._inst.SetSize(width, height);
// this._inst.SetOrigin(-x / width, -y / height);
} }
this.positioningBounds = value; this.positioningBounds = value;
break; break;
}
} }
console.log("Prop change end"); console.log("Prop change end");
@ -281,6 +244,7 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
this.setSkin(); this.setSkin();
this.setC3Bounds(true); this.setC3Bounds(true);
this.layoutView?.Refresh();
console.log("SKELETON LOADED"); console.log("SKELETON LOADED");
} }
} }
@ -304,10 +268,10 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
} }
this.spineBounds = this.spineBoundsProvider.calculateBounds(this);
this.initialBounds = this.spineBoundsProvider.calculateBounds(this);
this._spineBounds = this.spineBoundsProvider.calculateBounds(this); const { x, y, width, height } = this.spineBounds;
const { x, y, width, height } = this._spineBounds;
if (width <= 0 || height <= 0 || !init) return; if (width <= 0 || height <= 0 || !init) return;
@ -351,20 +315,20 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
} }
GetOriginalWidth () { GetOriginalWidth () {
if (!this._spineBounds) return 100; if (!this.spineBounds) return 100;
return this._spineBounds.width; return this.spineBounds.width;
} }
GetOriginalHeight () { GetOriginalHeight () {
if (!this._spineBounds) return 100; if (!this.spineBounds) return 100;
return this._spineBounds.height; return this.spineBounds.height;
} }
OnMakeOriginalSize () { OnMakeOriginalSize () {
if (!this._spineBounds) if (!this.spineBounds)
this._inst.SetSize(100, 100); this._inst.SetSize(100, 100);
else else
this._inst.SetSize(this._spineBounds.width, this._spineBounds.height); this._inst.SetSize(this.spineBounds.width, this.spineBounds.height);
} }
HasDoubleTapHandler () { HasDoubleTapHandler () {
@ -373,8 +337,8 @@ class MyDrawingInstance extends SDK.IWorldInstanceBase {
OnDoubleTap () { } OnDoubleTap () { }
LoadC2Property (name: string, valueString: string) { LoadC2Property (_name: string, _valueString: string) {
return false; // not handled return false;
} }
}; };