Jump to content

how to add Phaser. Graphics to a group?


sombriks
 Share

Recommended Posts

  • 3 months later...

Hey there;

 

You can add anything to a group after creating it with the add() function.

myGroup = game.add.group(); // create a group myGraphic = game.add.graphics(0,0); // create graphicmyGraphic.beginFill(0x00FFFF, 1); // paint graphic a colourmyGraphic.boundsPadding = 0;myGraphic.drawRect(0, 0, 100, 100); // draw graphic to screen myGroup.add(myGraphic); // add graphic to group myText = game.add.text(0,0,"text",{font:"bold 12px Arial",fill:"#000"}); // create text myGroup.add(myText); // add text to group myGroup.visible = false; // hide myGraphic AND myText myGroup.visible = true; // show myGraphic AND myText

This is great for creating screens within a state like pause screens.

 

There is also a relevant thread on adding text to a group here: 
http://www.html5gamedevs.com/topic/2606-can-text-be-added-to-a-group-or-only-sprites/

Link to comment
Share on other sites

Hello and thanks for your answer.

 

the graphics moved correctly, so it must have been some issue on my code.

 

Thanks for the help, i'll check the situation i faced when i have the chance.

 

Hey there;

 

You can add anything to a group after creating it with the add() function.

myGroup = game.add.group(); // create a group myGraphic = game.add.graphics(0,0); // create graphicmyGraphic.beginFill(0x00FFFF, 1); // paint graphic a colourmyGraphic.boundsPadding = 0;myGraphic.drawRect(0, 0, 100, 100); // draw graphic to screen myGroup.add(myGraphic); // add graphic to group myText = game.add.text(0,0,"text",{font:"bold 12px Arial",fill:"#000"}); // create text myGroup.add(myText); // add text to group myGroup.visible = false; // hide myGraphic AND myText myGroup.visible = true; // show myGraphic AND myText

This is great for creating screens within a state like pause screens.

 

There is also a relevant thread on adding text to a group here: 
http://www.html5gamedevs.com/topic/2606-can-text-be-added-to-a-group-or-only-sprites/

Link to comment
Share on other sites

  • 11 months later...

 

I don't want to create a new thread for the issue so I'll post here.

Basically I want to create a new Graphics object draw stuff on it and will add it to a group later. Here is the code:

function create() {
    var group = this.game.add.group();
    var testRect = new Phaser.Graphics(400, 400);
    testRect.beginFill(0x0000FF, 1);
    testRect.drawRoundedRect(0, 0, 100, 100, 10);
    group.add(testRect);
}

The code works and a rounded rectangle is drawn and appears on screen but in chrome debug console I get this error at the line (group.add..) :

Phaser v2.4.7 | Pixi.js v2.2.9 | WebGL | WebAudio     http://phaser.io ♥♥♥
phaser.min.js:14 Uncaught TypeError: Cannot read property 'x' of undefined


Any idea what's wrong?

I don't get this error if I replace first line with: var testRect = this.game.add.graphics(400,400);
But it adds the graphics object on the screen immediately and that is not what I want.

Link to comment
Share on other sites

1 hour ago, drhayes said:

Try "this.game.make.graphics" instead. That will create it without adding it to the World and thus the display tree.

It works!

Where can I read about basic stuff like that? Things like why not use the "new" to instantiate object?

Link to comment
Share on other sites

I just read the documentation, pretty much straight through. Then I started answering questions on the forums. :)

In this specific case, I said to myself a long time ago, "What's the difference between GameObjectFactory and GameObjectCreator? Let's go read the docs and look at the source code. Oh look! One is exposed as 'add' on the game instance, the other is 'make'!" That kind of thing.

You can use "new" to instantiate any of the display objects. These are just convenience functions that handle some stuff for you, like passing the game instance, etc.

Link to comment
Share on other sites

  • 9 months later...

Old Thread, but I found it struggling with the same error message. (Uncaught TypeError: Cannot read property 'x' of undefined)

I just want to clarify the problem in @phamedev s code.

This line: 

 var testRect = new Phaser.Graphics(400, 400);

 has to be changed to this:

 var testRect = new Phaser.Graphics(this.game, 400, 400);

As @drhayes wrote, it is okay to use new calls, but then you have to pass the game object as first argument. Unfortunately, I forget this on a regular basis :( 

I use new when I like to write a custom class which extends Phaser.Graphics or one of the other Classes like Sprite etc. This could be a reason, why you have to use new instead of GameObjectFactory or GameObjectCreator.

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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