Domů Procházet Nápověda
Přihlásit se
archive
/
spine-runtimes
zrcadlo https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Procházet zdrojové kódy

[phaser] More tests, fix make factory, add Alpha mixin

Mario Zechner před 2 roky
rodič
da68e66e9c
revize
fb3ebb56eb
10 změnil soubory, kde provedl 269 přidání a 7 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. binární
      spine-ts/spine-phaser/example/assets/phaser.png
  2. 1 1
      spine-ts/spine-phaser/example/basic-example.html
  3. 44 0
      spine-ts/spine-phaser/example/canvas-test.html
  4. 48 0
      spine-ts/spine-phaser/example/depth-test.html
  5. 103 0
      spine-ts/spine-phaser/example/extended-class-test.html
  6. 4 0
      spine-ts/spine-phaser/example/index.html
  7. 58 0
      spine-ts/spine-phaser/example/render-to-texture-test.html
  8. 3 4
      spine-ts/spine-phaser/src/SpineGameObject.ts
  9. 5 2
      spine-ts/spine-phaser/src/SpinePlugin.ts
  10. 3 0
      spine-ts/spine-phaser/src/mixins.ts

binární
spine-ts/spine-phaser/example/assets/phaser.png
Zobrazit soubor


+ 1 - 1
spine-ts/spine-phaser/example/basic-example.html
Zobrazit soubor 

@@ -36,7 +36,7 @@ function preload () {
 
 }
 
 
 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);
 
 }

+ 44 - 0
spine-ts/spine-phaser/example/canvas-test.html
Zobrazit soubor 

@@ -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/[email protected]/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 - 0
spine-ts/spine-phaser/example/depth-test.html
Zobrazit soubor 

@@ -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/[email protected]/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 - 0
spine-ts/spine-phaser/example/extended-class-test.html
Zobrazit soubor 

@@ -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/[email protected]/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 - 0
spine-ts/spine-phaser/example/index.html
Zobrazit soubor 

@@ -19,6 +19,10 @@
 
         <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 - 0
spine-ts/spine-phaser/example/render-to-texture-test.html
Zobrazit soubor 

@@ -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/[email protected]/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>

+ 3 - 4
spine-ts/spine-phaser/src/SpineGameObject.ts
Zobrazit soubor 

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

+ 5 - 2
spine-ts/spine-phaser/src/SpinePlugin.ts
Zobrazit soubor 

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

+ 3 - 0
spine-ts/spine-phaser/src/mixins.ts
Zobrazit soubor 

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