phaser-tiled-json-external-loader is a Phaser loader that loads Tiled tilemaps exported as JSON. Unlike the built-in loader, external tilemaps are supported.
- Phaser 3.16.3 or higher (I think? I haven't tested much.)
- Tiled 1.1.5 or higher (Again, this isn't terribly well-tested.)
Only JSON-formatted tilesets are supported. TMX and other formats are not supported. Make sure to export your tilesets from Tiled as JSON files.
Tilesets paths are saved by Tiled as relative to the tilemap file, and it's assumed that they are similarly relative to each other on your web server.
What this means is that your webpage should serve the tilemap and tileset files at the same paths relative to each other as when you're editing them. For example, let's say your tilemap is at /foo/tilemap.json and uses a tileset at /foo/bar/tileset.json. If your tilemap is loaded on the server at http://example.com/tilemap.json, then the tileset must be served at http://example.com/bar/tileset.json.
-
Install the library:
npm install --save phaser-tiled-json-external-loader
-
Import and register the loader before initializing your game:
import registerTiledJSONExternalLoader from 'phaser-tiled-json-external-loader'; registerTiledJSONExternalLoader(Phaser);
-
Download the JS bundle from the Releases tab.
-
Load the JS bundle in your HTML file:
<script src="phaser-tiled-json-external-loader.js"></script>
Use the tilemapTiledJSONExternal loader to load your tilemap's JSON:
this.load.tilemapTiledJSONExternal('tilemap', 'tilemap.json');Assuming the paths are set up correctly as described above, you should see your tilemap JSON as well as the tilesets being loaded in the network tab on your browser's devtools.
Originally adapted from the Phaser built-in MutliAtlasFile loader. phaser-tiled-json-external-loader is licensed under the MIT license. See LICENSE for more info.