To integrate Spine with Phaser for a playable ad and use base64 encoded assets, you need to handle the loading of the atlas and its associated images manually. Here’s a step-by-step approach to achieve this:
Decode and Cache JSON and Atlas Data: Ensure your JSON and atlas data are decoded and stored in Phaser's cache.
Load Base64 PNG Images: Use Phaser's texture manager to add the base64 encoded images.
Create Custom AttachmentLoader: Implement a custom AttachmentLoader to handle the base64 images.
Here’s an example of how you can achieve this:
function preload() {
// Assuming you have your JSON and atlas data in variables `skeletonJson` and `atlasText`
this.cache.json.add('skeleton-data', skeletonJson);
this.cache.text.add('skeleton-atlas', atlasText);
// Add base64 image to Phaser's texture manager
this.textures.addBase64('skeleton-image', base64ImageData);
}
function create() {
// Retrieve cached JSON and atlas data
const skeletonData = this.cache.json.get('skeleton-data');
const atlasText = this.cache.text.get('skeleton-atlas');
// Create a custom attachment loader
const atlas = new spine.TextureAtlas(atlasText, (path) => {
return this.textures.get('skeleton-image').getSourceImage();
});
const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
const skeletonJson = new spine.SkeletonJson(atlasLoader);
const skeletonData = skeletonJson.readSkeletonData(skeletonData);
// Create the Spine object
const spineObject = this.add.spine(400, 300, skeletonData, 'animation', true);
}
Explanation:
Preload Function:
- Add the JSON and atlas data to Phaser's cache.
- Add the base64 encoded image to Phaser's texture manager.
Create Function:
- Retrieve the cached JSON and atlas data.
- Create a custom
TextureAtlas using the base64 image.
- Use
AtlasAttachmentLoader to load attachments from the atlas.
- Create a
SkeletonJson object and read the skeleton data.
- Add the Spine object to the scene.
This approach ensures that you can use base64 encoded assets for your playable ad without relying on the load.spine calls.
