mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 15:24:55 +08:00
[phaser] Bounds calculation, hit area support, more examples.
# Conflicts: # spine-ts/package-lock.json
This commit is contained in:
Mario Zechner
parent
69cec06c23
commit
be6b19afa5
44
spine-ts/spine-phaser/example/basic-example.html
Normal file
44
spine-ts/spine-phaser/example/basic-example.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!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" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,9 +1,17 @@
|
||||
|
||||
/// <reference path="../../spine-core/src/index.ts" />
|
||||
/// <reference path="../../spine-canvas/src/index.ts" />
|
||||
/// <reference path="../../spine-webgl/src/index.ts" />
|
||||
/// <reference path="../src/index.ts" />
|
||||
|
||||
<!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,
|
||||
@ -29,8 +37,6 @@ function preload () {
|
||||
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");
|
||||
this.load.image("nyan", "nyan.png");
|
||||
let canvas = document.querySelector("#game-canvas");
|
||||
}
|
||||
|
||||
function create () {
|
||||
@ -52,4 +58,6 @@ function create () {
|
||||
|
||||
function update () {
|
||||
debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
56
spine-ts/spine-phaser/example/bounds-test.html
Normal file
56
spine-ts/spine-phaser/example/bounds-test.html
Normal file
@ -0,0 +1,56 @@
|
||||
<!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" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
function create () {
|
||||
spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
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++;
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -5,11 +5,16 @@
|
||||
<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>Spine Phaser</h1>
|
||||
<ul>
|
||||
<li><a href="./basic-example.html">Basic example</a></li>
|
||||
<li><a href="./batching-test.html">Batching test</a></li>
|
||||
<li><a href="./multi-scene-test.html">Multi-scene test</a></li>
|
||||
<li><a href="./bounds-test.html">Bounds test</a></li>
|
||||
<li><a href="./visibility-test.html">Visibility test</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
<script src="./index.js"></script>
|
||||
</html>
|
||||
65
spine-ts/spine-phaser/example/multi-scene-test.html
Normal file
65
spine-ts/spine-phaser/example/multi-scene-test.html
Normal file
@ -0,0 +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>Multi-scene test</h1>
|
||||
</body>
|
||||
<script>
|
||||
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'));
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
</script>
|
||||
</html>
|
||||
50
spine-ts/spine-phaser/example/visibility-test.html
Normal file
50
spine-ts/spine-phaser/example/visibility-test.html
Normal file
@ -0,0 +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>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" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
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(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);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -2,42 +2,117 @@ import { SPINE_GAME_OBJECT_TYPE } from "./keys";
|
||||
import { SpinePlugin } from "./SpinePlugin";
|
||||
import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin } from "./mixins";
|
||||
import { AnimationState, AnimationStateData, MathUtils, Skeleton } from "@esotericsoftware/spine-core";
|
||||
import { Matrix4, Vector3 } from "@esotericsoftware/spine-webgl";
|
||||
|
||||
class BaseSpineGameObject extends Phaser.GameObjects.GameObject {
|
||||
constructor (scene: Phaser.Scene, type: string) {
|
||||
constructor(scene: Phaser.Scene, type: string) {
|
||||
super(scene, type);
|
||||
}
|
||||
}
|
||||
|
||||
interface SpineContainer {
|
||||
export interface SpineGameObjectBoundsProvider {
|
||||
calculateBounds(gameObject: SpineGameObject): { x: number, y: number, width: number, height: number };
|
||||
}
|
||||
|
||||
export class SetupPoseBoundsProvider implements SpineGameObjectBoundsProvider {
|
||||
calculateBounds(gameObject: SpineGameObject) {
|
||||
if (!gameObject.skeleton) return { x: 0, y: 0, width: 0, height: 0 };
|
||||
gameObject.skeleton.setToSetupPose();
|
||||
gameObject.skeleton.updateWorldTransform();
|
||||
return gameObject.skeleton.getBoundsRect();
|
||||
}
|
||||
}
|
||||
|
||||
export class SkinsAndAnimationBoundsProvider implements SpineGameObjectBoundsProvider {
|
||||
constructor(private animation: string, private skins: string[] = []) {
|
||||
|
||||
}
|
||||
|
||||
calculateBounds(gameObject: SpineGameObject): { x: number; y: number; width: number; height: number; } {
|
||||
if (!gameObject.skeleton) return { x: 0, y: 0, width: 0, height: 0 };
|
||||
// FIXME
|
||||
gameObject.skeleton.setToSetupPose();
|
||||
gameObject.skeleton.updateWorldTransform();
|
||||
return gameObject.skeleton.getBoundsRect();
|
||||
}
|
||||
}
|
||||
|
||||
export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(BaseSpineGameObject)))))) {
|
||||
blendMode = -1;
|
||||
skeleton: Skeleton | null = null;
|
||||
animationStateData: AnimationStateData | null = null;
|
||||
animationState: AnimationState | null = null;
|
||||
private premultipliedAlpha = false;
|
||||
private _displayOriginX = 0;
|
||||
private _displayOriginY = 0;
|
||||
private _scaleX = 1;
|
||||
private _scaleY = 1;
|
||||
|
||||
constructor (scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string) {
|
||||
constructor(scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string, public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider()) {
|
||||
super(scene, SPINE_GAME_OBJECT_TYPE);
|
||||
this.setPosition(x, y);
|
||||
this.setPosition(x, y); x
|
||||
this.setSkeleton(dataKey, atlasKey);
|
||||
}
|
||||
|
||||
setSkeleton (dataKey: string, atlasKey: string) {
|
||||
setSkeleton(dataKey: string, atlasKey: string) {
|
||||
if (dataKey && atlasKey) {
|
||||
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);
|
||||
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
|
||||
this.animationState = new AnimationState(new AnimationStateData(this.skeleton.data));
|
||||
this.animationStateData = new AnimationStateData(this.skeleton.data);
|
||||
this.animationState = new AnimationState(this.animationStateData);
|
||||
this.updateSize();
|
||||
} else {
|
||||
this.skeleton = null;
|
||||
this.animationStateData = null;
|
||||
this.animationState = null;
|
||||
}
|
||||
}
|
||||
|
||||
preUpdate (time: number, delta: number) {
|
||||
public get displayOriginX() {
|
||||
return this._displayOriginX;
|
||||
}
|
||||
|
||||
public set displayOriginX(value: number) {
|
||||
this._displayOriginX = value;
|
||||
}
|
||||
|
||||
public get displayOriginY() {
|
||||
return this._displayOriginY;
|
||||
}
|
||||
|
||||
public set displayOriginY(value: number) {
|
||||
this._displayOriginY = value;
|
||||
}
|
||||
|
||||
public get scaleX() {
|
||||
return this._scaleX;
|
||||
}
|
||||
|
||||
public set scaleX(value: number) {
|
||||
this._scaleX = value;
|
||||
this.updateSize();
|
||||
}
|
||||
|
||||
public get scaleY() {
|
||||
return this._scaleX;
|
||||
}
|
||||
|
||||
public set scaleY(value: number) {
|
||||
this._scaleY = value;
|
||||
this.updateSize();
|
||||
}
|
||||
|
||||
updateSize() {
|
||||
if (!this.skeleton) return;
|
||||
let bounds = this.boundsProvider.calculateBounds(this);
|
||||
// For some reason the TS compiler and the ComputedSize mixin don't work well together...
|
||||
let self = this as any;
|
||||
self.width = bounds.width;
|
||||
self.height = bounds.height;
|
||||
this.displayOriginX = -bounds.x;
|
||||
this.displayOriginY = -bounds.y;
|
||||
}
|
||||
|
||||
preUpdate(time: number, delta: number) {
|
||||
if (!this.skeleton || !this.animationState) return;
|
||||
|
||||
this.animationState.update(delta / 1000);
|
||||
@ -45,18 +120,22 @@ export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(Scro
|
||||
this.skeleton.updateWorldTransform();
|
||||
}
|
||||
|
||||
preDestroy () {
|
||||
preDestroy() {
|
||||
this.skeleton = null;
|
||||
this.animationState = null;
|
||||
// FIXME tear down any event emitters
|
||||
}
|
||||
|
||||
willRender (camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
// FIXME
|
||||
return true;
|
||||
willRender(camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
if (!this.visible) return false;
|
||||
|
||||
var GameObjectRenderMask = 0xf;
|
||||
var result = (!this.skeleton || !(GameObjectRenderMask !== this.renderFlags || (this.cameraFilter !== 0 && (this.cameraFilter & camera.id))));
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
renderWebGL (renderer: Phaser.Renderer.WebGL.WebGLRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
|
||||
renderWebGL(renderer: Phaser.Renderer.WebGL.WebGLRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
|
||||
if (!this.skeleton || !this.animationState || !this.plugin.webGLRenderer) return;
|
||||
|
||||
let sceneRenderer = this.plugin.webGLRenderer;
|
||||
@ -80,11 +159,10 @@ export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(Scro
|
||||
if (!renderer.nextTypeMatch) {
|
||||
sceneRenderer.end();
|
||||
renderer.pipelines.rebind();
|
||||
console.log("Draw calls: " + sceneRenderer.batcher.getDrawCalls());
|
||||
}
|
||||
}
|
||||
|
||||
renderCanvas (renderer: Phaser.Renderer.Canvas.CanvasRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
|
||||
renderCanvas(renderer: Phaser.Renderer.Canvas.CanvasRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) {
|
||||
if (!this.skeleton || !this.animationState || !this.plugin.canvasRenderer) return;
|
||||
|
||||
let context = renderer.currentContext;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user