custom-spine-object-type.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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>Custom object factor name</h1>
  14. </body>
  15. <script>
  16. window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
  17. class BasicExample extends Phaser.Scene {
  18. preload() {
  19. this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
  20. this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
  21. }
  22. create() {
  23. const spineboy = this.add.spineOfficial(
  24. 400,
  25. 500,
  26. "spineboy-data",
  27. "spineboy-atlas"
  28. );
  29. spineboy.setInteractive();
  30. spineboy.displayWidth = 200;
  31. spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
  32. this.input.enableDebug(spineboy, 0xff00ff);
  33. spineboy.animationState.setAnimation(0, "walk", true);
  34. }
  35. }
  36. new Phaser.Game({
  37. type: Phaser.AUTO,
  38. width: 800,
  39. height: 600,
  40. type: Phaser.WEBGL,
  41. scene: [BasicExample],
  42. plugins: {
  43. scene: [
  44. {
  45. key: "spine.SpinePlugin",
  46. plugin: spine.SpinePlugin,
  47. mapping: "spine",
  48. },
  49. ],
  50. },
  51. });
  52. </script>
  53. </html>