• Runtimes

  • Spine inline resources( json, atlas and png)

    английский

  • PPalindrome

    • Сообщение #1
    • Это сообщение на английский

    Hi, I am trying to integrate spine in my phaser project which is a playable ad. I am using spine runtime. For playables we need to convert assets to base64.
    So what I have done so far is decode my json and atlas in my project and added png to base64. Then I added my json in phaser cache and I can easily retrieve it from the cache. But I am stuck with atlas. I need to skip load.spine calls. When I add spine object by using this.spine.add, It works with the cached json but it's not accepting atlas as base64.
    Has anyone worked with spine for playable ads in phaser. Please help me out.

    Related Discussions
    ...

    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:

    1. Decode and Cache JSON and Atlas Data: Ensure your JSON and atlas data are decoded and stored in Phaser's cache.

    2. Load Base64 PNG Images: Use Phaser's texture manager to add the base64 encoded images.

    3. 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:

    1. Preload Function:

      • Add the JSON and atlas data to Phaser's cache.
      • Add the base64 encoded image to Phaser's texture manager.

    2. 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.