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

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -27,22 +28,22 @@ 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);
function preload () { function 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");
} }
function create () { function create() {
let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas"); let 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);
@ -54,6 +55,7 @@ function create () {
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);
} }
</script> </script>
</html> </html>

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -20,25 +21,26 @@ 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);
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() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
</script> </script>
</html> </html>

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -21,29 +22,29 @@ 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);
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() {
let plugin = this.spine; let 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) {
let obj = Math.random() > 0.5 let obj = Math.random() > 0.5
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas") ? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
@ -54,10 +55,11 @@ function create () {
x = 25; x = 25;
} }
debug = this.add.text(0, 600 - 40, "FPS: "); 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>

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -21,24 +22,24 @@ 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;
let game = new Phaser.Game(config); let 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++) {
let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25); let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
obj.setScale(0.25); obj.setScale(0.25);
@ -61,10 +62,11 @@ function create () {
}; };
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>

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -21,36 +22,37 @@ 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);
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(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
spineboy.scale = 0.4 spineboy.scale = 0.4
spineboy.setInteractive(); spineboy.setInteractive();
this.input.enableDebug(spineboy, 0xff00ff); this.input.enableDebug(spineboy, 0xff00ff);
spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true)); 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;
let scale = 0.4 + Math.cos(time) * 0.2; let scale = 0.4 + Math.cos(time) * 0.2;
spineboy.scale = scale; spineboy.scale = scale;
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 = `

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -20,25 +21,26 @@ 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);
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() {
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
</script> </script>
</html> </html>

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

@ -1,17 +1,18 @@
<!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>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -19,31 +20,30 @@ 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);
function preload () { function preload() {
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel"); this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas"); this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
} }
function create () { function create() {
let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas"); let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
stretchyman.scale = 0.8; stretchyman.scale = 0.8;
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);
var control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone); var control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
@ -65,7 +65,8 @@ function create () {
}, this); }, this);
} }
} }
</script> </script>
</body> </body>
</html> </html>

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

@ -1,18 +1,19 @@
<!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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -20,29 +21,30 @@ 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);
function preload () { function preload() {
this.load.image('logo', 'assets/phaser.png'); this.load.image('logo', 'assets/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);
let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas"); let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
spineboy.animationState.setAnimation(0, "walk", true) spineboy.animationState.setAnimation(0, "walk", true)
spineboy.setScale(0.5) spineboy.setScale(0.5)
spineboy.setDepth(1); spineboy.setDepth(1);
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>

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

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

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>

27
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,13 +9,14 @@
<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>
<script> <script>
class Scene1 extends Phaser.Scene { class Scene1 extends Phaser.Scene {
constructor () { constructor() {
super({key: "Scene1"}) super({ key: "Scene1" })
} }
preload() { preload() {
@ -28,11 +30,11 @@ class Scene1 extends Phaser.Scene {
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
this.input.once('pointerdown', () => this.scene.start('Scene2')); 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() {
@ -46,20 +48,21 @@ class Scene2 extends Phaser.Scene {
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'));
} }
} }
var config = { var 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" }
] ]
} }
}; };
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);

25
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,11 +9,12 @@
<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>
<script> <script>
var config = { var config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -20,22 +22,22 @@ 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);
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() {
let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas"); let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
@ -45,6 +47,7 @@ function create () {
spineboy2.animationState.setAnimation(0, "run", true); 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>

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;