multi-scene-test.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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>Multi-scene test</h1>
  14. </body>
  15. <script>
  16. class Scene1 extends Phaser.Scene {
  17. constructor() {
  18. super({ key: "Scene1" });
  19. }
  20. preload() {
  21. this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
  22. this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
  23. }
  24. create() {
  25. const spineboy = this.add.spine(
  26. 400,
  27. 500,
  28. "spineboy-data",
  29. "spineboy-atlas"
  30. );
  31. spineboy.scale = 0.5;
  32. spineboy.animationState.setAnimation(0, "walk", true);
  33. this.input.once("pointerdown", () => this.scene.start("Scene2"));
  34. }
  35. }
  36. class Scene2 extends Phaser.Scene {
  37. constructor() {
  38. super({ key: "Scene2" });
  39. }
  40. preload() {
  41. this.load.spineJson("raptor-data", "assets/raptor-pro.json");
  42. this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
  43. }
  44. create() {
  45. const raptor = this.add.spine(300, 600, "raptor-data", "raptor-atlas");
  46. raptor.scale = 0.5;
  47. raptor.animationState.setAnimation(0, "walk", true);
  48. this.input.once("pointerdown", () => this.scene.start("Scene1"));
  49. }
  50. }
  51. const config = {
  52. type: Phaser.AUTO,
  53. width: 800,
  54. height: 600,
  55. type: Phaser.WEBGL,
  56. scene: [Scene1, Scene2],
  57. plugins: {
  58. scene: [
  59. {
  60. key: "spine.SpinePlugin",
  61. plugin: spine.SpinePlugin,
  62. mapping: "spine",
  63. },
  64. ],
  65. },
  66. };
  67. const game = new Phaser.Game(config);
  68. </script>
  69. </html>