mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[phaser] Update examples to Phaser 3.60.0
This commit is contained in:
parent
f80bc5e110
commit
7b98021228
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.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>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,14 +5,14 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>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("stretchyman-data", "assets/stretchyman-pro.skel");
|
||||||
@ -20,7 +20,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
const stretchyman = this.add.spine(400, 580, 'stretchyman-data', "stretchyman-atlas");
|
const stretchyman = this.add.spine(400, 580, 'stretchyman-data', "stretchyman-atlas");
|
||||||
stretchyman.animationState.setAnimation(0, "idle", true);
|
stretchyman.animationState.setAnimation(0, "idle", true);
|
||||||
stretchyman.updatePose(0);
|
stretchyman.updatePose(0);
|
||||||
|
|
||||||
@ -38,12 +38,12 @@
|
|||||||
this.input.setDraggable(control);
|
this.input.setDraggable(control);
|
||||||
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
|
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
|
||||||
gameObject.x = dragX;
|
gameObject.x = dragX;
|
||||||
gameObject.y = dragY;
|
gameObject.y = dragY;
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
stretchyman.beforeUpdateWorldTransforms = () => {
|
stretchyman.beforeUpdateWorldTransforms = () => {
|
||||||
for (let controlBone of controlBones) {
|
for (let controlBone of controlBones) {
|
||||||
const bone = controlBone.getData('bone');
|
const bone = controlBone.getData('bone');
|
||||||
const point = { x: controlBone.x, y: controlBone.y};
|
const point = { x: controlBone.x, y: controlBone.y};
|
||||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||||
@ -65,7 +65,7 @@
|
|||||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
@ -17,7 +17,7 @@
|
|||||||
<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";
|
||||||
@ -40,7 +40,7 @@
|
|||||||
interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`),
|
interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`),
|
||||||
end: (entry) => log(`Ended animation ${entry.animation.name}`),
|
end: (entry) => log(`Ended animation ${entry.animation.name}`),
|
||||||
dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
|
dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
|
||||||
complete: (entry) => log(`Completed animation ${entry.animation.name}`),
|
complete: (entry) => log(`Completed animation ${entry.animation.name}`),
|
||||||
})
|
})
|
||||||
|
|
||||||
spineboy.animationState.setAnimation(0, "walk", true);
|
spineboy.animationState.setAnimation(0, "walk", true);
|
||||||
@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
canvas: document.querySelector("#game"),
|
canvas: document.querySelector("#game"),
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<title>Spine Phaser Example</title>
|
<title>Spine Phaser Example</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -37,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
const renderTexture = this.add.renderTexture(0, 0, 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(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);
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<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.60.0/dist/phaser.js"></script>
|
||||||
<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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user