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

[ts][webgl] Physics example with dragging.

Browse Source
This commit is contained in:
Mario Zechner 2023-12-05 16:42:45 +01:00
parent cceaf31107
commit b03b172589
1 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
spine-ts/spine-webgl/example/physics2.html
View File

@ -8,6 +8,7 @@
</style>
<body>
<span style="position: fixed; z-index: 10; top: 0; left: 0; color: white; padding: 1em;">Click and drag anywhere</span>
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
<script>
class App {
@ -43,8 +44,44 @@
// Create an AnimationState, and set the "run" animation in looping mode.
var animationStateData = new spine.AnimationStateData(skeletonData);
this.animationState = new spine.AnimationState(animationStateData);
this.animationState.setAnimation(0, "swing", true);
this.animationState.setAnimation(1, "eyeblink-long", true);
this.animationState.setAnimation(0, "eyeblink-long", true);
// Center the camera on the skeleton
const offset = new spine.Vector2();
const size = new spine.Vector2();
this.skeleton.setToSetupPose();
this.skeleton.update(0);
this.skeleton.updateWorldTransform(spine.Physics.update);
this.skeleton.getBounds(offset, size);
canvas.renderer.camera.position.x = offset.x + size.x / 2;
canvas.renderer.camera.position.y = offset.y + size.y / 2;
// Setup an input listener on the canvas to process touch/mouse events. Allow drawing the skeleton around
// by clicking and dragging anywhere on the canvas.
let lastX = -1, lastY = -1;
canvas.input.addListener({
down: (x, y) => {
// Calculate the mouse position in the coordinate space of the camera, aka world space.
// The skeleton and its bones live in the same coordinate space.
let mousePosition = new spine.Vector3(x, y);
canvas.renderer.camera.screenToWorld(mousePosition, canvas.htmlCanvas.clientWidth, canvas.htmlCanvas.clientHeight);
lastX = mousePosition.x;
lastY = mousePosition.y;
},
dragged: (x, y) => {
// Calculate the mouse position in the coordinate space of the camera, aka world space.
// The skeleton and its bones live in this coordinate space.
let mousePosition = new spine.Vector3(x, y);
canvas.renderer.camera.screenToWorld(mousePosition, canvas.htmlCanvas.clientWidth, canvas.htmlCanvas.clientHeight);
this.skeleton.x += mousePosition.x - lastX;
this.skeleton.y += mousePosition.y - lastY;
lastX = mousePosition.x;
lastY = mousePosition.y;
}
})
}
update(canvas, delta) {