Phaser cannot add rectangles to groups

Question

This is a part of my code:

create_bounds: function(){

    this.bounds = game.add.group();

    this.left = new Phaser.Rectangle(0, 0, 20, game.world.height);
    this.right = new Phaser.Rectangle(game.world.width, 0, 20, game.world.height);

    this.bounds.add(this.left);
    //this.bounds.addAt(this.right);
    //var right =

    //this.bounds.add(left);

},

All I want to do is add a simple rectangle to a group which will then interact with the player in the update function. I cannot do that as when I load the page this appears:

phaser.js:32473 Uncaught TypeError: child.preUpdate is not a

at Phaser.Group.preUpdate (phaser.js:

at Phaser.World.Phaser.Group.preUpdate (phaser.js:

at Phaser.Stage.preUpdate (phaser.js:30486)

at Phaser.Game.updateLogic (phaser.js:

at Phaser.Game.update (phaser.js:

at Phaser.RequestAnimationFrame.updateRAF (phaser.js:

at _onLoop (phaser.js:63015)

This only happens when I try to add the rectangle to the group, not when creating it. How do I fix this?

Answer 1

Phaser Groups are DisplayObjectContainers, which means they are only capable of managing objects that inherit from DisplayObject, such as Sprites. Rectangles are geometry objects, they're basically just pure math with a few helper methods. They have no display properties, which is why you cannot add them to the display list.

To do what you require you'll need to either render the Rectangles to a Graphics or BitmapData object, or use a different texture based approach.