How to use multi-atlas with import and Parcel

Phaser 3
1

I’m trying to use multi-atlas with js import and Parcel but it cannot find the required images, because multiatlas loader takes a path as an argument and Parcel export is all flat without any folders.

https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html#multiatlas__anchor

2

How are you loading the atlas?

3

import enemiesBronzeBigAtlas from "../../assets/atlas/enemies-bronze-big.json";
import enemiesBronzeBig from "../../assets/enemiesBig/*.png";

Then

this.load.multiatlas('enemies-bronze-big', enemiesBronzeBigAtlas);

4

I’d guess you have to use a plugin for that.

5

Well ye that might work, although I’m thinking that if we had an optional parameter on the function that allowed an array of .png files (the multiatlas images) it would work out of the box and very similar to how the JSONAtlas is registering.

So something along the lines of this.load.multiatlas('enemies', ['enemies1.png', 'enemies2.png']); etc
So then we could import those files and add their references to that array.

@rich What do you think?

6

Where do the files end up when Parcel imports them? (as the path argument is optional, it doesn’t have to be set). Or are they turned into some base64 monstrosity?

7

They end up in /dist folder with a weird-name.png but the jsonAtlas doesn’t care and reads them fine. As exported via TexturePacker (JSONAtlas, for Phaser v2).

8

That’s because JSONAtlas doesn’t work with multi-atlas files, the whole point of which is that a single json file maps frames to specifically named image files. Is there a sensible reason why Parcel would rename them on copy? There’s no obvious benefit imho.

9

I guess it renames it because of the browser cache. If the image changes, another file name would make the browser (and a possible cdn) reach out to its origin again. This makes sure, the users gets always the latest version of the image.

1 Like
10

What about my proposal to manually add the filenames (as Parcel will render them) via import variables inside an array.

Also I’m curious how this didn’t popup earlier.

11

Hi Everyone!

Just wondering if anyone has discovered a workaround for this?
I’d love to use Parcel but this one single issue makes it a showstopper (Looks like it’s some Parcel flakiness however https://github.com/parcel-bundler/parcel/issues/501. Phaser is doing everything correctly :slight_smile: )

12

You can try https://github.com/elwin013/parcel-plugin-static-files-copy.

1 Like