Loading sprites with multiatlas gives json parsing error

flysi3000 · January 11, 2019, 9:31pm

Hi there! I’m trying to follow along with a tutorial from TexturePacker on creating sprites for Phaser. The tutorial says to load my texture atlas like so: this.load.multiatlas('cityscene', 'assets/cityscene.json', 'assets');

But this gives me the dreaded json parse error:

VM1264:1 Uncaught SyntaxError: Unexpected token � in JSON at position 0
    at JSON.parse (<anonymous>)
    at JSONFile.onProcess (project.bundle.js:11352)
    at LoaderPlugin.nextFile (project.bundle.js:169439)
    at JSONFile.onLoad (project.bundle.js:4812)

Using this.load.atlas works, though. Basically, my sprite sheet has some static image elements, as well as an animation sequence within it, and I’m trying to figure out how to implement that animation sequence.

Any suggestions? Thanks!

EDIT: It works as described in the tutorial when I use atlas intead of multiatlas; I’m guessing because I didn’t have enough sprites for a true multi-pack sprite sheet? Not really sure.

rich · January 12, 2019, 12:04am

Impossible to tell without seeing the atlas json I’m afraid.

flysi3000 · January 14, 2019, 1:54pm

It was generated using Texture Packer:

{
	"textures": [
		{
			"image": "rocket.png",
			"format": "RGBA8888",
			"size": {
				"w": 586,
				"h": 1863
			},
			"scale": 1,
			"frames": [
				{
					"filename": "stars_bg.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 600,
						"h": 1480
					},
					"spriteSourceSize": {
						"x": 8,
						"y": 0,
						"w": 584,
						"h": 1461
					},
					"frame": {
						"x": 1,
						"y": 1,
						"w": 584,
						"h": 1461
					},
					"anchor": {
						"x": 0,
						"y": 0
					}
				},
				{
					"filename": "rocket_body.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 88,
						"h": 236
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 88,
						"h": 236
					},
					"frame": {
						"x": 1,
						"y": 1464,
						"w": 88,
						"h": 236
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-0.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 117,
						"h": 79
					},
					"frame": {
						"x": 1,
						"y": 1702,
						"w": 117,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "rocket_body_mask.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 88,
						"h": 236
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 88,
						"h": 236
					},
					"frame": {
						"x": 91,
						"y": 1464,
						"w": 88,
						"h": 236
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-1.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 1,
						"y": 0,
						"w": 112,
						"h": 79
					},
					"frame": {
						"x": 1,
						"y": 1783,
						"w": 112,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-18.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 4,
						"y": 0,
						"w": 108,
						"h": 79
					},
					"frame": {
						"x": 115,
						"y": 1783,
						"w": 108,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-2.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 4,
						"y": 0,
						"w": 108,
						"h": 79
					},
					"frame": {
						"x": 120,
						"y": 1702,
						"w": 108,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-17.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 6,
						"y": 0,
						"w": 104,
						"h": 79
					},
					"frame": {
						"x": 225,
						"y": 1783,
						"w": 104,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-3.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 6,
						"y": 0,
						"w": 103,
						"h": 79
					},
					"frame": {
						"x": 331,
						"y": 1464,
						"w": 103,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-16.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 8,
						"y": 0,
						"w": 99,
						"h": 79
					},
					"frame": {
						"x": 230,
						"y": 1464,
						"w": 99,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "window.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 42,
						"h": 42
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 42,
						"h": 42
					},
					"frame": {
						"x": 181,
						"y": 1464,
						"w": 42,
						"h": 42
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "star_glow.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 30,
						"h": 30
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 30,
						"h": 30
					},
					"frame": {
						"x": 181,
						"y": 1508,
						"w": 30,
						"h": 30
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "particle.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 14,
						"h": 14
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 14,
						"h": 14
					},
					"frame": {
						"x": 213,
						"y": 1508,
						"w": 14,
						"h": 14
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "star.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 18,
						"h": 18
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 18,
						"h": 18
					},
					"frame": {
						"x": 181,
						"y": 1540,
						"w": 18,
						"h": 18
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-4.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 9,
						"y": 0,
						"w": 98,
						"h": 79
					},
					"frame": {
						"x": 436,
						"y": 1464,
						"w": 98,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-15.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 11,
						"y": 0,
						"w": 93,
						"h": 79
					},
					"frame": {
						"x": 181,
						"y": 1560,
						"w": 93,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "planet_saturn.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 92,
						"h": 58
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 92,
						"h": 58
					},
					"frame": {
						"x": 181,
						"y": 1641,
						"w": 92,
						"h": 58
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-5.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 12,
						"y": 0,
						"w": 92,
						"h": 79
					},
					"frame": {
						"x": 230,
						"y": 1701,
						"w": 92,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "planet_mars.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 52,
						"h": 52
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 52,
						"h": 52
					},
					"frame": {
						"x": 275,
						"y": 1641,
						"w": 52,
						"h": 52
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-14.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 14,
						"y": 0,
						"w": 87,
						"h": 79
					},
					"frame": {
						"x": 324,
						"y": 1695,
						"w": 87,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-6.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 14,
						"y": 0,
						"w": 87,
						"h": 79
					},
					"frame": {
						"x": 331,
						"y": 1776,
						"w": 87,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-13.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 16,
						"y": 0,
						"w": 83,
						"h": 79
					},
					"frame": {
						"x": 276,
						"y": 1545,
						"w": 83,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-7.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 16,
						"y": 0,
						"w": 83,
						"h": 79
					},
					"frame": {
						"x": 361,
						"y": 1545,
						"w": 83,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-12.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 18,
						"y": 0,
						"w": 79,
						"h": 79
					},
					"frame": {
						"x": 446,
						"y": 1545,
						"w": 79,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "flame.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 58,
						"h": 70
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 58,
						"h": 70
					},
					"frame": {
						"x": 527,
						"y": 1545,
						"w": 58,
						"h": 70
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-8.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 19,
						"y": 0,
						"w": 77,
						"h": 79
					},
					"frame": {
						"x": 413,
						"y": 1626,
						"w": 77,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-11.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 21,
						"y": 0,
						"w": 73,
						"h": 79
					},
					"frame": {
						"x": 492,
						"y": 1626,
						"w": 73,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-9.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 22,
						"y": 0,
						"w": 71,
						"h": 79
					},
					"frame": {
						"x": 420,
						"y": 1707,
						"w": 71,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "wing_sprite-10.png",
					"rotated": false,
					"trimmed": true,
					"sourceSize": {
						"w": 118,
						"h": 79
					},
					"spriteSourceSize": {
						"x": 23,
						"y": 0,
						"w": 69,
						"h": 79
					},
					"frame": {
						"x": 493,
						"y": 1707,
						"w": 69,
						"h": 79
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				}
			]
		}
	],
	"meta": {
		"app": "https://www.codeandweb.com/texturepacker",
		"version": "3.0",
		"smartupdate": "$TexturePacker:SmartUpdate:5b2b7ba6209f7a4cc4fe1dee5aea2d8f:3d469052fddc9031c1a0b2a6715c2d63:d34c1cc7703551cadef84e84b2435060$"
	}
}

As I mention, I got it working using atlas; still curious as to why multiatlas wouldn’t work, though.

Topic		Replies	Views
Atlas JSON Error Phaser 3	8	1182	March 11, 2021
Webpack 4 & Multiatlas? Phaser 3	2	931	December 22, 2019
Atlas vs. Multi-Atlas Phaser 3	1	963	January 17, 2020
Issue with this.load.atlas? Phaser 3	9	2876	September 15, 2019
How to do Animated Particles with multiatlas? Phaser 3	2	1587	June 22, 2019

Loading sprites with multiatlas gives json parsing error

Related Topics