Adding to group without adding to stage

[cheshirepuss42]

        create() {            var grp = new Phaser.Group(this.game,null);                        var txt = new Phaser.Text(this.game, 0, 0, "boogaloo", {});            grp.add(txt);        }

Btw this is typescript.

 

When I use the above code on a state, the text is added to the stage. But I would expect that only to happen when I add the group to the stage.

I'm trying to make a popup by extending a Phaser.Group, but when I make it in the create function it just appears on stage, including the buttons on the popup.

How do i prepare a popup (an extended group containing sprites,text and buttons) and add it to the stage when i want?

[rich]

If a Group isn't given a parent (or a null parent) it defaults to the stage, which is the display list, hence why you're seeing this happen. I've modified what happens in the 1.2 branch, so if you give a null parent you just get the Group back (it doesn't add itself to anything), but if you don't define a parent parameter at all, it adds itself to the World as expected.

 

You're welcome to merge this code from the 1.2 branch with your version to obtain the same result, but it's quite an API change for 1.1 so I won't be doing it directly, sorry.

[rich]

Here is the commit: https://github.com/photonstorm/phaser/commit/5f6fc9db05acbda20b544bbffa8fbda7745b4b7f

[clark]

Great stuff! 

[cheshirepuss42]

I guess without porting to 1.2 and dealing with the out-of-date typescript definitions it won't work, as the changes (commenting out what happens when parent is null in the group constructor) are too entangled, because when i change state I get an error from the destroy function.

Yet I can't imagine that before 1.2 every time you make an object it is also immediately visible and active.

Is it the standard way to only make objects as soon as you need them, instead of preparing them and making them active when needed?

[rich]

I think you're mixing two things here. Groups don't have anything visible. Yes they are added to the display list on creation, but there is nothing actually IN them, so they don't render or do anything. They just sit there waiting for you to add sprites to them, which you can do at any time at all. And sprites you add to them can choose to be either visible and alive immediately, so you can create a whole batch of "invisible" sprites and just enable them as needed (common pool system, useful for bullets, explosions, etc).

[cheshirepuss42]

Thanks, I made it work with adding show and hide methods and calling hide in the constructor. Seems a little unwieldy as im handling all the children seperately. Is there a better way?

export class TextButton extends Phaser.Group {         w: number;        h: number;        button: Phaser.Button;        text: Phaser.Text;        constructor(game: Phaser.Game, text: string, width: number= 100, height: number= 50, callback?: Function,context?:Object,color:string="#eee") {            super(game, null, "button");            this.w = width;            this.h = height;                    this.button = this.add(new Phaser.Button(this.game, 0, 0, "", callback,context));            this.button.loadTexture(FilledRect.getBMD(this.game,this.w, this.h, color), 0);            this.text =this.add( new Phaser.Text(this.game, 0, 0, text, G.style));            this.text.anchor.setTo(0.5, 0.5);            this.text.x = this.button.width / 2;            this.text.y = this.button.height / 2;            this.Hide();        }        Hide() {            this.button.alive =            this.button.exists =            this.button.visible =            this.text.alive =            this.text.exists =            this.text.visible = false;        }        Show() {            this.button.alive =            this.button.exists =            this.button.visible =            this.text.alive =            this.text.exists =            this.text.visible = true;        }    }

This is the definition of the way to get the backgroound-bitmap for the button:

    export class FilledRect extends Phaser.Sprite {        color: string;        constructor(game: Phaser.Game, width: number, height: number, color: string="#fff") {            super(game, width, height);                        this.color = color;            this.loadTexture(FilledRect.getBMD(game,width,height,color),null);        }        static getBMD(game: Phaser.Game, width: number, height: number, color: string= "#fff"): Phaser.BitmapData {            var bmd = new Phaser.BitmapData(game, width, height);            bmd.beginFill(color);            bmd.rect(0, 0, width, height);            bmd.fill();            return bmd;        }    }