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

[ts] Clean-up examples

Browse Source 
# Conflicts:
#	spine-ts/index.css
#	spine-ts/index.html
#	spine-ts/spine-player/example/physics.html
This commit is contained in:
Mario Zechner 2023-12-06 04:02:56 +01:00
parent c61ff7ee93
commit 3cce0af971
28 changed files with 1569 additions and 1049 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
spine-ts/.prettierignore
View File

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

228
spine-ts/index.css Normal file
View File

@ -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;
}

333
spine-ts/index.html
View File

@ -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> <div style="width: 300px; margin: 0 auto">
<ul> <h1>spine-ts Examples</h1>
<li>Canvas</li>
<ul> <ul>
<li><a href="/spine-canvas/example">Example</a></li> <li>Canvas</li>
<li> <ul>
<a href="/spine-canvas/example/mouse-click.html">Mouse click</a> <li><a href="/spine-canvas/example">Example</a></li>
</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> </div>
<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>
</body> </body>
</html> </html>

75
spine-ts/spine-phaser/example/add-existing.html
View File

@ -1,43 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
class BasicExample extends Phaser.Scene { class BasicExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spine(200, 500, "spineboy-data", "spineboy-atlas"); const spineboy = this.add.spine(
const spineboy2 = this.add.existing(new spine.SpineGameObject(this, this.spine, 500, 500, 'spineboy-data', "spineboy-atlas")); 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, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [BasicExample], scene: [BasicExample],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}); });
</script> </script>
</html> </html>

87
spine-ts/spine-phaser/example/arcade-physics-example.html
View File

@ -1,61 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
class PhysicsExample extends Phaser.Scene { class PhysicsExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("coin-data", "assets/coin-pro.skel"); this.load.spineBinary("coin-data", "assets/coin-pro.skel");
this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas"); this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
} }
create() { create() {
const coin = this.add.spine(400, 200, 'coin-data', "coin-atlas"); const coin = this.add.spine(400, 200, "coin-data", "coin-atlas");
coin.animationState.setAnimation(0, "animation", true); coin.animationState.setAnimation(0, "animation", true);
coin.setScale(0.3); coin.setScale(0.3);
coin.setSize(280, 280); coin.setSize(280, 280);
this.physics.add.existing(coin); this.physics.add.existing(coin);
coin.body.setOffset(0, 50); coin.body.setOffset(0, 50);
coin.body.setVelocity(100, 200); coin.body.setVelocity(100, 200);
coin.body.setBounce(1, 1); coin.body.setBounce(1, 1);
coin.body.setCollideWorldBounds(true); coin.body.setCollideWorldBounds(true);
} }
} }
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
physics: { physics: {
default: 'arcade', default: "arcade",
arcade: { arcade: {
debug: true, debug: true,
gravity: { y: 200 } gravity: { y: 200 },
}
}, },
scene: [PhysicsExample], },
plugins: { scene: [PhysicsExample],
scene: [ plugins: {
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } scene: [
] {
} key: "spine.SpinePlugin",
plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

74
spine-ts/spine-phaser/example/basic-example.html
View File

@ -1,47 +1,55 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
class BasicExample extends Phaser.Scene { class BasicExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.setInteractive(); 400,
spineboy.displayWidth = 200; 500,
spineboy.displayHeight = spineboy.height / spineboy.width * 200; "spineboy-data",
this.input.enableDebug(spineboy, 0xff00ff); "spineboy-atlas"
spineboy.animationState.setAnimation(0, "walk", true); );
} 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, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [BasicExample], scene: [BasicExample],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}); });
</script> </script>
</html> </html>

68
spine-ts/spine-phaser/example/basic-vanilla-js-example.html
View File

@ -1,46 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
<script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.1.*/dist/iife/spine-phaser.min.js"></script> <script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.1.*/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> </body>
<script> <script>
class BasicExample extends Phaser.Scene { class BasicExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
spineboy.animationState.setAnimation(0, "walk", true); 500,
} "spineboy-data",
"spineboy-atlas"
);
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
}
} }
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [BasicExample], scene: [BasicExample],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

96
spine-ts/spine-phaser/example/batching-test.html
View File

@ -1,65 +1,75 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
update: update, update: update,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineJson("raptor-data", "assets/raptor-pro.json");
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas"); this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const plugin = this.spine; const plugin = this.spine;
let x = 25; let x = 25;
let y = 60; let y = 60;
for (let j = 0; j < 10; j++, y += 600 / 10) { for (let j = 0; j < 10; j++, y += 600 / 10) {
for (let i = 0; i < 20; i++, x += 800 / 20) { for (let i = 0; i < 20; i++, x += 800 / 20) {
const obj = Math.random() > 0.5 const obj =
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas") Math.random() > 0.5
: this.add.spine(x, y, 'raptor-data', "raptor-atlas"); ? this.add.spine(x, y, "spineboy-data", "spineboy-atlas")
obj.animationState.setAnimation(0, "walk", true); : this.add.spine(x, y, "raptor-data", "raptor-atlas");
obj.scale = 0.1; obj.animationState.setAnimation(0, "walk", true);
} obj.scale = 0.1;
x = 25;
} }
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> </script>
</html> </html>

104
spine-ts/spine-phaser/example/blend-test.html
View File

@ -1,72 +1,78 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
backgroundColor: '#cdcdcd', backgroundColor: "#cdcdcd",
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
update: update, update: update,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
const obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25); const obj = this.add
obj.setScale(0.25); .spine(i * 200, 600, "spineboy-data", "spineboy-atlas")
obj.animationState.setAnimation(0, "idle", true); .setScale(0.25);
obj.animationState.setAnimation(1, "shoot", true); obj.setScale(0.25);
} obj.animationState.setAnimation(0, "idle", true);
const cursors = this.input.keyboard.createCursorKeys(); obj.animationState.setAnimation(1, "shoot", true);
}
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = { const controlConfig = {
camera: this.cameras.main, camera: this.cameras.main,
left: cursors.left, left: cursors.left,
right: cursors.right, right: cursors.right,
up: cursors.up, up: cursors.up,
down: cursors.down, down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.35, acceleration: 0.35,
drag: 0.01, drag: 0.01,
maxSpeed: 1.2 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> </script>
</html> </html>

84
spine-ts/spine-phaser/example/bounds-test.html
View File

@ -1,58 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
update: update, update: update,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); 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 = this.add.spine(
spineboy.scale = 0.4 400,
spineboy.setInteractive(); 300,
this.input.enableDebug(spineboy, 0xff00ff); "spineboy-data",
spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true)); "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; time += delta / 1000;
const scale = 0.4 + Math.cos(time) * 0.2; const scale = 0.4 + Math.cos(time) * 0.2;
spineboy.scale = scale; spineboy.scale = scale;
spineboy.angle++; spineboy.angle++;
} }
</script> </script>
</html> </html>

140
spine-ts/spine-phaser/example/camera-pipeline-test.html
View File

@ -1,35 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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 = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
backgroundColor: '#cdcdcd', backgroundColor: "#cdcdcd",
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] type: "scenePlugin",
} key: "spine.SpinePlugin",
} url: "../dist/iife/spine-phaser.js",
}; sceneKey: "spine",
},
],
},
},
};
const fragShader = ` 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 { class PlasmaPostFX extends Phaser.Renderer.WebGL.Pipelines
constructor(game) { .PostFXPipeline {
super({ constructor(game) {
game, super({
name: 'PlasmaPostFX', game,
fragShader, name: "PlasmaPostFX",
uniforms: [ fragShader,
'uMainSampler', uniforms: ["uMainSampler", "uTime", "uResolution"],
'uTime', });
'uResolution'
]
});
}
onPreRender() {
this.set1f('uTime', this.game.loop.time / 1000);
}
onDraw(renderTarget) {
this.set2f('uResolution', renderTarget.width, renderTarget.height);
this.bindAndDraw(renderTarget);
}
} }
const game = new Phaser.Game(config); onPreRender() {
this.set1f("uTime", this.game.loop.time / 1000);
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() { onDraw(renderTarget) {
this.renderer.pipelines.addPostPipeline('PlasmaPostFX', PlasmaPostFX); this.set2f("uResolution", renderTarget.width, renderTarget.height);
// FIXME: Need a dummy sprite so the MultiPipeline sets up state this.bindAndDraw(renderTarget);
// 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");
} }
}
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> </body>
</html> </html>

67
spine-ts/spine-phaser/example/canvas-test.html
View File

@ -1,46 +1,55 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.CANVAS, type: Phaser.CANVAS,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
spineboy.animationState.setAnimation(0, "walk", true); 300,
"spineboy-data",
"spineboy-atlas"
);
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
} }
</script> </script>
</html> </html>

145
spine-ts/spine-phaser/example/control-bones-example.html
View File

@ -1,72 +1,97 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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 { class ControlBonesExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel"); this.load.spineBinary(
this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas"); "stretchyman-data",
} "assets/stretchyman-pro.skel"
);
create() { this.load.spineAtlas(
const stretchyman = this.add.spine(400, 580, 'stretchyman-data', "stretchyman-atlas"); "stretchyman-atlas",
stretchyman.animationState.setAnimation(0, "idle", true); "assets/stretchyman-pma.atlas"
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 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);
}
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({ create() {
type: Phaser.AUTO, const stretchyman = this.add.spine(
width: 800, 400,
height: 600, 580,
type: Phaser.WEBGL, "stretchyman-data",
scene: [ControlBonesExample], "stretchyman-atlas"
plugins: { );
scene: [ stretchyman.animationState.setAnimation(0, "idle", true);
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } stretchyman.updatePose(0);
]
}
});
</script>
</body>
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);
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;
}
};
}
}
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>
</body>
</html> </html>

74
spine-ts/spine-phaser/example/custom-spine-object-type.html
View File

@ -1,49 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
window.SPINE_GAME_OBJECT_TYPE = "spineOfficial"; window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
class BasicExample extends Phaser.Scene { class BasicExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spineOfficial(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spineOfficial(
spineboy.setInteractive(); 400,
spineboy.displayWidth = 200; 500,
spineboy.displayHeight = spineboy.height / spineboy.width * 200; "spineboy-data",
this.input.enableDebug(spineboy, 0xff00ff); "spineboy-atlas"
spineboy.animationState.setAnimation(0, "walk", true); );
} 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, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [BasicExample], scene: [BasicExample],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}); });
</script> </script>
</html> </html>

81
spine-ts/spine-phaser/example/depth-test.html
View File

@ -1,50 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.image("logo", "phaser.png");
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
this.add.image(400, 350, 'logo').setName('logo1').setDepth(2); this.add.image(400, 350, "logo").setName("logo1").setDepth(2);
const spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.animationState.setAnimation(0, "walk", true) 400,
spineboy.setScale(0.5) 600,
spineboy.setDepth(1); "spineboy-data",
this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5); "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> </script>
</html> </html>

110
spine-ts/spine-phaser/example/events-example.html
View File

@ -1,70 +1,86 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> <canvas id="game" width="800" height="600"></canvas>
<textarea id="log" style="height: 10em;"></textarea> <textarea id="log" style="height: 10em"></textarea>
</div> </div>
</body> </body>
<script> <script>
function log(message) { function log(message) {
let log = document.querySelector("#log"); let log = document.querySelector("#log");
log.textContent += message + "\n"; log.textContent += message + "\n";
log.scrollTop = log.scrollHeight; log.scrollTop = log.scrollHeight;
console.log(message); console.log(message);
} }
class EventsExample extends Phaser.Scene { class EventsExample extends Phaser.Scene {
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
500,
"spineboy-data",
"spineboy-atlas"
);
spineboy.scale = 0.5;
spineboy.animationState.addListener({ spineboy.animationState.addListener({
start: (entry) => log(`Started animation ${entry.animation.name}`), start: (entry) => log(`Started animation ${entry.animation.name}`),
interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`), interrupt: (entry) =>
end: (entry) => log(`Ended animation ${entry.animation.name}`), log(`Interrupted animation ${entry.animation.name}`),
dispose: (entry) => log(`Disposed animation ${entry.animation.name}`), end: (entry) => log(`Ended animation ${entry.animation.name}`),
complete: (entry) => log(`Completed 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); spineboy.animationState.setAnimation(0, "walk", true);
const trackEntry = spineboy.animationState.addAnimation(0, "run", 3, true); const trackEntry = spineboy.animationState.addAnimation(
trackEntry.listener = { 0,
event: (entry, event) => log(`Custom event for ${entry.animation.name}: ${event.data.name}`) "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"), canvas: document.querySelector("#game"),
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [EventsExample], scene: [EventsExample],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

163
spine-ts/spine-phaser/example/extended-class-test.html
View File

@ -1,103 +1,132 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
spineboy.animationState.setAnimation(0, "walk", true); 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) { constructor(scene, x, y, data, atlas, animation, loop) {
this.scene = scene; this.scene = scene;
this.spine = scene.add.spine(x, y, data, atlas); this.spine = scene.add.spine(x, y, data, atlas);
this.spine.animationState.setAnimation(0, animation, loop); this.spine.animationState.setAnimation(0, animation, loop);
} }
} }
class CustomSpineObject2 { class CustomSpineObject2 {
constructor(scene, x, y, dataKey, atlasKey, animation, loop) { constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
this.scene = scene; this.scene = scene;
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey }); this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
this.spine.animationState.setAnimation(0, animation, loop); this.spine.animationState.setAnimation(0, animation, loop);
scene.sys.displayList.add(this.spine); scene.sys.displayList.add(this.spine);
scene.sys.updateList.add(this.spine); scene.sys.updateList.add(this.spine);
} }
} }
class CustomSpineObject3 { class CustomSpineObject3 {
constructor(scene, x, y, dataKey, atlasKey, animation, loop) { constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
this.scene = scene; this.scene = scene;
this.parent = scene.add.container(0, 0); this.parent = scene.add.container(0, 0);
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey }); this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
this.spine.animationState.setAnimation(0, animation, loop); this.spine.animationState.setAnimation(0, animation, loop);
this.parent.add(this.spine); this.parent.add(this.spine);
} }
} }
class Example extends Phaser.Scene { class Example extends Phaser.Scene {
constructor() { constructor() {
super(); super();
} }
preload() { preload() {
this.load.image('logo', 'phaser.png'); this.load.image("logo", "phaser.png");
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
this.add.image(0, 0, 'logo').setOrigin(0); this.add.image(0, 0, "logo").setOrigin(0);
const custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true); const custom1 = new CustomSpineObject1(
custom1.spine.setScale(0.5); this,
const custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true); 100,
custom2.spine.setScale(0.5); 550,
const custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true); "spineboy-data",
custom3.spine.setScale(0.5); "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); this.add.image(400, 0, "logo").setOrigin(0);
} }
} }
const config = { const config = {
type: Phaser.WEBGL, type: Phaser.WEBGL,
parent: 'phaser-example', parent: "phaser-example",
width: 800, width: 800,
height: 600, height: 600,
backgroundColor: '#2d2d2d', backgroundColor: "#2d2d2d",
scene: Example, scene: Example,
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

100
spine-ts/spine-phaser/example/mix-and-match-example.html
View File

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

102
spine-ts/spine-phaser/example/multi-scene-test.html
View File

@ -1,68 +1,76 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
class Scene1 extends Phaser.Scene { class Scene1 extends Phaser.Scene {
constructor() { constructor() {
super({ key: "Scene1" }) super({ key: "Scene1" });
} }
preload() { preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
create() { create() {
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
spineboy.animationState.setAnimation(0, "walk", true); 500,
this.input.once('pointerdown', () => this.scene.start('Scene2')); "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() { constructor() {
super({ key: "Scene2" }) super({ key: "Scene2" });
} }
preload() { preload() {
this.load.spineJson("raptor-data", "assets/raptor-pro.json"); this.load.spineJson("raptor-data", "assets/raptor-pro.json");
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas"); this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
} }
create() { create() {
const raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas"); const raptor = this.add.spine(300, 600, "raptor-data", "raptor-atlas");
raptor.scale = 0.5; raptor.scale = 0.5;
raptor.animationState.setAnimation(0, "walk", true); raptor.animationState.setAnimation(0, "walk", true);
this.input.once('pointerdown', () => this.scene.start('Scene1')); this.input.once("pointerdown", () => this.scene.start("Scene1"));
} }
} }
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: [Scene1, Scene2], scene: [Scene1, Scene2],
plugins: { plugins: {
scene: [ scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" } {
] key: "spine.SpinePlugin",
} plugin: spine.SpinePlugin,
mapping: "spine",
},
],
},
}; };
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

93
spine-ts/spine-phaser/example/render-to-texture-test.html
View File

@ -1,57 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const renderTexture = this.add.renderTexture(400, 300, 800, 600); const renderTexture = this.add.renderTexture(400, 300, 800, 600);
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 400,
spineboy.animationState.setAnimation(0, "walk", true); 300,
this.add.text(200, 8, 'Click to stamp SpineBoy'); "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) { this.input.on(
spineboy.setPosition(pointer.x, pointer.y); "pointermove",
}, this); function (pointer) {
spineboy.setPosition(pointer.x, pointer.y);
},
this
);
this.input.on('pointerdown', function (pointer) { this.input.on(
renderTexture.draw(spineboy); "pointerdown",
spineboy.angle += 10; function (pointer) {
}, this); renderTexture.draw(spineboy);
spineboy.angle += 10;
},
this
);
} }
</script> </script>
</html> </html>

117
spine-ts/spine-phaser/example/visibility-test-container.html
View File

@ -1,66 +1,99 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.image("coin", "assets/coin-pma.png");
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const spineboy = this.add.spine(100, 400, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.25; 100,
spineboy.animationState.setAnimation(0, "idle", true); 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"); const spineboy2 = this.add.spine(
spineboy2.scale = 0.25; 250,
spineboy2.animationState.setAnimation(0, "walk", true); 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"); const spineboy3 = this.add.spine(
spineboy3.scale = 0.25; 500,
spineboy3.animationState.setAnimation(0, "run", true); 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"); const spineboy4 = this.add.spine(
spineboy4.scale = 0.25; 650,
spineboy4.animationState.setAnimation(0, "shoot", true); 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> </script>
</html> </html>

83
spine-ts/spine-phaser/example/visibility-test.html
View File

@ -1,53 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/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> </body>
<script> <script>
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
pack: { pack: {
files: [ files: [
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" } {
] 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.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas"); this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
} }
function create() { function create() {
const spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(
spineboy.scale = 0.5; 250,
spineboy.animationState.setAnimation(0, "walk", true); 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"); const spineboy2 = this.add.spine(
spineboy2.scale = 0.5; 550,
spineboy2.animationState.setAnimation(0, "run", true); 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> </script>
</html> </html>

14
spine-ts/spine-player/example/dispose.html
View File

@ -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 class="flex flex-col" style="gap: 1em;">
body {
background: gray;
margin: 0px;
}
</style>
<body>
<div id="container" style="width:640px; height:380px"></div> <div id="container" style="width:640px; height:380px"></div>
<div> <button id="dispose" style="align-self: flex-start;">Dispose</button>
<button id="dispose">Dispose</button>
</div>
</body> </body>
<script> <script>
var player = createPlayer(); var player = createPlayer();

26
spine-ts/spine-player/example/editor.html
View File

@ -1,18 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body style="width: 100vw; height: 100vh; display: flex; margin: 0; padding: 0;"> <body class="flex flex-col w-full h-screen items-center">
<div id="editor" style="width: 100%; height: 100%"></div> <div id="editor" class="w-full h-full flex-grow"></div>
<script> <script>
var code = "<script src=\"https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js\"></" + "script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@esotericsoftware/spine-player@4.1.*/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(); var code =
spine.SpinePlayerEditor.DEFAULT_CODE = code; '<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js"></' +
var player = new spine.SpinePlayerEditor(document.getElementById("editor")); 'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/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> </body>
</html> </html>

44
spine-ts/spine-player/example/embedding-binary-example.html
View File

File diff suppressed because one or more lines are too long

44
spine-ts/spine-player/example/embedding-json-example.html
View File

File diff suppressed because one or more lines are too long

14
spine-ts/spine-player/example/example.html
View File

@ -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 class="flex flex-col justify-center items-center">
body { <div id="container" style="max-width:640px; aspect-ratio: 16/9"></div>
background: gray; <div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
margin: 0px;
}
</style>
<body>
<div id="container" style="width:640px; height:380px"></div>
<div id="container-raptor" style="width:640px; height:380px"></div>
<div> <div>
<button id="walk">Walk</button> <button id="walk">Walk</button>
<button id="jump">Jump</button> <button id="jump">Jump</button>

3
spine-ts/spine-player/src/PlayerEditor.ts
View File

@ -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);
}) })
} }