sombriks Posted February 27, 2015 Share Posted February 27, 2015 how to add Phaser. Graphics to a group? doing some tweens to a group but the things i drawed using a graphic did not move allthogeder. i draw thing on create phase, is it any kind of problem? any guidance is welcome. Link to comment Share on other sites More sharing options...
markergreen Posted May 29, 2015 Share Posted May 29, 2015 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 myTextThis 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/ RussiSunni, InsOp and sombriks 3 Link to comment Share on other sites More sharing options...
sombriks Posted June 3, 2015 Author Share Posted June 3, 2015 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 myTextThis 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 More sharing options...
phamedev Posted May 16, 2016 Share Posted May 16, 2016 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 More sharing options...
drhayes Posted May 16, 2016 Share Posted May 16, 2016 Try "this.game.make.graphics" instead. That will create it without adding it to the World and thus the display tree. phamedev 1 Link to comment Share on other sites More sharing options...
phamedev Posted May 16, 2016 Share Posted May 16, 2016 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 More sharing options...
drhayes Posted May 17, 2016 Share Posted May 17, 2016 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 More sharing options...
ztiromoritz Posted March 5, 2017 Share Posted March 5, 2017 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 More sharing options...
Recommended Posts