Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Cannot add existing groups


Recommended Posts

When you create the Group it will automatically add itself to the world. The second parameter to Group (which you're not using in the code above) specifies the parent object should you wish it to not be the World.


I would still suggest you use game.add.group() rather than creating it yourself, but it won't matter if you prefer not to, just keeps it a little cleaner imho.

Link to comment
Share on other sites

I would still suggest you use game.add.group() rather than creating it yourself, but it won't matter if you prefer not to, just keeps it a little cleaner imho.


Hi, thanks for the reply!


I'm interested in adding the group afterwards because I wanted a custom group class inheriting from Phaser.Group. The reason is that I had some sprites that were related (in this case, a HUD), and I wanted to separate the logic of creation of these sprites into the group's custom class, plus a bit of other logic related to these sprites.


Is there another way of doing this? I'm new to Phaser and a bit lost :) Thanks!

Link to comment
Share on other sites

Here is how I'd do it:

//  Here is a custom group with a property 'key'//  This isn't required, it's just an example of a custom group level property. Only 'game' is required.MonsterGroup = function (game, key) {    Phaser.Group.call(this, game);    this.key = key;};MonsterGroup.prototype = Object.create(Phaser.Group.prototype);MonsterGroup.prototype.constructor = MonsterGroup;/** * Generate some monsters on request, all spaced out evenly */MonsterGroup.prototype.make = function(qty, x, y) {    for (var i = 0; i < qty; i++)    {        this.create(x, y, this.key);        x += 64;    }}//  Boilerplate code belowvar game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.image('bunny', 'assets/sprites/bunny.png');    game.load.image('ball', 'assets/sprites/shinyball.png');}function create() {    var monsters = new MonsterGroup(game, 'bunny');    var balls = new MonsterGroup(game, 'ball');    monsters.make(6, 100, 100);    balls.make(10, 64, 500);}
Link to comment
Share on other sites

  • 6 months later...

Hey Rich,
sorry for bringing the thread up again but I have a similar issue.
I'd like to make a custom Group class that is prepared when instantiated through the "new" statement and it's added to the world afterwards.

Now, if you say that a group is added immediatly when created I have a problem in editing my game structure in order to work with this behaviour.

Since I come from a long experience in ActionScript3 programming I'd like to structure my Sprites classes in a similar way to AS3.

Since now I've tried like below.

Sprite Class Example:

Alien = function (game,key){    Phaser.Sprite.call(this,game,0,0,key);    this.scale.set(.5,.5);    this.animations.add('move',null,5,true);};Alien.ASSETS = [    {type:'spritesheet',key:'alien1',src:'./assets/sprites/alien_1.png',sheetWidth:74,sheetHeight:64},    {type:'spritesheet',key:'alien2',src:'./assets/sprites/alien_2.png',sheetWidth:98,sheetHeight:64},    {type:'spritesheet',key:'alien3',src:'./assets/sprites/alien_3.png',sheetWidth:106,sheetHeight:64}];Alien.prototype = Object.create(Phaser.Sprite.prototype);Alien.prototype.constructor = Alien;Alien.prototype.update = function (){    this.animations.play('move');};

Calling this sprite:

this.alien1 = new Alien(this.game,'alien1');this.alien1.x = 0;this.alien1.y = 0;this.add.existing(this.alien1); //sort of this.addChild()this.alien2 = new Alien(this.game,'alien2');this.alien2.x = this.alien1.x + this.alien1.width;this.alien2.y = 0;this.add.existing(this.alien2);this.alien3 = new Alien(this.game,'alien3');this.alien3.x = this.alien2.x + this.alien2.width;this.alien3.y = 0;this.add.existing(this.alien3);

So, when inheriting Group to create an AlienGroup class I was trying to do so:

AlienGroup = function (game,formation){    Phaser.Group.call(this,game);    var row = [];    var alien = null;    for(var r in AlienGroup.FORMATIONS[formation])    {        row = AlienGroup.FORMATIONS[formation][r];        for (var f in row)        {            alien = new Alien(this.game,'alien'+row[f]);            alien.x = parseInt(r,10) * Alien.DISTANCE_X;            alien.y = parseInt(f,10) * Alien.DISTANCE_Y;            this.add(alien);        }    }};AlienGroup.prototype = Object.create(Phaser.Group.prototype);AlienGroup.prototype.constructor = AlienGroup;AlienGroup.FORMATIONS = {    'easy' : [        [1,1,1,1,1],        [1,1,1,1,1],        [3,3,3,3,3],        [3,3,3,3,3],        [2,2,2,2,2],        [2,2,2,2,2],    ]};AlienGroup.DISTANCE_X = 5;AlienGroup.DISTANCE_Y = 5;

After that what I'd like to do is 

var alienGroup = new AlienGroup(this.game,'easy')this.add.existingGroud(alienGroup); //this non-existing mighty function should add the Aliens and the AlienGroup to the world

I hope I've been clear on what I'd like to achieve.
Can you give me some advice?
Thank you!

Link to comment
Share on other sites

If I understand what you want to achieve, the problem lies in the parameters you pass to your group's constructor. You are passing a reference to this.game, which is being set as the group's parent in the constructor. According to the documentation, you can pass null to the parent parameter to prevent the group from being added to world. When you do that, you can do this.add.existing(group).

var alienGroup = new AlienGroup(null, 'easy')this.add.existing(alienGroup);
Link to comment
Share on other sites

When you add a sprite, it doesn't get added to the game world, so calling this.game.add explicitly makes sense.


When you add a group, it does get added to the game world by default, so you can't call this.game.add explicitly.


However If you don't want to add the group to the game.world but instead to another group you say that in the Phaser.Group constructor.


In your case in the AlienGroup constructor:

// AlienGroup is added to 'parent' instead of default game.worldAlienGroup = function (game, parent, formation){Phaser.Group.call(this,game, parent);

and use it like this:

// parent is the parent group leave it 'undefined' if you want to add to the game.worldvar alienGroup = new AlienGroup(this.game, parent, 'easy')// no need to add group explicitly// this.add.existingGroud(alienGroup);

I explained this in another post here: http://www.html5gamedevs.com/topic/7655-extended-sprite-or-sprites-into-a-group/?p=45781

Link to comment
Share on other sites

Ok I get everything you said, but I know you're going to kill me now.

There wasn't a Phaser problem... it was all my fault.


My initial code was correct. 

The bug was the positioning of the objects inside the group. 

Alien.DISTANCE_X was NaN because I had to call AlienGroup.DISTANCE_X instead..... so the consequence was that Phaser didn't add the Aliens to the group.


I'm sorry I wasted your time >_<

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...