• Runtimes
  • Struggling to Integrate PixiJS and Spine in My Project

I've been trying to leverage the features of PixiJS, but after several days of attempts, I still haven't succeeded. Using the runtime from spine-ts, I can run npm run dev in the terminal to start the example, and I successfully replaced the character in the example with my own.

However, I want to enable this in my own project, and despite following the tutorials, it still doesn't work. Could it be that my environment setup is incorrect, or is there another issue?

Any help would be greatly appreciated!

  • इस पर Davide ने जवाब दिया।
    Related Discussions
    ...
    • संपादित

    hanbaga

    How can I run your project? The package.json has just two dependencies and nothing more to serve the files.
    I used http-server to serve the files and run it. Tell me if you were using a bundler or some other way. But from your setup it seems that you just wanted to use plain js.

    It seems like you are trying to use ESModules, but there are two main problems.
    The first one is that you cannot expect to import the packages as you are doing. When running the code as is, I get:

    Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

    To solve this issue you need to define an importmap in your html to instruct your browser where modules are located, or you need to provide the actual path to the file.

    The second problem is that for browser usage, we do not provide ESModules for our libraries, but only classic IIFE.
    If you really want to use ESModules, you can use two approches:

    1. Clone our repo and build ESModules. It's super easy, just change the output format in the package.json from iife to esm.
    2. Once you import PixiJS as ESModule, append it to the global window: window.PIXI = PIXI;. Then you can import our iife, but be aware that you must "wait" PixiJS to be fully loaded before importing spine-pixi-v8. You can, for example, add the defer attribute to the script import tag.

    However, if you just want to serve your file, you could just import both PixiJS and spine-pixi-v8 as IIFE, serve you files, and run your animation as we do in our examples.