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

[phaser] Fix pack file plugin loading, clipping, demos.

Browse Source
This commit is contained in:
Mario Zechner 2023-04-12 15:13:25 +02:00
parent fb3ebb56eb
commit 14219fa609
17 changed files with 422 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Arcade Physics example</h1> <h1>Arcade Physics example</h1>
</body> </body>
@ -27,12 +28,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -56,4 +57,5 @@ function create () {
coin.body.setCollideWorldBounds(true); coin.body.setCollideWorldBounds(true);
} }
</script> </script>
</html> </html>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Basic example</h1> <h1>Basic example</h1>
</body> </body>
@ -20,12 +21,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -41,4 +42,5 @@ function create () {
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
</script> </script>
</html> </html>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Batching test</h1> <h1>Batching test</h1>
</body> </body>
@ -21,12 +22,12 @@ var config = {
preload: preload, preload: preload,
create: create, create: create,
update: update, update: update,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -60,4 +61,5 @@ 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>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Blend test</h1> <h1>Blend test</h1>
</body> </body>
@ -21,13 +22,13 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
update: update update: update,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let controls; let controls;
@ -67,4 +68,5 @@ function update (time, delta) {
controls.update(delta); controls.update(delta);
} }
</script> </script>
</html> </html>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Bounds test</h1> <h1>Bounds test</h1>
</body> </body>
@ -21,12 +22,12 @@ var config = {
preload: preload, preload: preload,
create: create, create: create,
update: update, update: update,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -53,4 +54,5 @@ function update (t, delta) {
spineboy.angle++; spineboy.angle++;
} }
</script> </script>
</html> </html>

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

@ -6,7 +6,6 @@
<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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
@ -22,12 +21,12 @@
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
const fragShader = ` const fragShader = `

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Canvas test</h1> <h1>Canvas test</h1>
</body> </body>
@ -20,12 +21,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -41,4 +42,5 @@ function create () {
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
</script> </script>
</html> </html>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Control bones</h1> <h1>Control bones</h1>
<script> <script>
@ -19,12 +20,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -40,8 +41,7 @@ function create () {
stretchyman.skeleton.updateWorldTransform(); stretchyman.skeleton.updateWorldTransform();
var controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"]; var controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"];
for (var i = 0; i < controlBones.length; i++) for (var i = 0; i < controlBones.length; i++) {
{
var bone = stretchyman.skeleton.findBone(controlBones[i]); var bone = stretchyman.skeleton.findBone(controlBones[i]);
let point = { x: bone.worldX, y: bone.worldY }; let point = { x: bone.worldX, y: bone.worldY };
stretchyman.skeletonToPhaserWorldCoordinates(point); stretchyman.skeletonToPhaserWorldCoordinates(point);
@ -68,4 +68,5 @@ function create () {
} }
</script> </script>
</body> </body>
</html> </html>

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

@ -1,13 +1,14 @@
<!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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Depth test</h1> <h1>Depth test</h1>
</body> </body>
@ -20,12 +21,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -45,4 +46,5 @@ function create () {
this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5); this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
} }
</script> </script>
</html> </html>

3
spine-ts/spine-phaser/example/index.html
View File

@ -1,5 +1,6 @@
<!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">
@ -7,6 +8,7 @@
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Spine Phaser</h1> <h1>Spine Phaser</h1>
<ul> <ul>
@ -25,4 +27,5 @@
<li><a href="./render-to-texture-test.html">Render to texture test</a></li> <li><a href="./render-to-texture-test.html">Render to texture test</a></li>
</ul> </ul>
</body> </body>
</html> </html>

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

@ -1,5 +1,6 @@
<!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">
@ -8,6 +9,7 @@
<script src="../dist/iife/spine-phaser.js"></script> <script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Multi-scene test</h1> <h1>Multi-scene test</h1>
</body> </body>
@ -62,4 +64,5 @@ var config = {
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
</script> </script>
</html> </html>

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

@ -6,7 +6,6 @@
<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.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
@ -22,12 +21,12 @@
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);

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

@ -1,5 +1,6 @@
<!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">
@ -8,6 +9,7 @@
<script src="../dist/iife/spine-phaser.js"></script> <script src="../dist/iife/spine-phaser.js"></script>
<title>Spine Phaser Example</title> <title>Spine Phaser Example</title>
</head> </head>
<body> <body>
<h1>Basic example</h1> <h1>Basic example</h1>
</body> </body>
@ -20,12 +22,12 @@ var config = {
scene: { scene: {
preload: preload, preload: preload,
create: create, create: create,
}, pack: {
plugins: { files: [
scene: [ { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
] ]
} }
}
}; };
let game = new Phaser.Game(config); let game = new Phaser.Game(config);
@ -47,4 +49,5 @@ function create () {
this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible); this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
} }
</script> </script>
</html> </html>

1
spine-ts/spine-phaser/src/SpinePlugin.ts
View File

@ -126,6 +126,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
if (!this.webGLRenderer) { if (!this.webGLRenderer) {
this.webGLRenderer = new SceneRenderer((this.phaserRenderer! as Phaser.Renderer.WebGL.WebGLRenderer).canvas, this.gl!, true); this.webGLRenderer = new SceneRenderer((this.phaserRenderer! as Phaser.Renderer.WebGL.WebGLRenderer).canvas, this.gl!, true);
} }
this.onResize();
this.game.scale.on(Phaser.Scale.Events.RESIZE, this.onResize, this); this.game.scale.on(Phaser.Scale.Events.RESIZE, this.onResize, this);
} else { } else {
if (!this.canvasRenderer) { if (!this.canvasRenderer) {

1
spine-ts/spine-phaser/src/index.ts
View File

@ -6,3 +6,4 @@ export * from "@esotericsoftware/spine-core";
export * from "@esotericsoftware/spine-webgl"; export * from "@esotericsoftware/spine-webgl";
import { SpinePlugin } from "./SpinePlugin"; import { SpinePlugin } from "./SpinePlugin";
(window as any).spine = { SpinePlugin: SpinePlugin }; (window as any).spine = { SpinePlugin: SpinePlugin };
(window as any)["spine.SpinePlugin"] = SpinePlugin;

2
spine-ts/spine-webgl/src/SkeletonRenderer.ts
View File

@ -176,7 +176,7 @@ export class SkeletonRenderer {
clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint); clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
let clippedVertices = new Float32Array(clipper.clippedVertices); let clippedVertices = new Float32Array(clipper.clippedVertices);
let clippedTriangles = clipper.clippedTriangles; let clippedTriangles = clipper.clippedTriangles;
if (transformer) transformer(renderable.vertices, renderable.numFloats, vertexSize); if (transformer) transformer(clippedVertices, clippedVertices.length, vertexSize);
batcher.draw(texture, clippedVertices, clippedTriangles); batcher.draw(texture, clippedVertices, clippedTriangles);
} else { } else {
let verts = renderable.vertices; let verts = renderable.vertices;