Custom sprite bounds

[dgodov]

Hi everyone!

 

I have a problem with sprite bounds. I've created a hexagon sprite using Phaser.Graphics like this:

    Hexagon.prototype.create = function() {        var graphics = new Phaser.Graphics(this.game, 0, 0);        graphics.lineStyle(this.lineWidth, this.lineColor);        graphics.beginFill(this.fillColor);        graphics.boundsPadding = 0;        graphics.moveTo(0, _tileRadius);        for (var i = 1; i < 7; i++) {            var angle = Math.PI / 2 + Math.PI * i / 3;            graphics.lineTo(_tileRadius * Math.cos(angle), _tileRadius * Math.sin(angle));        }        return graphics.generateTexture();    };

and then I use it as a texture and it works fine. But it seems like it doesn't create bounds for this srpite. When I print a sprite in console it shows that bounds have Infinity size. How can I set bounds for my sprite? Tnaks in advance.

[lewster32]

It doesn't look like the graphics object is actually added to the sprite from the code you've pasted. I imagine you need to add the following line:

this.addChild(graphics);

Upon which the extended sprite should then recalculate its bounds to include its new child object.

[dgodov]

Sorry, I wasn't clear enough. 

 

I use generated texture later in my code:

var hex = new Hexagon(game, 1, 0x000000, 0xFFABAB).create();var sprite = this.game.add.sprite(x, y, hex);

But it still doesn't update bounds. I also tried a level lower and added given graphics directly to stage using PIXI. I don't remember exactly, but it was something like:

game.stage.add(graphics);

And it worked fine. But when I use game.add.sprite() bounds start to behave very strange.

[lewster32]

What is Hexagon extending? If you're adding it as the key to a sprite and it doesn't have the properties expected then the sprite bounds calculation will fail. From the docs we see that a sprite needs one of the following (as well as a string to represent something in the cache): 

Phaser.RenderTexture | Phaser.BitmapData | PIXI.Texture 

When setting the texture, the operation is passed to PIXI.Sprite, which uses the frame size to work out the bounds.

[dgodov]

Hexagon is not a derived class. It is my class created to group some logic. 

Its main function is create() and it returns a texture which then used to create sprite.

 

I guess generateTexture() returns PIXI.Texture instance, so at the first glance it looks OK for Phaser.Sprite. Am I wrong?

[dgodov]

May be you can give code snippet to create a sprite using texture generated from graphics which will set correct bounds?

[lewster32]

I do it a slightly different way, relying on pixi internally generating a RenderTexture (due to an issue at the moment with Phaser's Graphics objects not being compatible with RenderTexture) but it gets the same results: http://jsfiddle.net/lewster32/xXbAD/

 

I've not delved deep enough into the workings of the textures, but I assume the problem lies with the creation of the texture frame maybe? Certainly a bounds size of Infinity suggests a division by zero somewhere, so I think you may have to trace backwards through the Phaser and pixi sources to see how a texture is added to a sprite and where the frame size is calculated.

[dgodov]

Sorry for long delay. It works, but I have one more question.

If I place debug.spriteBounds in render method it works OK, but if it's located in create method it stops working correctly.

Why?

[lewster32]

It has to be called every frame, as the debug canvas context is cleared each frame. Putting it in render ensures it's displayed on top of all of the other objects in the scene, and thus is where it's meant to go.

[dgodov]

Does it mean, that I have to put my code, which should detect intersecrions in render method instead of create?

[lewster32]

Render is for things you want to happen after the scene has been drawn, just before the next frame. Any logical stuff like detecting intersections should be in update or, if extending Sprites, possibly preUpdate.

[dgodov]

Thank you so much for your help and patience