[phaser] Mix-and-match example, rework example index.

EsotericSoftware · Apr 18, 2023 · 0815c44 · 0815c44
1 parent 01e457a
commit 0815c44
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 32 deletions.
diff --git a/spine-ts/index.html b/spine-ts/index.html
@@ -18,7 +18,20 @@ <h1>spine-ts Examples</h1>
 		</ul>
 		<li>Phaser</li>
 		<ul>
-			<li><a href="/spine-phaser/example/index.html">Examples</a></li>
+			<li><a href="/spine-phaser/example/basic-example.html">Basic 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/arcade-physics-test.html">Arcade physics example</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/control-bones-test.html">Control bones</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/mix-and-match.html">Mix and match</a></li>
 		</ul>
 		<li>Player</li>
 		<ul>

diff --git a/spine-ts/spine-phaser/example/index.html b/spine-ts/spine-phaser/example/index.html
diff --git a/spine-ts/spine-phaser/example/mix-and-match.html b/spine-ts/spine-phaser/example/mix-and-match.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
+    <title>Spine Phaser Example</title>
+</head>
+
+<body>
+    <h1>Mix and match</h1>
+</body>
+<script>
+    var config = {
+        type: Phaser.AUTO,
+        width: 800,
+        height: 600,
+        type: Phaser.WEBGL,
+        scene: {
+            preload: preload,
+            create: create,
+            pack: {
+                files: [
+                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
+                ]
+            }
+        }
+    };
+
+    let game = new Phaser.Game(config);
+
+    function preload() {
+        this.load.spineBinary("mix-and-match-data", "assets/mix-and-match-pro.skel");
+        this.load.spineAtlas("mix-and-match-atlas", "assets/mix-and-match-pma.atlas");
+    }
+
+    function create() {
+        let mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas");
+        mixAndMatch.scale = 0.5;
+        mixAndMatch.animationState.setAnimation(0, "walk", true);
+
+        let skeletonData = mixAndMatch.skeleton.data;
+        let skin = new spine.Skin("custom");
+        skin.addSkin(skeletonData.findSkin("skin-base"));
+        skin.addSkin(skeletonData.findSkin("nose/short"));
+        skin.addSkin(skeletonData.findSkin("eyelids/girly"));
+        skin.addSkin(skeletonData.findSkin("eyes/violet"));
+        skin.addSkin(skeletonData.findSkin("hair/brown"));
+        skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
+        skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
+        skin.addSkin(skeletonData.findSkin("accessories/bag"));
+        skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));        
+        mixAndMatch.skeleton.setSkin(skin);
+        mixAndMatch.skeleton.setToSetupPose();
+    }
+</script>
+
+</html>