Atlas Error: cannot read property of null?

[RyanTheBoy]

Hello folks! I am attempting to animate a small, running boy for my game using a texture atlas. I found this topic and it appears as though I have everything correct syntactically but I get the error...

 

Uncaught TypeError: Cannot read property 'sourceSizeW' of null

 

...In the console when I try to simply display a sprite from the atlas I am loading. Here is the code that is attempting to load/display the atlas sprite.

 

Preloader.js

STATES.Preloader = function(game) {this.preloadBar = null;}; STATES.Preloader.prototype = {preload: function() {this.preloadBar = this.game.add.sprite(this.game.world.centerX - 100, this.game.world.centerY, 'preloadBar');this.load.setPreloadSprite(this.preloadBar); this.load.spritesheet('buttons', 'assets/buttonSheet.png', 360, 50);this.load.atlas('runner', 'assets/sprites.png', 'assets/sprites.json');}, update: function() {this.game.state.start('MainMenu');}};

MainMenu.js (This won't be where the sprite ends up ultimately, but I am simply putting it here for testing purposes.)

STATES.MainMenu = function(game) {this.newGameButton = null;this.testSprite = null;}; STATES.MainMenu.prototype = {create: function() {this.newGameButton = this.add.button(100, 100, 'buttons', this.startGame, this, 1, 0, 1); this.testSprite = this.add.sprite(100, 200, 'runner');// this.testSprite.frameName = 'head.png';}, update: function() {// Menu effects go here.}, startGame: function() {this.game.state.start('Game');}};

Also, here is the JSON file created using ShoeBox

 

sprites.json

{"frames": {"body.png": {"frame": {"x":0, "y":34, "w":15, "h":16},"spriteSourceSize": {"x":1,"y":1,"w":17,"h":18},"sourceSize": {"w":17,"h":18}},"head.png": {"frame": {"x":0, "y":0, "w":34, "h":33},"spriteSourceSize": {"x":1,"y":1,"w":36,"h":35},"sourceSize": {"w":36,"h":35}},"leftArm.png": {"frame": {"x":16, "y":34, "w":14, "h":7},"spriteSourceSize": {"x":1,"y":1,"w":16,"h":9},"sourceSize": {"w":16,"h":9}},"leftLeg.png": {"frame": {"x":35, "y":13, "w":7, "h":13},"spriteSourceSize": {"x":1,"y":1,"w":9,"h":15},"sourceSize": {"w":9,"h":15}},"rightArm.png": {"frame": {"x":31, "y":34, "w":13, "h":12},"spriteSourceSize": {"x":1,"y":1,"w":15,"h":14},"sourceSize": {"w":15,"h":14}},"rightLeg.png": {"frame": {"x":35, "y":0, "w":10, "h":12},"spriteSourceSize": {"x":1,"y":1,"w":12,"h":14},"sourceSize": {"w":12,"h":14}} },"meta": {"image": "sprites.png","size": {"w": 46, "h": 51},"scale": "1"}}

Any thoughts as to what exactly is going wrong here? Much appreciated! 

 

EDIT: I have also recently updated to Phaser 1.1.6 and the error seems to cause the loading screen to hang despite the following error context...

	c.Spritephaser.min.js:7	c.Group.createphaser.min.js:5	c.GameObjectFactory.spritephaser.min.js:7	STATES.MainMenu.createMainMenu.js:10	c.StateManager.loadCompletephaser.min.js:4	c.Game.loadCompletephaser.min.js:5	c.StateManager.startphaser.min.js:4	STATES.Preloader.updatePreloader.js:15	c.StateManager.updatephaser.min.js:4	c.Game.updatephaser.min.js:5	c.RequestAnimationFrame.updateRAFphaser.min.js:8	window.requestAnimationFrame._onLoopphaser.min.js:8

[RyanTheBoy]

Fixed it simply by changing...

 

this.load.atlas('runner', 'assets/sprites.png', 'assets/sprites.json');

 

...to...

 

this.load.atlasJSONHash('runner', 'assets/sprites.png', 'assets/sprites.json');

 

I love simple fixes. 

[rich]

Hah yeah, the default is a JSON Array, but you've got a Hash there (as you've worked out!).