[ts][webgl] Physics example with dragging.

EsotericSoftware · Dec 5, 2023 · b03b172 · b03b172
1 parent cceaf31
commit b03b172
Showing 1 changed file with 39 additions and 2 deletions.
diff --git a/spine-ts/spine-webgl/example/physics2.html b/spine-ts/spine-webgl/example/physics2.html
@@ -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) {