mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 23:34:53 +08:00
[phaser] Fix pack file plugin loading, clipping, demos.
This commit is contained in:
Mario Zechner
parent
fb3ebb56eb
commit
14219fa609
@ -1,59 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Arcade Physics example</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
debug: true,
|
||||
gravity: { y: 200 }
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
debug: true,
|
||||
gravity: { y: 200 }
|
||||
}
|
||||
},
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("coin-data", "assets/coin-pro.skel");
|
||||
this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
function create() {
|
||||
let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
|
||||
coin.animationState.setAnimation(0, "animation", true);
|
||||
coin.setScale(0.3);
|
||||
coin.setSize(280, 280);
|
||||
|
||||
function preload () {
|
||||
this.load.spineBinary("coin-data", "assets/coin-pro.skel");
|
||||
this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
|
||||
}
|
||||
this.physics.add.existing(coin);
|
||||
|
||||
function create () {
|
||||
let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
|
||||
coin.animationState.setAnimation(0, "animation", true);
|
||||
coin.setScale(0.3);
|
||||
coin.setSize(280, 280);
|
||||
|
||||
this.physics.add.existing(coin);
|
||||
|
||||
coin.body.setOffset(0, 50);
|
||||
coin.body.setVelocity(100, 200);
|
||||
coin.body.setBounce(1, 1);
|
||||
coin.body.setCollideWorldBounds(true);
|
||||
}
|
||||
coin.body.setOffset(0, 50);
|
||||
coin.body.setVelocity(100, 200);
|
||||
coin.body.setBounce(1, 1);
|
||||
coin.body.setCollideWorldBounds(true);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,44 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Basic example</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
};
|
||||
|
||||
let 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");
|
||||
}
|
||||
|
||||
function create () {
|
||||
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
function create() {
|
||||
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,63 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Batching test</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
let debug;
|
||||
|
||||
function preload () {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create () {
|
||||
let plugin = this.spine;
|
||||
let x = 25;
|
||||
let y = 60;
|
||||
for (let j = 0; j < 10; j++, y+= 600 / 10) {
|
||||
for (let i = 0; i < 20; i++, x += 800 / 20) {
|
||||
let obj = Math.random() > 0.5
|
||||
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
|
||||
: this.add.spine(x, y, 'raptor-data', "raptor-atlas");
|
||||
obj.animationState.setAnimation(0, "walk", true);
|
||||
obj.scale = 0.1;
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
x = 25;
|
||||
}
|
||||
debug = this.add.text(0, 600 - 40, "FPS: ");
|
||||
}
|
||||
};
|
||||
|
||||
function update () {
|
||||
debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
|
||||
}
|
||||
let game = new Phaser.Game(config);
|
||||
let debug;
|
||||
|
||||
function preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
let plugin = this.spine;
|
||||
let x = 25;
|
||||
let y = 60;
|
||||
for (let j = 0; j < 10; j++, y += 600 / 10) {
|
||||
for (let i = 0; i < 20; i++, x += 800 / 20) {
|
||||
let obj = Math.random() > 0.5
|
||||
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
|
||||
: this.add.spine(x, y, 'raptor-data', "raptor-atlas");
|
||||
obj.animationState.setAnimation(0, "walk", true);
|
||||
obj.scale = 0.1;
|
||||
}
|
||||
x = 25;
|
||||
}
|
||||
debug = this.add.text(0, 600 - 40, "FPS: ");
|
||||
}
|
||||
|
||||
function update() {
|
||||
debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,70 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Blend test</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: '#cdcdcd',
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
let controls;
|
||||
let 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");
|
||||
}
|
||||
|
||||
function create () {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
|
||||
obj.setScale(0.25);
|
||||
obj.animationState.setAnimation(0, "idle", true);
|
||||
obj.animationState.setAnimation(1, "shoot", true);
|
||||
}
|
||||
var cursors = this.input.keyboard.createCursorKeys();
|
||||
|
||||
var controlConfig = {
|
||||
camera: this.cameras.main,
|
||||
left: cursors.left,
|
||||
right: cursors.right,
|
||||
up: cursors.up,
|
||||
down: cursors.down,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.35,
|
||||
drag: 0.01,
|
||||
maxSpeed: 1.2
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: '#cdcdcd',
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
|
||||
}
|
||||
let controls;
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function update (time, delta) {
|
||||
controls.update(delta);
|
||||
}
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
|
||||
obj.setScale(0.25);
|
||||
obj.animationState.setAnimation(0, "idle", true);
|
||||
obj.animationState.setAnimation(1, "shoot", true);
|
||||
}
|
||||
var cursors = this.input.keyboard.createCursorKeys();
|
||||
|
||||
var controlConfig = {
|
||||
camera: this.cameras.main,
|
||||
left: cursors.left,
|
||||
right: cursors.right,
|
||||
up: cursors.up,
|
||||
down: cursors.down,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.35,
|
||||
drag: 0.01,
|
||||
maxSpeed: 1.2
|
||||
};
|
||||
|
||||
controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
|
||||
}
|
||||
|
||||
function update(time, delta) {
|
||||
controls.update(delta);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,56 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Bounds test</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
let spineboy;
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
let spineboy;
|
||||
function create() {
|
||||
spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
|
||||
spineboy.scale = 0.4
|
||||
spineboy.setInteractive();
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
|
||||
}
|
||||
|
||||
function preload () {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create () {
|
||||
spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
|
||||
spineboy.scale = 0.4
|
||||
spineboy.setInteractive();
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
|
||||
}
|
||||
|
||||
let time = 0;
|
||||
function update (t, delta) {
|
||||
time += delta / 1000;
|
||||
let scale = 0.4 + Math.cos(time) * 0.2;
|
||||
spineboy.scale = scale;
|
||||
spineboy.angle++;
|
||||
}
|
||||
let time = 0;
|
||||
function update(t, delta) {
|
||||
time += delta / 1000;
|
||||
let scale = 0.4 + Math.cos(time) * 0.2;
|
||||
spineboy.scale = scale;
|
||||
spineboy.angle++;
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -6,7 +6,6 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
@ -22,11 +21,11 @@
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,44 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Canvas test</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.CANVAS,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.CANVAS,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let 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");
|
||||
}
|
||||
};
|
||||
|
||||
let 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");
|
||||
}
|
||||
|
||||
function create () {
|
||||
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
function create() {
|
||||
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,71 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Control bones</h1>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
};
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload () {
|
||||
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
|
||||
this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
|
||||
}
|
||||
function preload() {
|
||||
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
|
||||
this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
|
||||
}
|
||||
|
||||
function create () {
|
||||
let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
|
||||
stretchyman.scale = 0.8;
|
||||
stretchyman.skeleton.updateWorldTransform();
|
||||
function create() {
|
||||
let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
|
||||
stretchyman.scale = 0.8;
|
||||
stretchyman.skeleton.updateWorldTransform();
|
||||
|
||||
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++)
|
||||
{
|
||||
var bone = stretchyman.skeleton.findBone(controlBones[i]);
|
||||
let point = {x: bone.worldX, y: bone.worldY};
|
||||
stretchyman.skeletonToPhaserWorldCoordinates(point);
|
||||
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++) {
|
||||
var bone = stretchyman.skeleton.findBone(controlBones[i]);
|
||||
let point = { x: bone.worldX, y: bone.worldY };
|
||||
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);
|
||||
|
||||
control.setInteractive();
|
||||
this.input.setDraggable(control);
|
||||
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
|
||||
control.setInteractive();
|
||||
this.input.setDraggable(control);
|
||||
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
|
||||
|
||||
gameObject.x = dragX;
|
||||
gameObject.y = dragY;
|
||||
gameObject.x = dragX;
|
||||
gameObject.y = dragY;
|
||||
|
||||
var bone = gameObject.getData('bone');
|
||||
let point = { x: dragX, y: dragY };
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
var bone = gameObject.getData('bone');
|
||||
let point = { x: dragX, y: dragY };
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.update();
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
bone.update();
|
||||
|
||||
}, this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}, this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,48 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Depth test</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.image('logo', 'assets/phaser.png');
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload () {
|
||||
this.load.image('logo', 'assets/phaser.png');
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create () {
|
||||
this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
|
||||
let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.animationState.setAnimation(0, "walk", true)
|
||||
spineboy.setScale(0.5)
|
||||
spineboy.setDepth(1);
|
||||
this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
|
||||
}
|
||||
function create() {
|
||||
this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
|
||||
let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.animationState.setAnimation(0, "walk", true)
|
||||
spineboy.setScale(0.5)
|
||||
spineboy.setDepth(1);
|
||||
this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -51,10 +51,10 @@
|
||||
this.scene = scene;
|
||||
|
||||
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.parent.add(this.spine);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Example extends Phaser.Scene {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Spine Phaser</h1>
|
||||
<ul>
|
||||
@ -25,4 +27,5 @@
|
||||
<li><a href="./render-to-texture-test.html">Render to texture test</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@ -8,58 +9,60 @@
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Multi-scene test</h1>
|
||||
</body>
|
||||
<script>
|
||||
class Scene1 extends Phaser.Scene {
|
||||
constructor () {
|
||||
super({key: "Scene1"})
|
||||
class Scene1 extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: "Scene1" })
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene2'));
|
||||
}
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
class Scene2 extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: "Scene2" })
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
let raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
|
||||
raptor.scale = 0.5;
|
||||
raptor.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene1'));
|
||||
}
|
||||
}
|
||||
|
||||
create() {
|
||||
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene2'));
|
||||
}
|
||||
}
|
||||
|
||||
class Scene2 extends Phaser.Scene {
|
||||
constructor () {
|
||||
super({key: "Scene2"})
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
let raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
|
||||
raptor.scale = 0.5;
|
||||
raptor.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene1'));
|
||||
}
|
||||
}
|
||||
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [ Scene1, Scene2 ],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
};
|
||||
let game = new Phaser.Game(config);
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [Scene1, Scene2],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
};
|
||||
let game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -6,7 +6,6 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
@ -22,11 +21,11 @@
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@ -8,43 +9,45 @@
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Basic example</h1>
|
||||
</body>
|
||||
<script>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
},
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
function create() {
|
||||
let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
function preload () {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy2.scale = 0.5;
|
||||
spineboy2.animationState.setAnimation(0, "run", true);
|
||||
|
||||
function create () {
|
||||
let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy2.scale = 0.5;
|
||||
spineboy2.animationState.setAnimation(0, "run", true);
|
||||
|
||||
this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
|
||||
}
|
||||
this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -126,6 +126,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
|
||||
if (!this.webGLRenderer) {
|
||||
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);
|
||||
} else {
|
||||
if (!this.canvasRenderer) {
|
||||
|
||||
@ -6,3 +6,4 @@ export * from "@esotericsoftware/spine-core";
|
||||
export * from "@esotericsoftware/spine-webgl";
|
||||
import { SpinePlugin } from "./SpinePlugin";
|
||||
(window as any).spine = { SpinePlugin: SpinePlugin };
|
||||
(window as any)["spine.SpinePlugin"] = SpinePlugin;
|
||||
|
||||
@ -176,7 +176,7 @@ export class SkeletonRenderer {
|
||||
clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
|
||||
let clippedVertices = new Float32Array(clipper.clippedVertices);
|
||||
let clippedTriangles = clipper.clippedTriangles;
|
||||
if (transformer) transformer(renderable.vertices, renderable.numFloats, vertexSize);
|
||||
if (transformer) transformer(clippedVertices, clippedVertices.length, vertexSize);
|
||||
batcher.draw(texture, clippedVertices, clippedTriangles);
|
||||
} else {
|
||||
let verts = renderable.vertices;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user