Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts][webgl] Additional physics samples

Mario Zechner 1 year ago
parent
55f2d6863b
commit
8c515501ee
3 changed files with 338 additions and 196 deletions
Unified View Show Diff Stats
  1. 161 196
      spine-ts/index.html
  2. 89 0
      spine-ts/spine-webgl/example/physics3.html
  3. 88 0
      spine-ts/spine-webgl/example/physics4.html

+ 161 - 196
spine-ts/index.html
View File 

@@ -1,201 +1,166 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <title>spine-ts Examples</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="stylesheet" href="index.css" />
 
-  </head>
 
 
 
-  <body>
 
-    <div style="width: 300px; margin: 0 auto">
 
-      <h1>spine-ts Examples</h1>
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <title>spine-ts Examples</title>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <link rel="stylesheet" href="index.css" />
 
+</head>
 
+
 
+<body>
 
+  <div style="width: 300px; margin: 0 auto">
 
+    <h1>spine-ts Examples</h1>
 
+    <ul>
 
+      <li>Canvas</li>
 
+      <ul>
 
+        <li><a href="/spine-canvas/example">Example</a></li>
 
+        <li>
 
+          <a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
 
+        </li>
 
+      </ul>
 
+      <li>Pixi</li>
 
+      <ul>
 
+        <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
 
+        <li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
 
+        <li>
 
+          <a href="/spine-pixi/example/events-example.html">Events example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-pixi/example/simple-input.html">Simple input</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
 
+        </li>
 
+      </ul>
 
+      <li>Phaser</li>
 
+      <ul>
 
+        <li>
 
+          <a href="/spine-phaser/example/basic-example.html">Basic example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/events-example.html">Events example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/mix-and-match-example.html">Mix and match example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/arcade-physics-example.html">Arcade physics example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/control-bones-example.html">Control bones example</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/batching-test.html">Batching test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/multi-scene-test.html">Multi-scene test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/visibility-test.html">Visibility test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/visibility-test-container.html">Visibility test (container)</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/blend-test.html">Blend test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/camera-pipeline-test.html">Camera pipeline test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/extended-class-test.html">Extended class</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/depth-test.html">Depth test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/render-to-texture-test.html">Render to texture test</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/custom-spine-object-type.html">Custom object factory name</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-phaser/example/add-existing.html">Add existing object</a>
 
+        </li>
 
+      </ul>
 
+      <li>Player</li>
 
+      <ul>
 
+        <li><a href="/spine-player/example/example.html">Example</a></li>
 
+        <li><a href="/spine-player/example/physics.html">Physics</a></li>
 
+        <li><a href="/spine-player/example/editor.html">Editor</a></li>
 
+        <li>
 
+          <a href="/spine-player/example/embedding-binary-example.html">Embedding binary</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-player/example/embedding-json-example.html">Embedding JSON</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-player/example/dispose.html">Disposing a player</a>
 
+        </li>
 
+      </ul>
 
+      <li>WebGL</li>
 
       <ul>
 
       <ul>
 
-        <li>Canvas</li>
 
-        <ul>
 
-          <li><a href="/spine-canvas/example">Example</a></li>
 
-          <li>
 
-            <a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
 
-          </li>
 
-        </ul>
 
-        <li>Pixi</li>
 
-        <ul>
 
-          <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
 
-          <li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
 
-          <li>
 
-            <a href="/spine-pixi/example/events-example.html">Events example</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-pixi/example/simple-input.html">Simple input</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
 
-          </li>
 
-        </ul>
 
-        <li>Phaser</li>
 
-        <ul>
 
-          <li>
 
-            <a href="/spine-phaser/example/basic-example.html">Basic example</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/events-example.html"
 
-              >Events example</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/mix-and-match-example.html"
 
-              >Mix and match example</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/arcade-physics-example.html"
 
-              >Arcade physics example</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/control-bones-example.html"
 
-              >Control bones example</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/batching-test.html">Batching test</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/multi-scene-test.html"
 
-              >Multi-scene test</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/visibility-test.html"
 
-              >Visibility test</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/visibility-test-container.html"
 
-              >Visibility test (container)</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/blend-test.html">Blend test</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/camera-pipeline-test.html"
 
-              >Camera pipeline test</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/extended-class-test.html"
 
-              >Extended class</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/depth-test.html">Depth test</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/render-to-texture-test.html"
 
-              >Render to texture test</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/custom-spine-object-type.html"
 
-              >Custom object factory name</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-phaser/example/add-existing.html"
 
-              >Add existing object</a
 
-            >
 
-          </li>
 
-        </ul>
 
-        <li>Player</li>
 
-        <ul>
 
-          <li><a href="/spine-player/example/example.html">Example</a></li>
 
-          <li><a href="/spine-player/example/physics.html">Physics</a></li>
 
-          <li><a href="/spine-player/example/editor.html">Editor</a></li>
 
-          <li>
 
-            <a href="/spine-player/example/embedding-binary-example.html"
 
-              >Embedding binary</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-player/example/embedding-json-example.html"
 
-              >Embedding JSON</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-player/example/dispose.html">Disposing a player</a>
 
-          </li>
 
-        </ul>
 
-        <li>WebGL</li>
 
-        <ul>
 
-          <li><a href="/spine-webgl/example">Example</a></li>
 
-          <li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
 
-          <li><a href="/spine-webgl/example/physics.html">Physics</a></li>
 
-          <li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
 
-          <li>
 
-            <a href="/spine-webgl/example/mix-and-match.html"
 
-              >Mix &amp; match</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-webgl/example/custom-attachment.html"
 
-              >Custom attachment</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-webgl/example/drag-and-drop.html"
 
-              >Drag &amp; drop</a
 
-            >
 
-          </li>
 
-          <li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
 
-          <li>
 
-            <a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
 
-          </li>
 
-          <li>
 
-            <a href="/spine-webgl/demos/additiveblending.html"
 
-              >Additive blending</a
 
-            >
 
-          </li>
 
-          <li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
 
-          <li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
 
-          <li>
 
-            <a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
 
-          </li>
 
-          <li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
 
-          <li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
 
-          <li>
 
-            <a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
 
-          </li>
 
-          <li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
 
-          <li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
 
-          <li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
 
-          <li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
 
-          <li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
 
-        </ul>
 
-        <li>THREE.JS</li>
 
-        <ul>
 
-          <li><a href="/spine-threejs/example/index.html">Example</a></li>
 
-          <li>
 
-            <a href="/spine-threejs/example/coordinate-transform.html"
 
-              >Coordinate transform</a
 
-            >
 
-          </li>
 
-          <li>
 
-            <a href="/spine-threejs/example/logarithmic-depth-buffer.html"
 
-              >Logarithmic depth buffer</a
 
-            >
 
-          </li>
 
-        </ul>
 
+        <li><a href="/spine-webgl/example">Example</a></li>
 
+        <li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
 
+        <li><a href="/spine-webgl/example/physics.html">Physics</a></li>
 
+        <li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
 
+        <li><a href="/spine-webgl/example/physics3.html">Physics III</a></li>
 
+        <li><a href="/spine-webgl/example/physics4.html">Physics IV</a></li>
 
+        <li>
 
+          <a href="/spine-webgl/example/mix-and-match.html">Mix &amp; match</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-webgl/example/custom-attachment.html">Custom attachment</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-webgl/example/drag-and-drop.html">Drag &amp; drop</a>
 
+        </li>
 
+        <li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
 
+        <li>
 
+          <a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-webgl/demos/additiveblending.html">Additive blending</a>
 
+        </li>
 
+        <li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
 
+        <li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
 
+        <li>
 
+          <a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
 
+        </li>
 
+        <li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
 
+        <li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
 
+        <li>
 
+          <a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
 
+        </li>
 
+        <li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
 
+        <li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
 
+        <li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
 
+        <li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
 
+        <li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
 
       </ul>
 
       </ul>
 
-    </div>
 
-  </body>
 
-</html>
 
+      <li>THREE.JS</li>
 
+      <ul>
 
+        <li><a href="/spine-threejs/example/index.html">Example</a></li>
 
+        <li>
 
+          <a href="/spine-threejs/example/coordinate-transform.html">Coordinate transform</a>
 
+        </li>
 
+        <li>
 
+          <a href="/spine-threejs/example/logarithmic-depth-buffer.html">Logarithmic depth buffer</a>
 
+        </li>
 
+      </ul>
 
+    </ul>
 
+  </div>
 
+</body>
 
+
 
+</html>

+ 89 - 0
spine-ts/spine-webgl/example/physics3.html
View File 

@@ -0,0 +1,89 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
+<script src="../dist/iife/spine-webgl.js"></script>
 
+<style>
 
+	* {
 
+		margin: 0;
 
+		padding: 0;
 
+	}
 
+</style>
 
+
 
+<body>
 
+	<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
 
+	<script>
 
+		class App {
 
+			constructor() {
 
+				this.skeleton = null;
 
+				this.animationState = null;
 
+			}
 
+
 
+			loadAssets(canvas) {
 
+				// Load the skeleton file.
 
+				canvas.assetManager.loadBinary("assets/snowglobe-pro.skel");
 
+				// Load the atlas and its pages.
 
+				canvas.assetManager.loadTextureAtlas("assets/snowglobe-pma.atlas");
 
+			}
 
+
 
+			initialize(canvas) {
 
+				let assetManager = canvas.assetManager;
 
+
 
+				// Create the texture atlas.
 
+				var atlas = assetManager.require("assets/snowglobe-pma.atlas");
 
+
 
+				// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
 
+				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 
+
 
+				// Create a SkeletonBinary instance for parsing the .skel file.
 
+				var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
 
+
 
+				// Set the scale to apply during parsing, parse the file, and create a new skeleton.
 
+				skeletonBinary.scale = 0.5;
 
+				var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/snowglobe-pro.skel"));
 
+				this.skeleton = new spine.Skeleton(skeletonData);
 
+
 
+				// 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, "shake", true);
 
+			}
 
+
 
+			update(canvas, delta) {
 
+
 
+				// Update the animation state using the delta time.
 
+				this.animationState.update(delta);
 
+				// Apply the animation state to the skeleton.
 
+				this.animationState.apply(this.skeleton);
 
+				// Let the skeleton update the transforms of its bones and apply physics
 
+				this.skeleton.update(delta);
 
+				this.skeleton.updateWorldTransform(spine.Physics.update);
 
+			}
 
+
 
+			render(canvas) {
 
+				let renderer = canvas.renderer;
 
+				// Resize the viewport to the full canvas.
 
+				renderer.resize(spine.ResizeMode.Expand);
 
+
 
+				// Clear the canvas with a light gray color.
 
+				canvas.clear(0.2, 0.2, 0.2, 1);
 
+
 
+				// Begin rendering.
 
+				renderer.begin();
 
+				// Draw the skeleton
 
+				renderer.drawSkeleton(this.skeleton, true);
 
+				// Complete rendering.
 
+				renderer.end();
 
+			}
 
+		}
 
+
 
+		new spine.SpineCanvas(document.getElementById("canvas"), {
 
+			app: new App()
 
+		})
 
+	</script>
 
+</body>
 
+
 
+</html>

+ 88 - 0
spine-ts/spine-webgl/example/physics4.html
View File 

@@ -0,0 +1,88 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+</head>
 
+<script src="../dist/iife/spine-webgl.js"></script>
 
+<style>
 
+	* {
 
+		margin: 0;
 
+		padding: 0;
 
+	}
 
+</style>
 
+
 
+<body>
 
+	<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
 
+	<script>
 
+		class App {
 
+			constructor() {
 
+				this.skeleton = null;
 
+				this.animationState = null;
 
+			}
 
+
 
+			loadAssets(canvas) {
 
+				// Load the skeleton file.
 
+				canvas.assetManager.loadBinary("assets/cloud-pot.skel");
 
+				// Load the atlas and its pages.
 
+				canvas.assetManager.loadTextureAtlas("assets/cloud-pot-pma.atlas");
 
+			}
 
+
 
+			initialize(canvas) {
 
+				let assetManager = canvas.assetManager;
 
+
 
+				// Create the texture atlas.
 
+				var atlas = assetManager.require("assets/cloud-pot-pma.atlas");
 
+
 
+				// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
 
+				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
 
+
 
+				// Create a SkeletonBinary instance for parsing the .skel file.
 
+				var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
 
+
 
+				// Set the scale to apply during parsing, parse the file, and create a new skeleton.
 
+				skeletonBinary.scale = 0.5;
 
+				var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/cloud-pot.skel"));
 
+				this.skeleton = new spine.Skeleton(skeletonData);
 
+
 
+				// 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, "playing-in-the-rain", true);
 
+			}
 
+
 
+			update(canvas, delta) {
 
+				// Update the animation state using the delta time.
 
+				this.animationState.update(delta);
 
+				// Apply the animation state to the skeleton.
 
+				this.animationState.apply(this.skeleton);
 
+				// Let the skeleton update the transforms of its bones and apply physics
 
+				this.skeleton.update(delta);
 
+				this.skeleton.updateWorldTransform(spine.Physics.update);
 
+			}
 
+
 
+			render(canvas) {
 
+				let renderer = canvas.renderer;
 
+				// Resize the viewport to the full canvas.
 
+				renderer.resize(spine.ResizeMode.Expand);
 
+
 
+				// Clear the canvas with a light gray color.
 
+				canvas.clear(0.2, 0.2, 0.2, 1);
 
+
 
+				// Begin rendering.
 
+				renderer.begin();
 
+				// Draw the skeleton
 
+				renderer.drawSkeleton(this.skeleton, true);
 
+				// Complete rendering.
 
+				renderer.end();
 
+			}
 
+		}
 
+
 
+		new spine.SpineCanvas(document.getElementById("canvas"), {
 
+			app: new App()
 
+		})
 
+	</script>
 
+</body>
 
+
 
+</html>