ホーム エクスプローラ ヘルプ
サインイン
archive
/
spine-runtimes
同期ミラー https://github.com/EsotericSoftware/spine-runtimes.git
2
0
フォーク 0
ファイル 課題 0 Wiki
ソースを参照

[ts] Clean-up examples

# Conflicts:
#	spine-ts/index.css
#	spine-ts/index.html
#	spine-ts/spine-player/example/physics.html
Mario Zechner 1 年間 前
親
c61ff7ee93
コミット
3cce0af971
28 ファイル変更、1527 行追加、1023 行削除
一括表示 差分情報を表示
  1. 2 1
      spine-ts/.prettierignore
  2. 228 0
      spine-ts/index.css
  3. 178 155
      spine-ts/index.html
  4. 47 30
      spine-ts/spine-phaser/example/add-existing.html
  5. 46 43
      spine-ts/spine-phaser/example/arcade-physics-example.html
  6. 42 34
      spine-ts/spine-phaser/example/basic-example.html
  7. 39 31
      spine-ts/spine-phaser/example/basic-vanilla-js-example.html
  8. 54 44
      spine-ts/spine-phaser/example/batching-test.html
  9. 56 50
      spine-ts/spine-phaser/example/blend-test.html
  10. 49 37
      spine-ts/spine-phaser/example/bounds-test.html
  11. 75 69
      spine-ts/spine-phaser/example/camera-pipeline-test.html
  12. 39 30
      spine-ts/spine-phaser/example/canvas-test.html
  13. 80 55
      spine-ts/spine-phaser/example/control-bones-example.html
  14. 42 34
      spine-ts/spine-phaser/example/custom-spine-object-type.html
  15. 49 34
      spine-ts/spine-phaser/example/depth-test.html
  16. 64 48
      spine-ts/spine-phaser/example/events-example.html
  17. 102 73
      spine-ts/spine-phaser/example/extended-class-test.html
  18. 59 43
      spine-ts/spine-phaser/example/mix-and-match-example.html
  19. 56 48
      spine-ts/spine-phaser/example/multi-scene-test.html
  20. 56 39
      spine-ts/spine-phaser/example/render-to-texture-test.html
  21. 76 43
      spine-ts/spine-phaser/example/visibility-test-container.html
  22. 51 34
      spine-ts/spine-phaser/example/visibility-test.html
  23. 4 12
      spine-ts/spine-player/example/dispose.html
  24. 17 11
      spine-ts/spine-player/example/editor.html
  25. 5 7
      spine-ts/spine-player/example/embedding-binary-example.html
  26. 5 7
      spine-ts/spine-player/example/embedding-json-example.html
  27. 4 10
      spine-ts/spine-player/example/example.html
  28. 2 1
      spine-ts/spine-player/src/PlayerEditor.ts

+ 2 - 1
spine-ts/.prettierignore
ファイルの表示 

@@ -1 +1,2 @@
 
-**/*
 
+**/*.ts
 
+**/*.js

+ 228 - 0
spine-ts/index.css
ファイルの表示 

@@ -0,0 +1,228 @@
 
+/***
 
+    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
 
+    GitHub page: https://github.com/elad2412/the-new-css-reset
 
+***/
 
+
 
+/*
 
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
 
+    - The "symbol *" part is to solve Firefox SVG sprite bug
 
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 
+ */
 
+*:where(
 
+    :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
 
+  ) {
 
+  all: unset;
 
+  display: revert;
 
+}
 
+
 
+/* Preferred box-sizing value */
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* Fix mobile Safari increase font-size on landscape mode */
 
+html {
 
+  -moz-text-size-adjust: none;
 
+  -webkit-text-size-adjust: none;
 
+  text-size-adjust: none;
 
+}
 
+
 
+/* Reapply the pointer cursor for anchor tags */
 
+a,
 
+button {
 
+  cursor: revert;
 
+}
 
+
 
+/* Remove list styles (bullets/numbers) */
 
+ol,
 
+ul,
 
+menu,
 
+summary {
 
+  list-style: none;
 
+}
 
+
 
+/* For images to not be able to exceed their container */
 
+img {
 
+  max-inline-size: 100%;
 
+  max-block-size: 100%;
 
+}
 
+
 
+/* removes spacing between cells in tables */
 
+table {
 
+  border-collapse: collapse;
 
+}
 
+
 
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
 
+input,
 
+textarea {
 
+  -webkit-user-select: auto;
 
+}
 
+
 
+/* revert the 'white-space' property for textarea elements on Safari */
 
+textarea {
 
+  white-space: revert;
 
+}
 
+
 
+/* minimum style to allow to style meter element */
 
+meter {
 
+  -webkit-appearance: revert;
 
+  appearance: revert;
 
+}
 
+
 
+/* preformatted text - use only for this feature */
 
+:where(pre) {
 
+  all: revert;
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* reset default text opacity of input placeholder */
 
+::placeholder {
 
+  color: unset;
 
+}
 
+
 
+/* fix the feature of 'hidden' attribute.
 
+   display:revert; revert to element instead of attribute */
 
+:where([hidden]) {
 
+  display: none;
 
+}
 
+
 
+/* revert for bug in Chromium browsers
 
+   - fix for the content editable attribute will work properly.
 
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
 
+:where([contenteditable]:not([contenteditable="false"])) {
 
+  -moz-user-modify: read-write;
 
+  -webkit-user-modify: read-write;
 
+  overflow-wrap: break-word;
 
+  -webkit-line-break: after-white-space;
 
+  -webkit-user-select: auto;
 
+}
 
+
 
+/* apply back the draggable feature - exist only in Chromium and Safari */
 
+:where([draggable="true"]) {
 
+  -webkit-user-drag: element;
 
+}
 
+
 
+/* Revert Modal native behavior */
 
+:where(dialog:modal) {
 
+  all: revert;
 
+  box-sizing: border-box;
 
+}
 
+
 
+/* Remove details summary webkit styles */
 
+::-webkit-details-marker {
 
+  display: none;
 
+}
 
+
 
+html,
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
 
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
 
+}
 
+
 
+* {
 
+  box-sizing: border-box;
 
+}
 
+
 
+button {
 
+  display: inline-block; /* Aligns like a button */
 
+  padding: 0.125em 0.5em; /* Button size */
 
+  color: #333; /* Text color */
 
+  background-color: #ccc;
 
+  border: none; /* No border */
 
+  border-radius: 5px; /* Rounded corners */
 
+  text-align: center; /* Center text */
 
+  text-decoration: none; /* No underline */
 
+  cursor: pointer; /* Cursor changes to hand symbol */
 
+  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
 
+
 
+  /* Slight shadow for depth (optional) */
 
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
+}
 
+
 
+/* Hover state */
 
+button:hover {
 
+  background-color: #fff; /* Darker shade when hovered */
 
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
 
+}
 
+
 
+.overlay {
 
+  display: flex;
 
+  flex-direction: column;
 
+  position: fixed;
 
+  z-index: 10;
 
+  top: 0;
 
+  left: 0;
 
+  gap: 0.5em;
 
+  padding: 1em;
 
+  background-color: rgba(0, 0, 0, 0.7);
 
+  color: #ddd;
 
+  border-radius: 5px;
 
+}
 
+
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h5 {
 
+  font-weight: 600;
 
+  margin: 1rem 0;
 
+}
 
+body {
 
+  background-color: #222;
 
+  color: #ccc;
 
+}
 
+h1 {
 
+  font-size: 1.5em;
 
+}
 
+h2 {
 
+  font-size: 1em;
 
+}
 
+a {
 
+  color: darkorange;
 
+}
 
+ul,
 
+ol {
 
+  padding: 1em;
 
+  line-height: 1.25em;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+
 
+.flex-grow {
 
+  flex-grow: 1;
 
+}
 
+
 
+.items-center {
 
+  align-items: center;
 
+}
 
+
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+
 
+.w-full {
 
+  width: 100%;
 
+}
 
+
 
+.h-full {
 
+  height: 100%;
 
+}
 
+
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+
 
+.p-4 {
 
+  padding: 1em;
 
+}

+ 178 - 155
spine-ts/index.html
ファイルの表示 

@@ -5,165 +5,188 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <title>spine-ts Examples</title>
 
     <title>spine-ts Examples</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="stylesheet" href="index.css" />
 
   </head>
 
   </head>
 
 
 
   <body>
 
   <body>
 
-    <h1>spine-ts Examples</h1>
 
-    <ul>
 
-      <li>Canvas</li>
 
+    <div style="width: 300px; margin: 0 auto">
 
+      <h1>spine-ts Examples</h1>
 
       <ul>
 
       <ul>
 
-        <li><a href="/spine-canvas/example">Example</a></li>
 
-        <li>
 
-          <a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
 
-        </li>
 
+        <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/events-example.html">Events example</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>
 
       </ul>
 
       </ul>
 
-      <li>Pixi</li>
 
-      <ul>
 
-        <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
 
-        <li>
 
-          <a href="/spine-pixi/example/events-example.html">Events example</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/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/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>
 
-    </ul>
 
+    </div>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 47 - 30
spine-ts/spine-phaser/example/add-existing.html
ファイルの表示 

@@ -1,43 +1,60 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Add existing object</h1>
 
     <h1>Add existing object</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     class BasicExample extends Phaser.Scene {
 
     class BasicExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spine(200, 500, "spineboy-data", "spineboy-atlas");
 
-            const spineboy2 = this.add.existing(new spine.SpineGameObject(this, this.spine, 500, 500, 'spineboy-data', "spineboy-atlas"));
 
-        }
 
+      create() {
 
+        const spineboy = this.add.spine(
 
+          200,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        const spineboy2 = this.add.existing(
 
+          new spine.SpineGameObject(
 
+            this,
 
+            this.spine,
 
+            500,
 
+            500,
 
+            "spineboy-data",
 
+            "spineboy-atlas"
 
+          )
 
+        );
 
+      }
 
     }
 
     }
 
 
 
     new Phaser.Game({
 
     new Phaser.Game({
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [BasicExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [BasicExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     });
 
     });
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 46 - 43
spine-ts/spine-phaser/example/arcade-physics-example.html
ファイルの表示 

@@ -1,61 +1,64 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Arcade Physics example</h1>
 
     <h1>Arcade Physics example</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     class PhysicsExample extends Phaser.Scene {
 
     class PhysicsExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("coin-data", "assets/coin-pro.skel");
 
-            this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("coin-data", "assets/coin-pro.skel");
 
+        this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
 
-            coin.animationState.setAnimation(0, "animation", true);
 
-            coin.setScale(0.3);
 
-            coin.setSize(280, 280);
 
+      create() {
 
+        const coin = this.add.spine(400, 200, "coin-data", "coin-atlas");
 
+        coin.animationState.setAnimation(0, "animation", true);
 
+        coin.setScale(0.3);
 
+        coin.setSize(280, 280);
 
 
 
-            this.physics.add.existing(coin);
 
+        this.physics.add.existing(coin);
 
 
 
-            coin.body.setOffset(0, 50);
 
-            coin.body.setVelocity(100, 200);
 
-            coin.body.setBounce(1, 1);
 
-            coin.body.setCollideWorldBounds(true);
 
-        }
 
+        coin.body.setOffset(0, 50);
 
+        coin.body.setVelocity(100, 200);
 
+        coin.body.setBounce(1, 1);
 
+        coin.body.setCollideWorldBounds(true);
 
+      }
 
     }
 
     }
 
 
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        physics: {
 
-            default: 'arcade',
 
-            arcade: {
 
-                debug: true,
 
-                gravity: { y: 200 }
 
-            }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      physics: {
 
+        default: "arcade",
 
+        arcade: {
 
+          debug: true,
 
+          gravity: { y: 200 },
 
         },
 
         },
 
-        scene: [PhysicsExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      },
 
+      scene: [PhysicsExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 42 - 34
spine-ts/spine-phaser/example/basic-example.html
ファイルの表示 

@@ -1,47 +1,55 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Basic example</h1>
 
     <h1>Basic example</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     class BasicExample extends Phaser.Scene {
 
     class BasicExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.setInteractive();
 
-            spineboy.displayWidth = 200;
 
-            spineboy.displayHeight = spineboy.height / spineboy.width * 200;
 
-            this.input.enableDebug(spineboy, 0xff00ff);
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-        }
 
+      create() {
 
+        const spineboy = this.add.spine(
 
+          400,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.setInteractive();
 
+        spineboy.displayWidth = 200;
 
+        spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
 
+        this.input.enableDebug(spineboy, 0xff00ff);
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+      }
 
     }
 
     }
 
 
 
     new Phaser.Game({
 
     new Phaser.Game({
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [BasicExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [BasicExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     });
 
     });
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 39 - 31
spine-ts/spine-phaser/example/basic-vanilla-js-example.html
ファイルの表示 

@@ -1,46 +1,54 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-phaser.min.js"></script>
 
     <script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-phaser.min.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Basic example</h1>
 
     <h1>Basic example</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     class BasicExample extends Phaser.Scene {
 
     class BasicExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.scale = 0.5;
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-        }
 
+      create() {
 
+        const spineboy = this.add.spine(
 
+          400,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+      }
 
     }
 
     }
 
 
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [BasicExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [BasicExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 54 - 44
spine-ts/spine-phaser/example/batching-test.html
ファイルの表示 

@@ -1,65 +1,75 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Batching test</h1>
 
     <h1>Batching test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: {
 
-            preload: preload,
 
-            create: create,
 
-            update: update,
 
-            pack: {
 
-                files: [
 
-                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
-                ]
 
-            }
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: {
 
+        preload: preload,
 
+        create: create,
 
+        update: update,
 
+        pack: {
 
+          files: [
 
+            {
 
+              type: "scenePlugin",
 
+              key: "spine.SpinePlugin",
 
+              url: "../dist/iife/spine-phaser.js",
 
+              sceneKey: "spine",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
     let debug;
 
     let debug;
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
-        this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
+      this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const plugin = this.spine;
 
-        let x = 25;
 
-        let y = 60;
 
-        for (let j = 0; j < 10; j++, y += 600 / 10) {
 
-            for (let i = 0; i < 20; i++, x += 800 / 20) {
 
-                const obj = Math.random() > 0.5
 
-                    ? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
 
-                    : this.add.spine(x, y, 'raptor-data', "raptor-atlas");
 
-                obj.animationState.setAnimation(0, "walk", true);
 
-                obj.scale = 0.1;
 
-            }
 
-            x = 25;
 
+      const plugin = this.spine;
 
+      let x = 25;
 
+      let y = 60;
 
+      for (let j = 0; j < 10; j++, y += 600 / 10) {
 
+        for (let i = 0; i < 20; i++, x += 800 / 20) {
 
+          const obj =
 
+            Math.random() > 0.5
 
+              ? this.add.spine(x, y, "spineboy-data", "spineboy-atlas")
 
+              : this.add.spine(x, y, "raptor-data", "raptor-atlas");
 
+          obj.animationState.setAnimation(0, "walk", true);
 
+          obj.scale = 0.1;
 
         }
 
         }
 
-        debug = this.add.text(0, 600 - 40, "FPS: ");
 
+        x = 25;
 
+      }
 
+      debug = this.add.text(0, 600 - 40, "FPS: ");
 
     }
 
     }
 
 
 
     function update() {
 
     function update() {
 
-        debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
 
+      debug.setText(
 
+        "draw calls: " +
 
+          spine.PolygonBatcher.getAndResetGlobalDrawCalls() +
 
+          "\ndelta: " +
 
+          game.loop.delta
 
+      );
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 56 - 50
spine-ts/spine-phaser/example/blend-test.html
ファイルの表示 

@@ -1,72 +1,78 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Blend test</h1>
 
     <h1>Blend test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        backgroundColor: '#cdcdcd',
 
-        scene: {
 
-            preload: preload,
 
-            create: create,
 
-            update: update,
 
-            pack: {
 
-                files: [
 
-                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
-                ]
 
-            }
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      backgroundColor: "#cdcdcd",
 
+      scene: {
 
+        preload: preload,
 
+        create: create,
 
+        update: update,
 
+        pack: {
 
+          files: [
 
+            {
 
+              type: "scenePlugin",
 
+              key: "spine.SpinePlugin",
 
+              url: "../dist/iife/spine-phaser.js",
 
+              sceneKey: "spine",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     let controls;
 
     let controls;
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        for (var i = 0; i < 4; i++) {
 
-            const obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
 
-            obj.setScale(0.25);
 
-            obj.animationState.setAnimation(0, "idle", true);
 
-            obj.animationState.setAnimation(1, "shoot", true);
 
-        }
 
-        const cursors = this.input.keyboard.createCursorKeys();
 
+      for (var i = 0; i < 4; i++) {
 
+        const obj = this.add
 
+          .spine(i * 200, 600, "spineboy-data", "spineboy-atlas")
 
+          .setScale(0.25);
 
+        obj.setScale(0.25);
 
+        obj.animationState.setAnimation(0, "idle", true);
 
+        obj.animationState.setAnimation(1, "shoot", true);
 
+      }
 
+      const cursors = this.input.keyboard.createCursorKeys();
 
 
 
-        const controlConfig = {
 
-            camera: this.cameras.main,
 
-            left: cursors.left,
 
-            right: cursors.right,
 
-            up: cursors.up,
 
-            down: cursors.down,
 
-            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
 
-            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
 
-            acceleration: 0.35,
 
-            drag: 0.01,
 
-            maxSpeed: 1.2
 
-        };
 
+      const controlConfig = {
 
+        camera: this.cameras.main,
 
+        left: cursors.left,
 
+        right: cursors.right,
 
+        up: cursors.up,
 
+        down: cursors.down,
 
+        zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
 
+        zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
 
+        acceleration: 0.35,
 
+        drag: 0.01,
 
+        maxSpeed: 1.2,
 
+      };
 
 
 
-        controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
 
+      controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
 
     }
 
     }
 
 
 
     function update(time, delta) {
 
     function update(time, delta) {
 
-        controls.update(delta);
 
+      controls.update(delta);
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 49 - 37
spine-ts/spine-phaser/example/bounds-test.html
ファイルの表示 

@@ -1,58 +1,70 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Bounds test</h1>
 
     <h1>Bounds test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: {
 
-            preload: preload,
 
-            create: create,
 
-            update: update,
 
-            pack: {
 
-                files: [
 
-                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
-                ]
 
-            }
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: {
 
+        preload: preload,
 
+        create: create,
 
+        update: update,
 
+        pack: {
 
+          files: [
 
+            {
 
+              type: "scenePlugin",
 
+              key: "spine.SpinePlugin",
 
+              url: "../dist/iife/spine-phaser.js",
 
+              sceneKey: "spine",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
     let spineboy;
 
     let spineboy;
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
 
-        spineboy.scale = 0.4
 
-        spineboy.setInteractive();
 
-        this.input.enableDebug(spineboy, 0xff00ff);
 
-        spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
 
+      spineboy = this.add.spine(
 
+        400,
 
+        300,
 
+        "spineboy-data",
 
+        "spineboy-atlas",
 
+        new spine.SkinsAndAnimationBoundsProvider("run")
 
+      );
 
+      spineboy.scale = 0.4;
 
+      spineboy.setInteractive();
 
+      this.input.enableDebug(spineboy, 0xff00ff);
 
+      spineboy.on("pointerdown", () =>
 
+        spineboy.animationState.setAnimation(0, "run", true)
 
+      );
 
     }
 
     }
 
 
 
     let time = 0;
 
     let time = 0;
 
     function update(t, delta) {
 
     function update(t, delta) {
 
-        time += delta / 1000;
 
-        const scale = 0.4 + Math.cos(time) * 0.2;
 
-        spineboy.scale = scale;
 
-        spineboy.angle++;
 
+      time += delta / 1000;
 
+      const scale = 0.4 + Math.cos(time) * 0.2;
 
+      spineboy.scale = scale;
 
+      spineboy.angle++;
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 75 - 69
spine-ts/spine-phaser/example/camera-pipeline-test.html
ファイルの表示 

@@ -1,35 +1,40 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Camera pipeline test</h1>
 
     <h1>Camera pipeline test</h1>
 
     <script>
 
     <script>
 
-        const config = {
 
-            type: Phaser.AUTO,
 
-            width: 800,
 
-            height: 600,
 
-            type: Phaser.WEBGL,
 
-            backgroundColor: '#cdcdcd',
 
-            scene: {
 
-                preload: preload,
 
-                create: create,
 
-                pack: {
 
-                    files: [
 
-                        { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
-                    ]
 
-                }
 
-            }
 
-        };
 
-
 
-        const fragShader = `
 
+      const config = {
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        backgroundColor: "#cdcdcd",
 
+        scene: {
 
+          preload: preload,
 
+          create: create,
 
+          pack: {
 
+            files: [
 
+              {
 
+                type: "scenePlugin",
 
+                key: "spine.SpinePlugin",
 
+                url: "../dist/iife/spine-phaser.js",
 
+                sceneKey: "spine",
 
+              },
 
+            ],
 
+          },
 
+        },
 
+      };
 
+
 
+      const fragShader = `
 
         #define SHADER_NAME PLASMA_FS
 
         #define SHADER_NAME PLASMA_FS
 
 
 
         precision mediump float;
 
         precision mediump float;
 
@@ -59,54 +64,55 @@
 
         }
 
         }
 
         `;
 
         `;
 
 
 
-        class PlasmaPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
 
-            constructor(game) {
 
-                super({
 
-                    game,
 
-                    name: 'PlasmaPostFX',
 
-                    fragShader,
 
-                    uniforms: [
 
-                        'uMainSampler',
 
-                        'uTime',
 
-                        'uResolution'
 
-                    ]
 
-                });
 
-            }
 
-
 
-            onPreRender() {
 
-                this.set1f('uTime', this.game.loop.time / 1000);
 
-            }
 
-
 
-            onDraw(renderTarget) {
 
-                this.set2f('uResolution', renderTarget.width, renderTarget.height);
 
-
 
-                this.bindAndDraw(renderTarget);
 
-            }
 
+      class PlasmaPostFX extends Phaser.Renderer.WebGL.Pipelines
 
+        .PostFXPipeline {
 
+        constructor(game) {
 
+          super({
 
+            game,
 
+            name: "PlasmaPostFX",
 
+            fragShader,
 
+            uniforms: ["uMainSampler", "uTime", "uResolution"],
 
+          });
 
         }
 
         }
 
 
 
-        const game = new Phaser.Game(config);
 
-
 
-        function preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-            this.load.image("img", "assets/raptor-pma.png")
 
+        onPreRender() {
 
+          this.set1f("uTime", this.game.loop.time / 1000);
 
         }
 
         }
 
 
 
-        function create() {
 
-            this.renderer.pipelines.addPostPipeline('PlasmaPostFX', PlasmaPostFX);
 
-
 
-            // FIXME: Need a dummy sprite so the MultiPipeline sets up state
 
-            // so rendering the Spine sprite actually works. Unsure what state
 
-            // is needed.
 
-            this.add.sprite(0, 0, 'img');
 
+        onDraw(renderTarget) {
 
+          this.set2f("uResolution", renderTarget.width, renderTarget.height);
 
 
 
-            const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.scale = 0.5;
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-
 
-            this.cameras.main.setPostPipeline("PlasmaPostFX");
 
+          this.bindAndDraw(renderTarget);
 
         }
 
         }
 
+      }
 
+
 
+      const game = new Phaser.Game(config);
 
+
 
+      function preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+        this.load.image("img", "assets/raptor-pma.png");
 
+      }
 
+
 
+      function create() {
 
+        this.renderer.pipelines.addPostPipeline("PlasmaPostFX", PlasmaPostFX);
 
+
 
+        // FIXME: Need a dummy sprite so the MultiPipeline sets up state
 
+        // so rendering the Spine sprite actually works. Unsure what state
 
+        // is needed.
 
+        this.add.sprite(0, 0, "img");
 
+
 
+        const spineboy = this.add.spine(
 
+          400,
 
+          300,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+
 
+        this.cameras.main.setPostPipeline("PlasmaPostFX");
 
+      }
 
     </script>
 
     </script>
 
-</body>
 
-
 
-</html>
 
+  </body>
 
+</html>

+ 39 - 30
spine-ts/spine-phaser/example/canvas-test.html
ファイルの表示 

@@ -1,46 +1,55 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Canvas test</h1>
 
     <h1>Canvas test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.CANVAS,
 
-        scene: {
 
-            preload: preload,
 
-            create: create,
 
-            pack: {
 
-                files: [
 
-                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
 
-                ]
 
-            }
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.CANVAS,
 
+      scene: {
 
+        preload: preload,
 
+        create: create,
 
+        pack: {
 
+          files: [
 
+            {
 
+              type: "scenePlugin",
 
+              key: "spine.SpinePlugin",
 
+              url: "../dist/iife/spine-phaser.js",
 
+              sceneKey: "spine",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.5;
 
-        spineboy.animationState.setAnimation(0, "walk", true);
 
+      const spineboy = this.add.spine(
 
+        400,
 
+        300,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.scale = 0.5;
 
+      spineboy.animationState.setAnimation(0, "walk", true);
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 80 - 55
spine-ts/spine-phaser/example/control-bones-example.html
ファイルの表示 

@@ -1,72 +1,97 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Control bones</h1>
 
     <h1>Control bones</h1>
 
     <script>
 
     <script>
 
-        class ControlBonesExample extends Phaser.Scene {
 
-            preload() {
 
-                this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
 
-                this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
 
-            }
 
+      class ControlBonesExample extends Phaser.Scene {
 
+        preload() {
 
+          this.load.spineBinary(
 
+            "stretchyman-data",
 
+            "assets/stretchyman-pro.skel"
 
+          );
 
+          this.load.spineAtlas(
 
+            "stretchyman-atlas",
 
+            "assets/stretchyman-pma.atlas"
 
+          );
 
+        }
 
 
 
-            create() {
 
-                const stretchyman = this.add.spine(400, 580, 'stretchyman-data', "stretchyman-atlas");
 
-                stretchyman.animationState.setAnimation(0, "idle", true);
 
-                stretchyman.updatePose(0);
 
+        create() {
 
+          const stretchyman = this.add.spine(
 
+            400,
 
+            580,
 
+            "stretchyman-data",
 
+            "stretchyman-atlas"
 
+          );
 
+          stretchyman.animationState.setAnimation(0, "idle", true);
 
+          stretchyman.updatePose(0);
 
 
 
-                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.skeletonToPhaserWorldCoordinates(point);
 
+          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.skeletonToPhaserWorldCoordinates(point);
 
 
 
-                    const control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
 
-                    controlBones.push(control);
 
+            const control = this.add
 
+              .circle(point.x, point.y, 4, 0xff00ff)
 
+              .setData("bone", bone);
 
+            controlBones.push(control);
 
 
 
-                    control.setInteractive();
 
-                    this.input.setDraggable(control);
 
-                    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
 
-                        gameObject.x = dragX;
 
-                        gameObject.y = dragY;
 
-                    }, this);
 
-                }
 
+            control.setInteractive();
 
+            this.input.setDraggable(control);
 
+            this.input.on(
 
+              "drag",
 
+              function (pointer, gameObject, dragX, dragY) {
 
+                gameObject.x = dragX;
 
+                gameObject.y = dragY;
 
+              },
 
+              this
 
+            );
 
+          }
 
 
 
-                stretchyman.beforeUpdateWorldTransforms = () => {
 
-                    for (let controlBone of controlBones) {
 
-                        const bone = controlBone.getData('bone');
 
-                        const point = { x: controlBone.x, y: controlBone.y};
 
-                        stretchyman.phaserWorldCoordinatesToBone(point, bone);
 
-                        bone.x = point.x;
 
-                        bone.y = point.y;
 
-                    }
 
-                }
 
+          stretchyman.beforeUpdateWorldTransforms = () => {
 
+            for (let controlBone of controlBones) {
 
+              const bone = controlBone.getData("bone");
 
+              const point = { x: controlBone.x, y: controlBone.y };
 
+              stretchyman.phaserWorldCoordinatesToBone(point, bone);
 
+              bone.x = point.x;
 
+              bone.y = point.y;
 
             }
 
             }
 
+          };
 
         }
 
         }
 
+      }
 
 
 
-        new Phaser.Game({
 
-            type: Phaser.AUTO,
 
-            width: 800,
 
-            height: 600,
 
-            type: Phaser.WEBGL,
 
-            scene: [ControlBonesExample],
 
-            plugins: {
 
-                scene: [
 
-                    { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-                ]
 
-            }
 
-        });
 
+      new Phaser.Game({
 
+        type: Phaser.AUTO,
 
+        width: 800,
 
+        height: 600,
 
+        type: Phaser.WEBGL,
 
+        scene: [ControlBonesExample],
 
+        plugins: {
 
+          scene: [
 
+            {
 
+              key: "spine.SpinePlugin",
 
+              plugin: spine.SpinePlugin,
 
+              mapping: "spine",
 
+            },
 
+          ],
 
+        },
 
+      });
 
     </script>
 
     </script>
 
-</body>
 
-
 
-</html>
 
+  </body>
 
+</html>

+ 42 - 34
spine-ts/spine-phaser/example/custom-spine-object-type.html
ファイルの表示 

@@ -1,49 +1,57 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Custom object factor name</h1>
 
     <h1>Custom object factor name</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
 
     window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
 
 
 
     class BasicExample extends Phaser.Scene {
 
     class BasicExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spineOfficial(400, 500, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.setInteractive();
 
-            spineboy.displayWidth = 200;
 
-            spineboy.displayHeight = spineboy.height / spineboy.width * 200;
 
-            this.input.enableDebug(spineboy, 0xff00ff);
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-        }
 
+      create() {
 
+        const spineboy = this.add.spineOfficial(
 
+          400,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.setInteractive();
 
+        spineboy.displayWidth = 200;
 
+        spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
 
+        this.input.enableDebug(spineboy, 0xff00ff);
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+      }
 
     }
 
     }
 
 
 
     new Phaser.Game({
 
     new Phaser.Game({
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [BasicExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [BasicExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     });
 
     });
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 49 - 34
spine-ts/spine-phaser/example/depth-test.html
ファイルの表示 

@@ -1,50 +1,65 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Depth test</h1>
 
     <h1>Depth test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const 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" }
 
-                ]
 
-            }
 
-        }
 
+      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",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.image('logo', 'phaser.png');
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.image("logo", "phaser.png");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
 
-        const spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.animationState.setAnimation(0, "walk", true)
 
-        spineboy.setScale(0.5)
 
-        spineboy.setDepth(1);
 
-        this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
 
+      this.add.image(400, 350, "logo").setName("logo1").setDepth(2);
 
+      const spineboy = this.add.spine(
 
+        400,
 
+        600,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.animationState.setAnimation(0, "walk", true);
 
+      spineboy.setScale(0.5);
 
+      spineboy.setDepth(1);
 
+      this.add
 
+        .text(400, 300, "Set Depth Test", {
 
+          font: "16px Courier",
 
+          fill: "#00ff00",
 
+        })
 
+        .setName("text")
 
+        .setOrigin(0.5);
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 64 - 48
spine-ts/spine-phaser/example/events-example.html
ファイルの表示 

@@ -1,70 +1,86 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Events example</h1>
 
     <h1>Events example</h1>
 
     <div style="display: flex; flex-direction: column; width: 800px">
 
     <div style="display: flex; flex-direction: column; width: 800px">
 
-        <canvas id="game" width="800" height="600"></canvas>
 
-        <textarea id="log" style="height: 10em;"></textarea>
 
+      <canvas id="game" width="800" height="600"></canvas>
 
+      <textarea id="log" style="height: 10em"></textarea>
 
     </div>
 
     </div>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     function log(message) {
 
     function log(message) {
 
-        let log = document.querySelector("#log");
 
-        log.textContent += message + "\n";
 
-        log.scrollTop = log.scrollHeight;
 
-        console.log(message);
 
+      let log = document.querySelector("#log");
 
+      log.textContent += message + "\n";
 
+      log.scrollTop = log.scrollHeight;
 
+      console.log(message);
 
     }
 
     }
 
 
 
     class EventsExample extends Phaser.Scene {
 
     class EventsExample extends Phaser.Scene {
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.scale = 0.5;
 
+      create() {
 
+        const spineboy = this.add.spine(
 
+          400,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.scale = 0.5;
 
 
 
-            spineboy.animationState.addListener({
 
-                start: (entry) => log(`Started animation ${entry.animation.name}`),
 
-                interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`),
 
-                end: (entry) => log(`Ended animation ${entry.animation.name}`),
 
-                dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
 
-                complete: (entry) => log(`Completed animation ${entry.animation.name}`),
 
-            })
 
+        spineboy.animationState.addListener({
 
+          start: (entry) => log(`Started animation ${entry.animation.name}`),
 
+          interrupt: (entry) =>
 
+            log(`Interrupted animation ${entry.animation.name}`),
 
+          end: (entry) => log(`Ended animation ${entry.animation.name}`),
 
+          dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
 
+          complete: (entry) =>
 
+            log(`Completed animation ${entry.animation.name}`),
 
+        });
 
 
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-            const trackEntry = spineboy.animationState.addAnimation(0, "run", 3, true);
 
-            trackEntry.listener = {
 
-                event: (entry, event) => log(`Custom event for ${entry.animation.name}: ${event.data.name}`)
 
-            }
 
-        }
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+        const trackEntry = spineboy.animationState.addAnimation(
 
+          0,
 
+          "run",
 
+          3,
 
+          true
 
+        );
 
+        trackEntry.listener = {
 
+          event: (entry, event) =>
 
+            log(`Custom event for ${entry.animation.name}: ${event.data.name}`),
 
+        };
 
+      }
 
     }
 
     }
 
 
 
     const config = {
 
     const config = {
 
-        canvas: document.querySelector("#game"),
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [EventsExample],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      canvas: document.querySelector("#game"),
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [EventsExample],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 102 - 73
spine-ts/spine-phaser/example/extended-class-test.html
ファイルの表示 

@@ -1,103 +1,132 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Extended class</h1>
 
     <h1>Extended class</h1>
 
-</body>
 
-<script>
 
-
 
-
 
+  </body>
 
+  <script>
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.5;
 
-        spineboy.animationState.setAnimation(0, "walk", true);
 
+      const spineboy = this.add.spine(
 
+        400,
 
+        300,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.scale = 0.5;
 
+      spineboy.animationState.setAnimation(0, "walk", true);
 
     }
 
     }
 
 
 
     class CustomSpineObject1 {
 
     class CustomSpineObject1 {
 
-        constructor(scene, x, y, data, atlas, animation, loop) {
 
-            this.scene = scene;
 
-            this.spine = scene.add.spine(x, y, data, atlas);
 
-            this.spine.animationState.setAnimation(0, animation, loop);
 
-        }
 
+      constructor(scene, x, y, data, atlas, animation, loop) {
 
+        this.scene = scene;
 
+        this.spine = scene.add.spine(x, y, data, atlas);
 
+        this.spine.animationState.setAnimation(0, animation, loop);
 
+      }
 
     }
 
     }
 
 
 
     class CustomSpineObject2 {
 
     class CustomSpineObject2 {
 
-        constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
 
-            this.scene = scene;
 
-            this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
 
-            this.spine.animationState.setAnimation(0, animation, loop);
 
-
 
-            scene.sys.displayList.add(this.spine);
 
-            scene.sys.updateList.add(this.spine);
 
-        }
 
+      constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
 
+        this.scene = scene;
 
+        this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
 
+        this.spine.animationState.setAnimation(0, animation, loop);
 
+
 
+        scene.sys.displayList.add(this.spine);
 
+        scene.sys.updateList.add(this.spine);
 
+      }
 
     }
 
     }
 
 
 
     class CustomSpineObject3 {
 
     class CustomSpineObject3 {
 
-        constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
 
-            this.scene = scene;
 
-
 
-            this.parent = scene.add.container(0, 0);
 
-            this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
 
-            this.spine.animationState.setAnimation(0, animation, loop);
 
-            this.parent.add(this.spine);
 
-        }
 
+      constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
 
+        this.scene = scene;
 
+
 
+        this.parent = scene.add.container(0, 0);
 
+        this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
 
+        this.spine.animationState.setAnimation(0, animation, loop);
 
+        this.parent.add(this.spine);
 
+      }
 
     }
 
     }
 
 
 
     class Example extends Phaser.Scene {
 
     class Example extends Phaser.Scene {
 
-        constructor() {
 
-            super();
 
-        }
 
+      constructor() {
 
+        super();
 
+      }
 
 
 
-        preload() {
 
-            this.load.image('logo', 'phaser.png');
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
-
 
-        create() {
 
-            this.add.image(0, 0, 'logo').setOrigin(0);
 
-
 
-            const custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true);
 
-            custom1.spine.setScale(0.5);
 
-            const custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true);
 
-            custom2.spine.setScale(0.5);
 
-            const custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true);
 
-            custom3.spine.setScale(0.5);
 
-
 
-            this.add.image(400, 0, 'logo').setOrigin(0);
 
-        }
 
+      preload() {
 
+        this.load.image("logo", "phaser.png");
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
+
 
+      create() {
 
+        this.add.image(0, 0, "logo").setOrigin(0);
 
+
 
+        const custom1 = new CustomSpineObject1(
 
+          this,
 
+          100,
 
+          550,
 
+          "spineboy-data",
 
+          "spineboy-atlas",
 
+          "idle",
 
+          true
 
+        );
 
+        custom1.spine.setScale(0.5);
 
+        const custom2 = new CustomSpineObject2(
 
+          this,
 
+          350,
 
+          550,
 
+          "spineboy-data",
 
+          "spineboy-atlas",
 
+          "walk",
 
+          true
 
+        );
 
+        custom2.spine.setScale(0.5);
 
+        const custom3 = new CustomSpineObject3(
 
+          this,
 
+          600,
 
+          550,
 
+          "spineboy-data",
 
+          "spineboy-atlas",
 
+          "run",
 
+          true
 
+        );
 
+        custom3.spine.setScale(0.5);
 
+
 
+        this.add.image(400, 0, "logo").setOrigin(0);
 
+      }
 
     }
 
     }
 
 
 
-
 
     const config = {
 
     const config = {
 
-        type: Phaser.WEBGL,
 
-        parent: 'phaser-example',
 
-        width: 800,
 
-        height: 600,
 
-        backgroundColor: '#2d2d2d',
 
-        scene: Example,
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.WEBGL,
 
+      parent: "phaser-example",
 
+      width: 800,
 
+      height: 600,
 
+      backgroundColor: "#2d2d2d",
 
+      scene: Example,
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 59 - 43
spine-ts/spine-phaser/example/mix-and-match-example.html
ファイルの表示 

@@ -1,60 +1,76 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Mix and match</h1>
 
     <h1>Mix and match</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const 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" }
 
-                ]
 
-            }
 
-        }
 
+      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",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     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");
 
+      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() {
 
     function create() {
 
-        const mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas", new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"]));
 
-        mixAndMatch.scale = 0.5;
 
-        mixAndMatch.animationState.setAnimation(0, "walk", true);
 
+      const mixAndMatch = this.add.spine(
 
+        400,
 
+        500,
 
+        "mix-and-match-data",
 
+        "mix-and-match-atlas",
 
+        new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"])
 
+      );
 
+      mixAndMatch.scale = 0.5;
 
+      mixAndMatch.animationState.setAnimation(0, "walk", true);
 
 
 
-        const skeletonData = mixAndMatch.skeleton.data;
 
-        const 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();
 
+      const skeletonData = mixAndMatch.skeleton.data;
 
+      const 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>
 
+  </script>
 
+</html>

+ 56 - 48
spine-ts/spine-phaser/example/multi-scene-test.html
ファイルの表示 

@@ -1,68 +1,76 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Multi-scene test</h1>
 
     <h1>Multi-scene test</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     class Scene1 extends Phaser.Scene {
 
     class Scene1 extends Phaser.Scene {
 
-        constructor() {
 
-            super({ key: "Scene1" })
 
-        }
 
+      constructor() {
 
+        super({ key: "Scene1" });
 
+      }
 
 
 
-        preload() {
 
-            this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-            this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
 
-            spineboy.scale = 0.5;
 
-            spineboy.animationState.setAnimation(0, "walk", true);
 
-            this.input.once('pointerdown', () => this.scene.start('Scene2'));
 
-        }
 
+      create() {
 
+        const spineboy = this.add.spine(
 
+          400,
 
+          500,
 
+          "spineboy-data",
 
+          "spineboy-atlas"
 
+        );
 
+        spineboy.scale = 0.5;
 
+        spineboy.animationState.setAnimation(0, "walk", true);
 
+        this.input.once("pointerdown", () => this.scene.start("Scene2"));
 
+      }
 
     }
 
     }
 
 
 
     class Scene2 extends Phaser.Scene {
 
     class Scene2 extends Phaser.Scene {
 
-        constructor() {
 
-            super({ key: "Scene2" })
 
-        }
 
+      constructor() {
 
+        super({ key: "Scene2" });
 
+      }
 
 
 
-        preload() {
 
-            this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
-            this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
-        }
 
+      preload() {
 
+        this.load.spineJson("raptor-data", "assets/raptor-pro.json");
 
+        this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
 
+      }
 
 
 
-        create() {
 
-            const raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
 
-            raptor.scale = 0.5;
 
-            raptor.animationState.setAnimation(0, "walk", true);
 
-            this.input.once('pointerdown', () => this.scene.start('Scene1'));
 
-        }
 
+      create() {
 
+        const raptor = this.add.spine(300, 600, "raptor-data", "raptor-atlas");
 
+        raptor.scale = 0.5;
 
+        raptor.animationState.setAnimation(0, "walk", true);
 
+        this.input.once("pointerdown", () => this.scene.start("Scene1"));
 
+      }
 
     }
 
     }
 
 
 
     const config = {
 
     const config = {
 
-        type: Phaser.AUTO,
 
-        width: 800,
 
-        height: 600,
 
-        type: Phaser.WEBGL,
 
-        scene: [Scene1, Scene2],
 
-        plugins: {
 
-            scene: [
 
-                { key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
 
-            ]
 
-        }
 
+      type: Phaser.AUTO,
 
+      width: 800,
 
+      height: 600,
 
+      type: Phaser.WEBGL,
 
+      scene: [Scene1, Scene2],
 
+      plugins: {
 
+        scene: [
 
+          {
 
+            key: "spine.SpinePlugin",
 
+            plugin: spine.SpinePlugin,
 
+            mapping: "spine",
 
+          },
 
+        ],
 
+      },
 
     };
 
     };
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 56 - 39
spine-ts/spine-phaser/example/render-to-texture-test.html
ファイルの表示 

@@ -1,57 +1,74 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Render to texture</h1>
 
     <h1>Render to texture</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const 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" }
 
-                ]
 
-            }
 
-        }
 
+      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",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const renderTexture = this.add.renderTexture(400, 300, 800, 600);
 
-        const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.5;
 
-        spineboy.animationState.setAnimation(0, "walk", true);
 
-        this.add.text(200, 8, 'Click to stamp SpineBoy');
 
+      const renderTexture = this.add.renderTexture(400, 300, 800, 600);
 
+      const spineboy = this.add.spine(
 
+        400,
 
+        300,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.scale = 0.5;
 
+      spineboy.animationState.setAnimation(0, "walk", true);
 
+      this.add.text(200, 8, "Click to stamp SpineBoy");
 
 
 
-        this.input.on('pointermove', function (pointer) {
 
-            spineboy.setPosition(pointer.x, pointer.y);
 
-        }, this);
 
+      this.input.on(
 
+        "pointermove",
 
+        function (pointer) {
 
+          spineboy.setPosition(pointer.x, pointer.y);
 
+        },
 
+        this
 
+      );
 
 
 
-        this.input.on('pointerdown', function (pointer) {
 
-            renderTexture.draw(spineboy);
 
-            spineboy.angle += 10;
 
-        }, this);
 
+      this.input.on(
 
+        "pointerdown",
 
+        function (pointer) {
 
+          renderTexture.draw(spineboy);
 
+          spineboy.angle += 10;
 
+        },
 
+        this
 
+      );
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 76 - 43
spine-ts/spine-phaser/example/visibility-test-container.html
ファイルの表示 

@@ -1,66 +1,99 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Visibility Test 2</h1>
 
     <h1>Visibility Test 2</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const 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" }
 
-                ]
 
-            }
 
-        }
 
+      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",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.image('coin', 'assets/coin-pma.png');
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.image("coin", "assets/coin-pma.png");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const spineboy = this.add.spine(100, 400, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.25;
 
-        spineboy.animationState.setAnimation(0, "idle", true);
 
+      const spineboy = this.add.spine(
 
+        100,
 
+        400,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.scale = 0.25;
 
+      spineboy.animationState.setAnimation(0, "idle", true);
 
 
 
-        const spineboy2 = this.add.spine(250, 400, 'spineboy-data', "spineboy-atlas");
 
-        spineboy2.scale = 0.25;
 
-        spineboy2.animationState.setAnimation(0, "walk", true);
 
+      const spineboy2 = this.add.spine(
 
+        250,
 
+        400,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy2.scale = 0.25;
 
+      spineboy2.animationState.setAnimation(0, "walk", true);
 
 
 
-        window.coin = this.add.image(400,500,'coin').setOrigin(0.5,1).setScale(0.3).setCrop(304,283,286,284);
 
+      window.coin = this.add
 
+        .image(400, 500, "coin")
 
+        .setOrigin(0.5, 1)
 
+        .setScale(0.3)
 
+        .setCrop(304, 283, 286, 284);
 
 
 
-        const spineboy3 = this.add.spine(500, 400, 'spineboy-data', "spineboy-atlas");
 
-        spineboy3.scale = 0.25;
 
-        spineboy3.animationState.setAnimation(0, "run", true);
 
+      const spineboy3 = this.add.spine(
 
+        500,
 
+        400,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy3.scale = 0.25;
 
+      spineboy3.animationState.setAnimation(0, "run", true);
 
 
 
-        const spineboy4 = this.add.spine(650, 400, 'spineboy-data', "spineboy-atlas");
 
-        spineboy4.scale = 0.25;
 
-        spineboy4.animationState.setAnimation(0, "shoot", true);
 
+      const spineboy4 = this.add.spine(
 
+        650,
 
+        400,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy4.scale = 0.25;
 
+      spineboy4.animationState.setAnimation(0, "shoot", true);
 
 
 
-        const grp = this.add.container().add([spineboy,spineboy2,coin,spineboy3,spineboy4]);
 
+      const grp = this.add
 
+        .container()
 
+        .add([spineboy, spineboy2, coin, spineboy3, spineboy4]);
 
 
 
-        this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
 
+      this.input.on(
 
+        "pointerdown",
 
+        () => (spineboy2.visible = !spineboy2.visible)
 
+      );
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 51 - 34
spine-ts/spine-phaser/example/visibility-test.html
ファイルの表示 

@@ -1,53 +1,70 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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">
 
+  <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/[email protected]/dist/phaser.js"></script>
 
     <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
     <script src="../dist/iife/spine-phaser.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Phaser Example</title>
 
     <title>Spine Phaser Example</title>
 
-</head>
 
+  </head>
 
 
 
-<body>
 
+  <body class="p-4 flex flex-col items-center">
 
     <h1>Basic example</h1>
 
     <h1>Basic example</h1>
 
-</body>
 
-<script>
 
+  </body>
 
+  <script>
 
     const config = {
 
     const 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" }
 
-                ]
 
-            }
 
-        }
 
+      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",
 
+            },
 
+          ],
 
+        },
 
+      },
 
     };
 
     };
 
 
 
     const game = new Phaser.Game(config);
 
     const game = new Phaser.Game(config);
 
 
 
     function preload() {
 
     function preload() {
 
-        this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
-        this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
+      this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
 
+      this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
 
     }
 
     }
 
 
 
     function create() {
 
     function create() {
 
-        const spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
 
-        spineboy.scale = 0.5;
 
-        spineboy.animationState.setAnimation(0, "walk", true);
 
+      const spineboy = this.add.spine(
 
+        250,
 
+        500,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy.scale = 0.5;
 
+      spineboy.animationState.setAnimation(0, "walk", true);
 
 
 
-        const spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
 
-        spineboy2.scale = 0.5;
 
-        spineboy2.animationState.setAnimation(0, "run", true);
 
+      const spineboy2 = this.add.spine(
 
+        550,
 
+        500,
 
+        "spineboy-data",
 
+        "spineboy-atlas"
 
+      );
 
+      spineboy2.scale = 0.5;
 
+      spineboy2.animationState.setAnimation(0, "run", true);
 
 
 
-        this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
 
+      this.input.on(
 
+        "pointerdown",
 
+        () => (spineboy2.visible = !spineboy2.visible)
 
+      );
 
     }
 
     }
 
-</script>
 
-
 
-</html>
 
+  </script>
 
+</html>

+ 4 - 12
spine-ts/spine-player/example/dispose.html
ファイルの表示 

@@ -6,20 +6,12 @@
 
 	<script src="../dist/iife/spine-player.js"></script>
 
 	<script src="../dist/iife/spine-player.js"></script>
 
 	<link rel="stylesheet" href="../css/spine-player.css">
 
 	<link rel="stylesheet" href="../css/spine-player.css">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<link rel="stylesheet" href="../../index.css" />
 
 </head>
 
 </head>
 
 
 
-<style>
 
-	body {
 
-		background: gray;
 
-		margin: 0px;
 
-	}
 
-</style>
 
-
 
-<body>
 
+<body class="flex flex-col" style="gap: 1em;">
 
 	<div id="container" style="width:640px; height:380px"></div>
 
 	<div id="container" style="width:640px; height:380px"></div>
 
-	<div>
 
-		<button id="dispose">Dispose</button>
 
-	</div>
 
+	<button id="dispose" style="align-self: flex-start;">Dispose</button>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
 	var player = createPlayer();
 
 	var player = createPlayer();
 
@@ -42,7 +34,7 @@
 
 			},
 
 			},
 
 			showControls: true
 
 			showControls: true
 
 		});
 
 		});
 
-	}	
+	}
 
 </script>
 
 </script>
 
 </body>
 
 </body>

+ 17 - 11
spine-ts/spine-player/example/editor.html
ファイルの表示 

@@ -1,18 +1,24 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <script src="../dist/iife/spine-player.js"></script>
 
     <script src="../dist/iife/spine-player.js"></script>
 
+    <link rel="stylesheet" href="../../index.css" />
 
     <title>Spine Player Editor</title>
 
     <title>Spine Player Editor</title>
 
-</head>
 
-<body style="width: 100vw; height: 100vh; display: flex; margin: 0; padding: 0;">
 
-    <div id="editor" style="width: 100%; height: 100%"></div>
 
+  </head>
 
+  <body class="flex flex-col w-full h-screen items-center">
 
+    <div id="editor" class="w-full h-full flex-grow"></div>
 
 
 
     <script>
 
     <script>
 
-        var code = "<script src=\"https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-player.js\"></" + "script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@esotericsoftware/[email protected].*/dist/spine-player.css\">\n\n<div id=\"player-container\" style=\"width: 100%; height: 100vh;\"></div>\n\n<script>\nnew spine.SpinePlayer(\"player-container\", {\n	jsonUrl: \"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json\",\n	atlasUrl: \"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas\"\n});\n</" + "script>".trim();
 
-        spine.SpinePlayerEditor.DEFAULT_CODE = code;
 
-        var player = new spine.SpinePlayerEditor(document.getElementById("editor"));
 
+      var code =
 
+        '<script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-player.js"></' +
 
+        'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/[email protected].*/dist/spine-player.css">\n\n<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n<script>\nnew spine.SpinePlayer("player-container", {\n	jsonUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",\n	atlasUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"\n});\n</' +
 
+        "script>".trim();
 
+      spine.SpinePlayerEditor.DEFAULT_CODE = code;
 
+      var player = new spine.SpinePlayerEditor(
 
+        document.getElementById("editor")
 
+      );
 
     </script>
 
     </script>
 
-</body>
 
-</html>
 
+  </body>
 
+</html>

ファイルの差分が大きいため隠しています
+ 5 - 7
spine-ts/spine-player/example/embedding-binary-example.html


ファイルの差分が大きいため隠しています
+ 5 - 7
spine-ts/spine-player/example/embedding-json-example.html


+ 4 - 10
spine-ts/spine-player/example/example.html
ファイルの表示 

@@ -6,18 +6,12 @@
 
 	<script src="../dist/iife/spine-player.js"></script>
 
 	<script src="../dist/iife/spine-player.js"></script>
 
 	<link rel="stylesheet" href="../css/spine-player.css">
 
 	<link rel="stylesheet" href="../css/spine-player.css">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<link rel="stylesheet" href="../../index.css" />
 
 </head>
 
 </head>
 
 
 
-<style>
 
-	body {
 
-		background: gray;
 
-		margin: 0px;
 
-	}
 
-</style>
 
-
 
-<body>
 
-	<div id="container" style="width:640px; height:380px"></div>
 
-	<div id="container-raptor" style="width:640px; height:380px"></div>
 
+<body class="flex flex-col justify-center items-center">
 
+	<div id="container" style="max-width:640px; aspect-ratio: 16/9"></div>
 
+	<div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
 
 	<div>
 
 	<div>
 
 		<button id="walk">Walk</button>
 
 		<button id="walk">Walk</button>
 
 		<button id="jump">Jump</button>
 
 		<button id="jump">Jump</button>

+ 2 - 1
spine-ts/spine-player/src/PlayerEditor.ts
ファイルの表示 

@@ -90,7 +90,7 @@ body { margin: 0px; }
 
 	private render (parent: HTMLElement) {
 
 	private render (parent: HTMLElement) {
 
 		let dom = /*html*/`
 
 		let dom = /*html*/`
 
 				<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
 
 				<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
 
-					<div style="width: 100%; height: 50%;"></div>
 
+					<div style="width: 100%; height: 50%"></div>
 
 					<iframe style="width: 100%; height: 50%; outline: none; border: none;"></iframe>
 
 					<iframe style="width: 100%; height: 50%; outline: none; border: none;"></iframe>
 
 				</div>
 
 				</div>
 
 			`;
 
 			`;
 
@@ -112,6 +112,7 @@ body { margin: 0px; }
 
 				this.startPlayer();
 
 				this.startPlayer();
 
 			});
 
 			});
 
 
 
+			codeElement.children[0].style.height = "100%";
 
 			this.setCode(SpinePlayerEditor.DEFAULT_CODE);
 
 			this.setCode(SpinePlayerEditor.DEFAULT_CODE);
 
 		})
 
 		})
 
 	}
 
 	}

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません