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

[ts][pixi] Add methods to transform from/to pixi/spine coordinates. Add control bone example to show usage.

Browse Source
This commit is contained in:
Davide Tantillo 2024-05-24 16:37:48 +02:00
parent 68688a7c94
commit 1336255592
2 changed files with 153 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
spine-ts/spine-pixi/example/control-bones-example.html Normal file
View File

@ -0,0 +1,112 @@
<html>
<head>
<meta charset="UTF-8" />
<title>spine-pixi</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
<script src="../dist/iife/spine-pixi.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
<link rel="stylesheet" href="../../index.css">
</head>
<body>
<script>
(async function () {
var app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
resizeTo: window,
backgroundColor: 0x2c3e50,
hello: true,
});
document.body.appendChild(app.view);
app.stage.eventMode = 'static';
app.stage.hitArea = app.screen;
let dragObject = null;
let lastX = -1, lastY = -1;
const endDrag = () => (dragObject = null);
app.stage
.on('pointerup', endDrag)
.on('pointerupoutside', endDrag)
.on('pointermove', (e) => {
if (dragObject) {
let mousePosition = new spine.Vector2(e.data.global.x, e.data.global.y);
dragObject.x += mousePosition.x - lastX;
dragObject.y += mousePosition.y - lastY;
lastX = mousePosition.x;
lastY = mousePosition.y;
}
});
// Pre-load the skeleton data and atlas. You can also load .json skeleton data.
PIXI.Assets.add("stretchymanData", "./assets/stretchyman-pro.skel");
PIXI.Assets.add("stretchymanAtlas", "./assets/stretchyman-pma.atlas");
await PIXI.Assets.load(["stretchymanData", "stretchymanAtlas"]);
// Create the spine display object
const stretchyman = spine.Spine.from("stretchymanData", "stretchymanAtlas", {
autoUpdate: false,
scale: 0.75,
});
// Set the default mix time to use when transitioning
// from one animation to the next.
stretchyman.state.data.defaultMix = 0.2;
// Center the spine object on screen.
stretchyman.x = window.innerWidth / 2;
stretchyman.y = window.innerHeight / 2 + stretchyman.getBounds().height / 2;
// Set animation "run" on track 0, looped.
stretchyman.state.setAnimation(0, "idle", true);
app.stage.addChild(stretchyman);
stretchyman.updateTransform();
const controlBoneNames = [
"back-arm-ik-target",
"back-leg-ik-target",
"front-arm-ik-target",
"front-leg-ik-target",
];
const controlBones = [];
for (var i = 0; i < controlBoneNames.length; i++) {
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
const point = { x: bone.worldX, y: bone.worldY };
stretchyman.skeletonToPixiWorldCoordinates(point);
const control = new PIXI.Graphics()
.beginFill('ff00ff')
.drawCircle(0, 0, 6);
control.x = point.x;
control.y = point.y;
controlBones.push({ bone, control });
app.stage.addChild(control);
control.interactive = "static";
control.on('pointerdown', (e) => {
dragObject = control;
let mousePosition = new spine.Vector2(e.data.global.x, e.data.global.y);
lastX = mousePosition.x;
lastY = mousePosition.y;
})
}
PIXI.Ticker.shared.add(() => {
let point = { x: 0, y: 0 };
for (let { bone, control } of controlBones) {
point.x = control.x;
point.y = control.y;
stretchyman.pixiWorldCoordinatesToBone(point, bone);
bone.x = point.x;
bone.y = point.y;
}
stretchyman.update(PIXI.Ticker.shared.deltaMS / 1000);
})
})();
</script>
</body>
</html>

41
spine-ts/spine-pixi/src/Spine.ts
View File

@ -398,6 +398,47 @@ export class Spine extends Container {
return outPos;
}
/** Converts a point from the skeleton coordinate system to the Pixi world coordinate system. */
skeletonToPixiWorldCoordinates (point: { x: number; y: number }) {
let transform = this.worldTransform;
let a = transform.a,
b = transform.b,
c = transform.c,
d = transform.d,
tx = transform.tx,
ty = transform.ty;
let x = point.x;
let y = point.y;
point.x = x * a + y * c + tx;
point.y = x * b + y * d + ty;
}
/** Converts a point from the Pixi world coordinate system to the skeleton coordinate system. */
pixiWorldCoordinatesToSkeleton (point: { x: number; y: number }) {
let transform = this.worldTransform.clone();
transform = transform.invert();
let a = transform.a,
b = transform.b,
c = transform.c,
d = transform.d,
tx = transform.tx,
ty = transform.ty;
let x = point.x;
let y = point.y;
point.x = x * a + y * c + tx;
point.y = x * b + y * d + ty;
}
/** Converts a point from the Pixi world coordinate system to the bone's local coordinate system. */
pixiWorldCoordinatesToBone (point: { x: number; y: number }, bone: Bone) {
this.pixiWorldCoordinatesToSkeleton(point);
if (bone.parent) {
bone.parent.worldToLocal(point as Vector2);
} else {
bone.worldToLocal(point as Vector2);
}
}
/** A cache containing skeleton data and atlases already loaded by {@link Spine.from}. */
public static readonly skeletonCache: Record<string, SkeletonData> = Object.create(null);