Serving Files and the Phaser 3 loader

[zanzabar]

I am new and getting stuck on something that seems quite small and silly.

It has to do with the phaser loader and the file server I'm using (parcel-bundler).

    preload () {
        this.load.image('overworld', 'assets/overworld.png');
        // this.load.json('tilemap', 'assets/level1.json');
        this.load.tilemapTiledJSON('level1', 'assets/level1.json');
    }

    create () {
        const map = this.add.tilemap('level1');
        const tileset = map.addTilesetImage("level1", "overworld");

        const floorLayer = map.createStaticLayer("ground", tileset, 0, 0);
        const wallLayer = map.createStaticLayer("deco", tileset, 0, 0)
    }

It would seem when my game gets to this scene it will try to load the JSON file giving this error: `Uncaught SyntaxError: Unexpected token < in JSON at position 0`

Looking at the request, parcel is just sending back the default index.html document. OK, well, Parcel doesn't want to send JSON files and doesn't have any helpful information on this topic other than mention of codesplitting which makes me think most people would just include a JSON file locally for when the babel compiling or whatnot happens.

So, assuming I can't get it to send over a request: how can I get this JSON file into the phaser 'loaded zone' (that is definitely a word I just invented)?

I could theoretically just require the json file like this: 

const level1 = require ('../../assets/level1.json')

but then how would I load it into the loader? Isn't that kind of defeating the purpose anyway? Should I just maybe give up on parcel-bundler and build a happy little express server?

[mattstyles]

I'm really surprised, but I've just been reading through some parcel issues and the actual response seems to be to fire up a separate static file server. The argument given (in one issue, with a specific use-case) is that this matches what you'd do in prod.

I actually disagree. I want to bundle things up, with the index.html that parcel dictates you have (no dynamically generating it), and do exactly as you have in code. With a separate dev server running you'd have to change urls based on whether you're in dev or prod mode which kinda sucks.

Which kinda leaves you (in dev anyway) with two options:

* Import the json as you suggest, which bundles the assets and may not be what you want

* Set up static file serving (which is trivial) but also have to handle asset paths based on dev vs prod builds, which is fairly normal for non-trivial apps, but sucks

Ooo, I thought of a third, but its not quite zero-config:

* Use parcel as middleware for an express app where you also serve the statics

This would work well and isn't much above zero-config, most importantly it means you don't change your source code for dev vs prod builds.

const Bundler = require('parcel-bundler');
const app = require('express')();

const file = 'index.html'; // Pass an absolute path to the entrypoint here
const options = {}; // See options section of api docs, for the possibilities

// Initialize a new bundler using a file and options
const bundler = new Bundler(file, options);

// Let express use the bundler middleware, this will let Parcel handle every request over your express server
app.use(bundler.middleware());

// Listen on port 8080
app.listen(8080);

(ripped from parcel docs, you'd have to add the static serving bit but thats trivial. https://parceljs.org/api.html)

[mattstyles]

I wouldn't expect `.middleware()` to do too much either i.e. it shouldn't be super-problematic if you used a different (JS) serving solution like koa or hapi etc etc etc

[zanzabar]

Awesome yeah it's good to hear that my thinking wasn't too insane lol

One thing I've been trying to figure out is how one would load an imported file into the phaser loader:

something like 

const level1 = require('./assets/level1.json');

// ...

this.load.image('overworld', 'assets/overworld.png')
this.load.tilemapTiledJSON('level1', level1); 

// does not seem to work, as the tilemap errors below:

        const map = this.add.tilemap('level1');
        const tileset = map.addTilesetImage("level1", "overworld");

        const floorLayer = map.createStaticLayer("ground", tileset, 0, 0);
        const wallLayer = map.createStaticLayer("deco", tileset, 0, 0)

phaser.js:112166 TilemapParser.parseTiledJSON - Layer compression is unsupported, skipping layer 'ground'
ParseTileLayers @ phaser.js:112166
phaser.js:112166 TilemapParser.parseTiledJSON - Layer compression is unsupported, skipping layer 'deco'
ParseTileLayers @ phaser.js:112166
phaser.js:111897 Phaser can't load external tilesets. Use the Embed Tileset button and then export the map again.

phaser.js:53070 Invalid Tileset Image: overworld
addTilesetImage @ phaser.js:53070
phaser.js:53479 Invalid Tilemap Layer ID: ground
createStaticLayer @ phaser.js:53479
phaser.js:53479 Invalid Tilemap Layer ID: deco

So maybe I am not exporting the JSON file correctly or using incorrect names but it seems to me like it isn't loading in; is there another method in particular for loading a tilemap from a local object rather than JSON?