Loading spine animation through webpack asset manifest

Phaser 3
1

Does anyone have a complete example indicating how to load a Spine animation (atlas, json and png) through the AssetManifest file using for automatic bundling with Webpack?

Normal spine loading works as follows:

this.load.spine('logo', 'animations/splashscreen/splashscreen.json', [ 'animations/splashscreen/splashscreen.atlas' ], true);

Need to do this though asset manifest file.

Thanks!

2

Did you ever solve this?

3

Scene:

import { Scene } from "phaser"
import atlas from "./Spined/Zombie/zombie1.atlas"
import json from "./Spined/Zombie/zombie1.json"
import png from "./Spined/Zombie/zombie1.png"

// Put the webpack generated hashed filename of the "png" into the atlas.
console.log({ png })

export default class ZombieWalkingScene extends Scene {
  preload() {
    let scene = this
    scene.load.image("_ZOMBIE1", png)
    scene.load.spine("ZOMBIE1", json, atlas)
  }
  create() {
    let scene = this
    let { height, width } = scene.game.config
    scene.ZOMBIE1 = scene.add.spine(width/2, height/2, "ZOMBIE1", "WALK", true)
  }
}

Webpack always hashes the “png” file with the same file name - so as long as you don’t edit the file itself you can hardcode the webpack-build-filename into the atlas file. Leave the first line blank! Example:

zombie1.atlas:


8sd9233s3wihwr732g.png
size: 1024,512
format: RGBA8888
filter: Linear,Linear
repeat: none
// etc

Hope that helps, Tim-From-The-Past!