Jump to content

Adding to group without adding to stage


Recommended Posts

        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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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;        }    }
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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