extended-class-test.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
  8. <script src="../dist/iife/spine-phaser.js"></script>
  9. <link rel="stylesheet" href="../../index.css" />
  10. <title>Spine Phaser Example</title>
  11. </head>
  12. <body class="p-4 flex flex-col items-center">
  13. <h1>Extended class</h1>
  14. </body>
  15. <script>
  16. function preload() {
  17. this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
  18. this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
  19. }
  20. function create() {
  21. const spineboy = this.add.spine(
  22. 400,
  23. 300,
  24. "spineboy-data",
  25. "spineboy-atlas"
  26. );
  27. spineboy.scale = 0.5;
  28. spineboy.animationState.setAnimation(0, "walk", true);
  29. }
  30. class CustomSpineObject1 {
  31. constructor(scene, x, y, data, atlas, animation, loop) {
  32. this.scene = scene;
  33. this.spine = scene.add.spine(x, y, data, atlas);
  34. this.spine.animationState.setAnimation(0, animation, loop);
  35. }
  36. }
  37. class CustomSpineObject2 {
  38. constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
  39. this.scene = scene;
  40. this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
  41. this.spine.animationState.setAnimation(0, animation, loop);
  42. scene.sys.displayList.add(this.spine);
  43. scene.sys.updateList.add(this.spine);
  44. }
  45. }
  46. class CustomSpineObject3 {
  47. constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
  48. this.scene = scene;
  49. this.parent = scene.add.container(0, 0);
  50. this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
  51. this.spine.animationState.setAnimation(0, animation, loop);
  52. this.parent.add(this.spine);
  53. }
  54. }
  55. class Example extends Phaser.Scene {
  56. constructor() {
  57. super();
  58. }
  59. preload() {
  60. this.load.image("logo", "phaser.png");
  61. this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
  62. this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
  63. }
  64. create() {
  65. this.add.image(0, 0, "logo").setOrigin(0);
  66. const custom1 = new CustomSpineObject1(
  67. this,
  68. 100,
  69. 550,
  70. "spineboy-data",
  71. "spineboy-atlas",
  72. "idle",
  73. true
  74. );
  75. custom1.spine.setScale(0.5);
  76. const custom2 = new CustomSpineObject2(
  77. this,
  78. 350,
  79. 550,
  80. "spineboy-data",
  81. "spineboy-atlas",
  82. "walk",
  83. true
  84. );
  85. custom2.spine.setScale(0.5);
  86. const custom3 = new CustomSpineObject3(
  87. this,
  88. 600,
  89. 550,
  90. "spineboy-data",
  91. "spineboy-atlas",
  92. "run",
  93. true
  94. );
  95. custom3.spine.setScale(0.5);
  96. this.add.image(400, 0, "logo").setOrigin(0);
  97. }
  98. }
  99. const config = {
  100. type: Phaser.WEBGL,
  101. parent: "phaser-example",
  102. width: 800,
  103. height: 600,
  104. backgroundColor: "#2d2d2d",
  105. scene: Example,
  106. plugins: {
  107. scene: [
  108. {
  109. key: "spine.SpinePlugin",
  110. plugin: spine.SpinePlugin,
  111. mapping: "spine",
  112. },
  113. ],
  114. },
  115. };
  116. const game = new Phaser.Game(config);
  117. </script>
  118. </html>