Question: gameObject is null with TexturePacker and PhysicsEditor

[rscott442]

Hi All,

The body.gameObject is null during collisionstart event when using TexturePacker and PhysicsEditor json files

Cannot read property 'setTint' of null

The setTint call works (and gameObject is valid) when I load the two images directly like this.load.image('ship', 'images/ship.png');

Do I need to modify this code in some way so I can use TexturePacker and PhysicsEditor?

var config = {
	type: Phaser.AUTO,
	width: 800,
	height: 600,
	parent: 'phaser-game',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
			gravity: { y: 0 }
		}
	},
	scene: {
		preload: preload,
		create: create
	}
};

var game = new Phaser.Game(config);

var ship;
var ball;

function preload() {
	// Load sprite sheet generated with TexturePacker
	this.load.atlas('sheet', 'images/sprite-sheet.png', 'images/sprite-sheet.json');

	// Load body shapes from JSON file generated using PhysicsEditor
	this.load.json('shapes', 'images/sprite-shapes.json');
}

function create() {
	this.matter.world.setBounds(0, 0, game.config.width, game.config.height, 0, false, false, false, false);
	var shapes = this.cache.json.get('shapes');

	ship = this.matter.add.sprite(0, 300, 'sheet', 'ship', { shape: shapes.ship });
	ball = this.matter.add.sprite(600, 300, 'sheet', 'ball', { shape: shapes.ball });

	ship.setVelocityX(10);

	this.matter.world.on('collisionstart', function (event) {
		console.log("collisionstart");
		console.log(event.pairs.length);

		console.log(event.pairs[0].bodyA);
		console.log(event.pairs[0].bodyB);

		event.pairs[0].bodyA.gameObject.setTint(0xff0000); // gameObject is null here (Cannot read property 'setTint' of null)
		event.pairs[0].bodyB.gameObject.setTint(0x00ff00); // gameObject is null here (Cannot read property 'setTint' of null)
	});
}

 

 

sprite-shapes.json

sprite-sheet.json

[rich]

BodyA and B are passed to the collision event handler automatically, so you can just do this:

    this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {

        bodyA.gameObject.setTint(0xff0000);
        bodyB.gameObject.setTint(0x00ff00);

    });

 

[rscott442]

Thanks rich! But using that method I still get "Uncaught TypeError: bodyA.gameObject is null".

this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {
	bodyA.gameObject.setTint(0xff0000); //Uncaught TypeError: bodyA.gameObject is null
	bodyB.gameObject.setTint(0x00ff00);
});

Do you know if Phaser or Matter.js is responsible for defining the gameObject? I am still learning how everything fits together with body and gameObject.

I am using Phaser v3.11 and both Chrome and Firefox has the same issue.