# Loading sprites with multiatlas gives json parsing error

**URL:** <https://phaser.discourse.group/t/loading-sprites-with-multiatlas-gives-json-parsing-error/723>\
**Category:** Phaser 3\
**Created:** [January 11, 2019, 9:31pm UTC](https://phaser.discourse.group/t/loading-sprites-with-multiatlas-gives-json-parsing-error/723 "2019-01-11T21:31:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![flysi3000](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/flysi3000/32/491_2.png) [@flysi3000](https://phaser.discourse.group/u/flysi3000)\
**Post date:** [January 11, 2019, 9:31pm UTC](https://phaser.discourse.group/t/loading-sprites-with-multiatlas-gives-json-parsing-error/723/1 "2019-01-11T21:31:21Z")

</div>

Hi there! I’m trying to follow along with a [tutorial](https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3) 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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [January 12, 2019, 12:04am UTC](https://phaser.discourse.group/t/loading-sprites-with-multiatlas-gives-json-parsing-error/723/2 "2019-01-12T00:04:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![flysi3000](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/flysi3000/32/491_2.png) [@flysi3000](https://phaser.discourse.group/u/flysi3000)\
**Post date:** [January 14, 2019, 1:54pm UTC](https://phaser.discourse.group/t/loading-sprites-with-multiatlas-gives-json-parsing-error/723/3 "2019-01-14T13:54:04Z")

</div>

It was generated using Texture Packer:

```json
{
	"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.