Skip to content

Commit

Permalink
[phaser] More tests, fix make factory, add Alpha mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
@badlogic
badlogic committed Apr 6, 2023
1 parent da68e66 commit fb3ebb5
Show file tree
Hide file tree
Showing 10 changed files with 269 additions and 7 deletions.
Binary file added spine-ts/spine-phaser/example/assets/phaser.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion spine-ts/spine-phaser/example/basic-example.html
View file
Expand Up @@ -36,7 +36,7 @@ <h1>Basic example</h1>
}

function create () {
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
}
Expand Down
44 changes: 44 additions & 0 deletions spine-ts/spine-phaser/example/canvas-test.html
View 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>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" }
]
}
};

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>
48 changes: 48 additions & 0 deletions spine-ts/spine-phaser/example/depth-test.html
View file
@@ -0,0 +1,48 @@
<!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" }
]
}
};

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);
}
</script>
</html>
103 changes: 103 additions & 0 deletions spine-ts/spine-phaser/example/extended-class-test.html
View file
@@ -0,0 +1,103 @@
<!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>Extended class</h1>
</body>
<script>


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);
}

class CustomSpineObject1 {
constructor(scene, x, y, data, atlas, animation, loop) {
this.scene = scene;
this.spine = scene.add.spine(x, y, data, atlas);
this.spine.animationState.setAnimation(0, animation, loop);
}
}

class CustomSpineObject2 {
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
this.scene = scene;
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
this.spine.animationState.setAnimation(0, animation, loop);

scene.sys.displayList.add(this.spine);
scene.sys.updateList.add(this.spine);
}
}

class CustomSpineObject3 {
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
this.scene = scene;

this.parent = scene.add.container(0, 0);
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 {
constructor() {
super();
}

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");
}

create() {
this.add.image(0, 0, 'logo').setOrigin(0);

let custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true);
custom1.spine.setScale(0.5);
let custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true);
custom2.spine.setScale(0.5);
let custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true);
custom3.spine.setScale(0.5);

this.add.image(400, 0, 'logo').setOrigin(0);
}
}


const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
scene: Example,
plugins: {
scene: [
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
]
}
};

const game = new Phaser.Game(config);
</script>

</html>
4 changes: 4 additions & 0 deletions spine-ts/spine-phaser/example/index.html
View file
Expand Up @@ -19,6 +19,10 @@ <h1>Spine Phaser</h1>
<li><a href="./blend-test.html">Blend test</a></li>
<li><a href="./camera-pipeline-test.html">Camera pipeline test</a></li>
<li><a href="./control-bones-test.html">Control bones</a></li>
<li><a href="./extended-class-test.html">Extended class</a></li>
<li><a href="./canvas-test.html">Canvas test</a></li>
<li><a href="./depth-test.html">Depth test</a></li>
<li><a href="./render-to-texture-test.html">Render to texture test</a></li>
</ul>
</body>
</html>
58 changes: 58 additions & 0 deletions spine-ts/spine-phaser/example/render-to-texture-test.html
View file
@@ -0,0 +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>Render to texture</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 renderTexture = this.add.renderTexture(0, 0, 800, 600);
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true);
this.add.text(200, 8, 'Click to stamp SpineBoy');

this.input.on('pointermove', function (pointer) {
spineboy.setPosition(pointer.x, pointer.y);
}, this);

this.input.on('pointerdown', function (pointer) {
renderTexture.draw(spineboy);
spineboy.angle += 10;
}, this);
}
</script>

</html>
7 changes: 3 additions & 4 deletions spine-ts/spine-phaser/src/SpineGameObject.ts
View file
@@ -1,8 +1,7 @@
import { SPINE_GAME_OBJECT_TYPE } from "./keys";
import { SpinePlugin } from "./SpinePlugin";
import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin } from "./mixins";
import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin, AlphaMixin } from "./mixins";
import { AnimationState, AnimationStateData, Bone, MathUtils, Skeleton, Skin, Vector2 } from "@esotericsoftware/spine-core";
import { Vector3 } from "@esotericsoftware/spine-webgl";

class BaseSpineGameObject extends Phaser.GameObjects.GameObject {
constructor (scene: Phaser.Scene, type: string) {
Expand Down Expand Up @@ -76,7 +75,7 @@ export class SkinsAndAnimationBoundsProvider implements SpineGameObjectBoundsPro
}
}

export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(BaseSpineGameObject)))))) {
export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(AlphaMixin(BaseSpineGameObject))))))) {
blendMode = -1;
skeleton: Skeleton | null = null;
animationStateData: AnimationStateData | null = null;
Expand All @@ -89,7 +88,7 @@ export class SpineGameObject extends ComputedSizeMixin(DepthMixin(FlipMixin(Scro

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); x
this.setPosition(x, y);
this.setSkeleton(dataKey, atlasKey);
}

Expand Down
7 changes: 5 additions & 2 deletions spine-ts/spine-phaser/src/SpinePlugin.ts
View file
Expand Up @@ -106,13 +106,16 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
};

let makeSpineGameObject = function (this: Phaser.GameObjects.GameObjectFactory, config: any, addToScene: boolean) {
let x = config.x ? config.x : 0;
let y = config.y ? config.y : 0;
let dataKey = config.dataKey ? config.dataKey : null;
let atlasKey = config.atlasKey ? config.atlasKey : null;
let gameObject = new SpineGameObject(this.scene, self, 0, 0, dataKey, atlasKey);
let boundsProvider = config.boundsProvider ? config.boundsProvider : undefined;
let gameObject = new SpineGameObject(this.scene, self, x, y, dataKey, atlasKey, boundsProvider);
if (addToScene !== undefined) {
config.add = addToScene;
}
Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config);
return Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config);
}
pluginManager.registerGameObject(SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject);
}
Expand Down
3 changes: 3 additions & 0 deletions spine-ts/spine-phaser/src/mixins.ts
View file
Expand Up @@ -31,6 +31,7 @@ export const Flip = components.Flip;
export const ScrollFactor = components.ScrollFactor;
export const Transform = components.Transform;
export const Visible = components.Visible;
export const Alpha = components.Alpha;

export interface Type<
T,
Expand Down Expand Up @@ -75,3 +76,5 @@ export const TransformMixin: TransformMixin = createMixin<Phaser.GameObjects.Com
type VisibleMixin = Mixin<Phaser.GameObjects.Components.Visible, Phaser.GameObjects.GameObject>;
export const VisibleMixin: VisibleMixin = createMixin<Phaser.GameObjects.Components.Visible>(Visible);

type AlphaMixin = Mixin<Phaser.GameObjects.Components.Alpha, Phaser.GameObjects.GameObject>;
export const AlphaMixin: AlphaMixin = createMixin<Phaser.GameObjects.Components.Alpha>(Alpha);

0 comments on commit fb3ebb5

Please sign in to comment.