Multiatlas JSON errors

[Tixxi]

Hi all. I am basically a noob here and could really use some help on this.

• I created a multiatlas in Texture Packer.
• I followed the tutorial, and there is no rotation involved.
• Both the json file and the image files are located inside my assets folder.
• As instructed (in TP tutorial), I used this format to load it in my preload function:

• this.load.multiatlas('bb3', 'assets/bleepBacks.json', "assets")

  When I do this, I get the error...

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

If I take off the "assets" portion as I have seen done in a different forum, like so:

this.load.multiatlas('bb3', 'assets/bleepBacks.json')

Then, I do not get that error, but it can never find any of my files when I attempt to create them with the following line of code in my create function.

this.add.sprite(400, 300, 'bb3', 'spaceBG2.png');

I have had no issues with loading separate single atlas files and finding the images. It is just with the multiatlas. Any help would be great. I have attached the json file in case there is some error there, but it was made with TexturePacker, so I am assuming the error is with my code somewhere.

 

Thanks.

bleepBacks.json

[rich]

Try this:

this.load.setPath('assets/');
this.load.multiatlas('bb3', 'bleepBacks.json');

And make sure you're using Phaser 3.7.0 or above.

[Tixxi]

That worked!!! It still didn't find my image at first, but then I put in the latest version of phaser.min.js, and it worked liked a charm. I must have copied an older version before.

 

Thanks so much! You rock!!!!

[twistedsage]

This did not work for me in latest Phaser, so I debugged through the code. Turns out I had to add prefix and suffix to config. (And no I didn't read the documentation )

My frames where called 'Idle (0).png" and so forth and when it checks for the texture name, it just goes from start to end as the name. So you have to add prefix and suffix too.

Like so:

 this.anims.create({ key: 'girl_idle', frames: this.anims.generateFrameNames('girl', { start: 0, end: 16, prefix:'Idle (', suffix: ').png' }), repeat: -1 });