Sprite from Graphics and Group from Sprite

[pistacchio]

Hi,

I have trouble making a sprite from a grapcics object that is not displayed but only in memory, since the Sprite constructor require an actual position of the sprite on the screen.

Also, making a sprite and assigning it to a variable, doesn't let me use it as "key" for adding that sprite to a group (the error is Key is not found in the Cache).

 

This is my code:

 

self.explodingGroup = self.state.add.group();var explodingRect   = self.state.add.graphics(GRID_CELL_SIZE / 2);explodingRect.beginFill('#ff0000', 1);explodingRect.drawRect(0, 0, GRID_CELL_SIZE / 2, GRID_CELL_SIZE / 2);explodingRect.endFill();var explodingSprite = self.state.add.sprite(0, 0, explodingRect.generateTexture());_.times(2, function (y) {    _.times(GRID_SIZE_W * 2, function (x) {        self.explodingGroup.create(x * GRID_CELL_SIZE / 2, (y * GRID_CELL_SIZE / 2) + lineToRemove * GRID_CELL_SIZE, explodingSprite);    });})

 

[Tom Atom]

You can create sprite with "new Phaser.Sprite" and then add it to Group or any other PIXI.DisplayObjectContainer with add method.

 

Only objects in scene tree are processed. So until you add your sprite to some container in scene tree it is invisible and not updated. In my games I create sometimes complex groups with subgroups and sprites all with new/add from bottom up and then I add top group into scene tree (for example into world).

[pistacchio]

So, I updated the code to be:

 

 

                self.explodingGroup = self.state.add.group();                var explodingRect   = self.state.add.graphics(GRID_CELL_SIZE / 2);                explodingRect.beginFill('#ff0000', 1);                explodingRect.drawRect(0, 0, GRID_CELL_SIZE / 2, GRID_CELL_SIZE / 2);                explodingRect.endFill();                var explodingSprite = new Phaser.Sprite();                explodingSprite.addChild(explodingRect);                explodingSprite.key = 'exploding-sprite';                _.times(2, function (y) {                    _.times(GRID_SIZE_W * 2, function (x) {                        self.explodingGroup.create(x * GRID_CELL_SIZE / 2, (y * GRID_CELL_SIZE / 2) + lineToRemove * GRID_CELL_SIZE, 'exploding-sprite');                    });                })

but I still get the error Phaser.Cache.getImage: Key "exploding-sprite" not found in Cache.

 

.

[MichaelD]

Are you loading an image in the cache named "exploding-sprite"?

 

like this: 

this.load.image("exploding-sprite","assets/exploding-sprite.png");

This should be loaded in your preload state.

[pistacchio]

Are you loading an image in the cache named "exploding-sprite"?

 

like this: 

this.load.image("exploding-sprite","assets/exploding-sprite.png");

This should be loaded in your preload state.

 

Nope. As stated, I'm not loading it from an image but creating it on the fly from a Graphics object (a simple red rectangle, as show in the code). 

[NateTheGreatt]

As you can see from the sprite documentation the fourth parameter takes in a string (for a preloaded image), a Phaser.RenderTexture object, a Phaser.BitmapData object, or a PIXI.Texture object.

 

In this case let's go with a Phaser.BitmapData object because it's the quickest:

var graphic = game.make.bitmapData(32, 32);graphic.ctx.fillStyle = '#FF0000';graphic.ctx.fillRect(0, 0, 32, 32);var sprite = new Phaser.Sprite(game,0,0,graphic);game.add.existing(sprite);

Should be all you need

[wayfinder]

if you need to use a graphics object, you can pass graphics.generateTexture() as the key for the sprite.