123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <!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>
- <link rel="stylesheet" href="../../index.css" />
- <title>Spine Phaser Example</title>
- </head>
- <body class="p-4 flex flex-col items-center">
- <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() {
- const 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", "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);
- const custom1 = new CustomSpineObject1(
- this,
- 100,
- 550,
- "spineboy-data",
- "spineboy-atlas",
- "idle",
- true
- );
- custom1.spine.setScale(0.5);
- const custom2 = new CustomSpineObject2(
- this,
- 350,
- 550,
- "spineboy-data",
- "spineboy-atlas",
- "walk",
- true
- );
- custom2.spine.setScale(0.5);
- const 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>
|