SpinePlugin breaks generated images file path

[rez23]

Version

• Phaser Version: nodejs [email protected]
• Npm Version: '8.19.3',
• NodeJs Version: '19.2.0',
• TypeScript version: 5.2.2

• Operating system: Windows

• Browser: Chrome/Edge/Nodejs

The reference environment where I have encountered this issue is based on typescript and use nodejs versione of phaser 3

Description

The issue affects the phaser path system. when you set baseUrl and path properties of the loader via setBaseUrl() and setPath() functions and try to load spine's atlases/Jsons using phaser's Spine plugin (inside this repository).

When the loader tries to load the images obtained from the parsing of the atlases/jsons files provided to the loader through spine() function, the loader appends twice baseUrl to path and the result is an error in the GET stage when the loader tries to charge the Spine's multilayered images.

Example Test Code

You can reproduce (i suppose) the error with a code like:

#inside game scene
this.load.setBaseUrl('assets');

this.load
        .setPath('spine')
        .spine('MAIN.animations', 'spine.json', 'spine.atlas');

Supposing that inside my spine files I have linked a spine.png, this statement will result in the trying of the loader to load this image from "assets/assets/spine/spine.png" instead of "assets/spine/spine.png" that is what should happen.

Additional Information

I have circumscribed (and potentially fixed) this issue to this piece of code inside the onFileComplete() function present inside SpineFile,js in the spine plugin source code:

// This start at line 159 of SpineFile,js
var config = this.config;
var loader = this.loader;

var currentBaseURL = loader.baseURL;
var currentPath = loader.path;
var currentPrefix = loader.prefix;

var baseURL = GetFastValue(config, 'baseURL', this.baseURL);
var path = GetFastValue(config, 'path', file.src.match(/^.*\//))[0]; //Here is the problem
var prefix = GetFastValue(config, 'prefix', this.prefix);
var textureXhrSettings = GetFastValue(config, 'textureXhrSettings');

loader.setBaseURL(baseURL);
loader.setPath(path);
loader.setPrefix(prefix);

I've a possible solution on this fork

[spayton]

I've had this too, double paths on loading images from atlas. I think the bodge was to set the full path with setPath(), don't use setBaseUrl(), and don't have any path component in the .atlas/.json references.

[rez23]

I've had this too, double paths on loading images from atlas. I think the bodge was to set the full path with setPath(), don't use setBaseUrl(), and don't have any path component in the .atlas/.json references.

This may be a possible workaround, but the fact that spine breaks phaser's paths system is so frustrating... Anyway, my fork contains the solution that I have adopted in my project to issues this problem. Maybe I could push this as pull request when I have time.

[spayton]

I didn't look into exactly why the problem occured, didn't have time, but I think it was when processing the images from the atlas using phasers multifile.

If the fix is in theplugin, then it'll probably need applying to all plugins - the 3.8/4.1 internal & the official 4.1 external.

[rez23]

The fix that I have attempt affects only SpineFile.js. I don't think have any kind of relation with other plugins.

Anyway, for what I have seen right now, this issue isn't related with phaser path system itself.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.