• Runtimes
  • Phaser + Spine in single file - how is this possible?

Hi! I’m making a test, playable game (Phaser + Spine, assembly into one index.html should be).

Problem:
Spine animations (in .atlas, .json, .png formats) work in dev mode, but after the build (vite build) the character is not displayed, because the .atlas file contains a link to .png, but this link is not converted to base64 during the build. As a result, after the build, atlas cannot find the image.

I’ve already tried:

Manually insert base64 into HTML (partially works, cumbersome).

Tried with phaser cache and imports via atlas?raw, but it didn’t work, a rather specific approach.

Question:
How to properly load spine animation in Phaser + spine-phaser-v4 so that it:

Works after assembly (in one HTML file),
Pulls .png from .atlas (or its base64 equivalent),
Does not require manual insertion of base64 into HTML
Maybe there is a spine+phaser project template, where the build goes to 1 index.html and png links from the spine atlas work correctly?

My package.json:

{
"name": "phaser-playable-template",
"version": "1.0.0",
"scripts": {
"start": "vite",
"build": "vite build"
},
"dependencies": {
"@esotericsoftware/spine-core": "^4.2.82",
"@esotericsoftware/spine-phaser-v4": "^4.2.82"
},
"devDependencies": {
"terser": "^5.40.0",
"typescript": "^5.0.0",
"vite": "^5.0.0",
"vite-plugin-singlefile": "^2.2.0"
}
}

Related Discussions
...

Hello 🙂

Unless you are able to make something special with your build tool, the only option is to use inline Base64 for the images.

You can find an example here.

    Davide thank you, looks I'm close to the solution. In this example I see <script src="../dist/iife/spine-phaser-v4.js"></script>, how I can get this .js?

    • Davide님이 이에 답장했습니다.

      Davide thanks you, i set up index.html and everything works; i will try to connect all this with Vite

      • NateDavide 님이 이 게시물을 좋아합니다..