Atlas JSON Error

Phaser 3
1

Hello!

I was following a tutorial which created an atlas from a Sprite Sheet. However, when I follow the steps, I get an error. I have the problem, even when I run the complete project example provided. I will also provide the JSON file below, however, I doubt that it is actually a problem with the JSON formatting, but rather something I am doing or missing. As for what I have already tried, I have converted the format from ANSI to UTF-8 and vice-versa, have moved the JSON file to various locations, tried on different browsers and have checked that I am running the most recent version. Any help you can provide would be greatly appreciated! Thanks.

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

File:

{"frames": [
{
	"filename": "penguin_die01.png",
	"frame": {"x":0,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die02.png",
	"frame": {"x":72,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die03.png",
	"frame": {"x":144,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die04.png",
	"frame": {"x":216,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_hurt.png",
	"frame": {"x":288,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump01.png",
	"frame": {"x":360,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump02.png",
	"frame": {"x":432,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump03.png",
	"frame": {"x":504,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
}],
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "penguin.png",
	"format": "RGBA8888",
	"size": {"w":576,"h":64},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:d2c139e3b5aad160701f37ff54893078:5812e8cd6bf7c928dd5f9d43a8f768b6:6811a9a90bad8562d7be890a479a72ac$"
}
2

Check your browser’s dev tools network tab. My guess is your path is wrong, so it’s trying to parse a 404 HTML page.

3

Not seeing any 404s in the network tab. This is what it looks like.

image
image3775×2045 295 KB

4

Some dev servers (parcel) send 200 ok instead of 404 not found. Look at the Response tab to see what it’s sending. But most likely http://localhost:8000/assets/penguin.json is missing.

5

Okay, I have actually identified the issue, but I have no idea how to fix it. For reference, I am using this template. When I moved the assets into the dist folder, it worked. How do I set it so that it actually looks in the public folder for static assets? Is it something I do in the code, or is it something I do when I run the project?

6

It’s supposed to use the public folder automatically. But you may need to stop the server/watcher and then start it again (npm run start) if you just added things to public.

7

I did that, and I am still having the issue. I think it is something in the server settings file.

8
9

This is actually the problem! Thank you so much for your help, though it doesn’t seem like there is a solution beyond moving the assets into the dist folder. this Parcel-Bundler seems to be a real piece of work. Thanks again.