How to load packfile with remote assets and local assets in preload?

Phaser 3
1

Hi!

So I’m trying to migrate some of my phaser assets to a remote server (Azure Blob Storage), and automatically generate a filepack json:

which is all good and dandy, but loading it seems to be really irking me.

There seems to be 2 issues from my testing:

  1. setBaseUrl keeps overriding the base url for my local assets as well, and I can’t seem to find any way to only set the base url for the pack
  2. using the pack() function seems to keep giving me weird invalid json errors, but when I load the files one by one i.e. for (const { key, type, url } of files) scene.load[type](key, url);, then it loads perfectly fine
    e.g. weird errors
Uncaught SyntaxError: Unexpected token '�', "�PNG

"... is not valid JSON
    at JSON.parse (<anonymous>)
    at initialize.onProcess (index.js:63113:108)
    at initialize.nextFile (index.js:61013:160)
    at initialize.onLoad (index.js:60420:146)

VM10338:1 Uncaught SyntaxError: Unexpected token 'R', "RIFFP�LWA"... is not valid JSON
    at JSON.parse (<anonymous>)
    at initialize.onProcess (index.js:63113:108)
    at initialize.nextFile (index.js:61013:160)
    at initialize.onLoad (index.js:60420:146)

Would appreciate if anyone has also come across this problem and can give some advice, thanks!

2
  1. You can set baseURL or path in each pack section. Or you can change those values on this.load before and after load.pack().
  2. The SyntaxErrors come from loading a binary file (likely an image) where Phaser expected a JSON file. Usually this happens when you mix up URLs or type values. I think that recent Phaser versions should tell you in the console which files are causing the JSON parse error.
3
  1. For setting baseURL in the pack section, it seems that phaser doesn’t directly support importing and loading the pack section itself, only via a string path which isn’t feasible for me since phaser’s path resolution conflicts with nuxt’s. Trying to set before and after the load.pack() also affects loading the local assets in the preload function, tried many things like also trying to set it in listeners like in addFile/complete etc, but always seems to affect the local assets, might be because they get loaded in parallel?
  2. Yes, I thought that as well, so I tried loading them with the load.image/load.audio/load.font methods, but they all seem to work fine, and the filepack json is automatically generated by detecting the file content type retrieved from remote server (Azure Blob Storage), so I don’t think it is likely that the URL/type would be mixed up, maybe there is some issue with how I am trying to load the file via load.pack(files)?
4

You can give a pack object to load.pack() instead of a pack URL. Is that what you mean?

I was partly wrong about this. For the basic File files, path is applied when the file is added (producing file.url) and baseURL is applied when the file starts downloading (producing file.src). So you could change path in between adding but not baseURL. But for MultiFile it looks like the current baseURL and path are saved when the file is added and then read later.

If you give an http: or https: URL to Phaser it won’t modify it with baseURL or path.

I’m pretty sure you should see an error like

[Error] Failed to process file: json “megaset”

in the console with the problem file key, which may help. I can’t think of any other causes except

  • file type and url don’t match
  • the server is sending a binary file 200 ok when it shouldn’t

If there’s something wrong with files I’d expect an error parsing the pack or nothing to get added.

You can add to the start of preload():

this.load
    .on('addfile', (key, typ, loader, file) => {
        console.log('add', key, typ, file.url);
    })
    .on('load', (file) => {
        console.log('load', file.key, file.type, file.src);
    })
1 Like
5

Yes, but unfortunately the pack object itself doesn’t contain a baseURL option, only files apparently (at least from just checking the type definitions).

Super weird behaviour, but seems like if I put https: URL, it still uses the baseURL

image
image1881×462 44.1 KB

That’s a great idea!

image
image1920×1094 249 KB

image
image1920×1094 285 KB

I suspect that it must be trying to load the assets using “packfile” for whatever reason, and thinks it’s a json, when it’s supposed to be image/audio/font, but that would be really weird, the types are all specified properly, could it possibly be a bug in phaser? It could be that because I am directly loading all the files, and not via a URL, that this was undiscovered

6

Oh, I see. load.pack(files) adds multiple pack files, just like load.image(files) loads multiple image files. All the load methods work like that.

For pack contents you have to do load.pack('key', pack) like in load-file-pack-from-json.

I didn’t see load.pack() in the source or I would have recognized this earlier, sorry.

1 Like
7

Sweet, that solves issue 2, although there is a bug in the type definition it’s expecting only urls, so I should probably raise a bug in github about this.

image
image2144×595 110 KB

Now the main issue left is that there doesn’t seem to be a way to override the baseURL in the config itself, it all seems to be ignored, and using setBaseURL inevitably affects the local assets, not sure what else I can try

1 Like