add-existing.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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-v3.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>Add existing object</h1>
  14. </body>
  15. <script>
  16. class BasicExample extends Phaser.Scene {
  17. preload() {
  18. this.load.spineBinary("spineboy-data", "/assets/spineboy-pro.skel");
  19. this.load.spineAtlas("spineboy-atlas", "/assets/spineboy-pma.atlas");
  20. }
  21. create() {
  22. const spineboy = this.add.spine(
  23. 200,
  24. 500,
  25. "spineboy-data",
  26. "spineboy-atlas"
  27. );
  28. const spineboy2 = this.add.existing(
  29. new spine.SpineGameObject(
  30. this,
  31. this.spine,
  32. 500,
  33. 500,
  34. "spineboy-data",
  35. "spineboy-atlas"
  36. )
  37. );
  38. }
  39. }
  40. new Phaser.Game({
  41. type: Phaser.AUTO,
  42. width: 800,
  43. height: 600,
  44. type: Phaser.WEBGL,
  45. scene: [BasicExample],
  46. plugins: {
  47. scene: [
  48. {
  49. key: "spine.SpinePlugin",
  50. plugin: spine.SpinePlugin,
  51. mapping: "spine",
  52. },
  53. ],
  54. },
  55. });
  56. </script>
  57. </html>