Adding Geometry to Groups

[eZanmoto]

First off, thanks very much for the amazing tool, it must be a lot of work to maintain and it's amazing to be able to use it for free.

As for the main issue, I'm getting an error when I try to add a geometric object to a group:

phaser.js:14115 Uncaught TypeError: a.setStageReference is not a function

Perhaps this is because groups are implemented in Pixi and geometry in Phaser?

I'm doing this because I have a custom bitmapText, and text in general seems very unresponsive when I tap it. In particular, I think tapping in between adjacent characters won't fire an event. So I want to place a rectangle over each bitmapText with corresponding width and height, to capture and fire the appropriate event, but my text is part of a group for positioning, and so I would need to add the geometry to group as well. Any solution or alternatives would be greatly appreciated.

[eZanmoto]

Sorry for the bump, I'll work around this issue manually if there is no other option.

[Zeterain]

You are correct: elements added to groups need to be instances of PIXI.DisplayObject. A Phaser.Rectangle is not.

However, check this out: Phaser.BitmapText is a PIXI.DisplayObjectContainer, which has a hitArea property. This is set to null by default for bitmapText objects, but you can set it to your own rectangle. 

http://phaser.io/docs/2.4.4/PIXI.DisplayObject.html#hitArea

 

Let me know if that fixes the issue.

[eZanmoto]

Perfect, thanks Zeterain, I had encountered hitArea before but I hadn't considered that it would be available for Phaser.BitmapText. I'll try it out and report back.

[eZanmoto]

I'm actually having a lot of trouble getting the plain `hitArea` to work. I coded up a quick prototype in the online code editor (apologies for the roughness):

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });

var circle;
var floor;

function create() {
    var t = game.add.text(game.world.centerX, 100, 'hello, world', {
        font: '64px Arial',
        fill: '#ff0000'
    });
    t.inputEnabled = true;
    t.events.onInputDown.add(function () {
        console.log('hello');
    });
    circle = new Phaser.Rectangle(t.x, t.y, t.width, t.height);
    t.hitArea = circle;

}

function render () {

    game.debug.geom(circle);
}

The input event doesn't fire on click unless I comment out the `t.hitArea`, in which case it seems to work perfectly within the text "square" - even clicking in between letters fires the event. I'm guessing that this is because `bitmapText` defines the text in terms of sprites with their own distinct hit areas, and spacing breaks these up, whereas the hit area for regular text is just defined in terms of the text boundary.

Also, is there anyway of getting the `Rectangle` to "follow" the text that it's a `hitArea` of, so that when the text moves then the `Rectangle` moves too?

[fillmoreb]

Try doing this:

circle = new Phaser.Rectangle(0,0,t.width,t.height);

instead of specifying the t.x and t.y as the origin of your rectangle.

[eZanmoto]

Thanks fillmoreb, I think I understand (somewhat) what's happening now - the rectangle is being rendered relative to the origin of the screen, but the actual hitArea is relative to the text? Regardless, that seems to be working for the example, I must test it on the actual bitmapText in the morning. Thanks very much!

[fillmoreb]

12 minutes ago, eZanmoto said:

Thanks fillmoreb, I think I understand (somewhat) what's happening now - the rectangle is being rendered relative to the origin of the screen, but the actual hitArea is relative to the text? Regardless, that seems to be working for the example, I must test it on the actual bitmapText in the morning. Thanks very much!

That was what my guess was, yes.

[eZanmoto]

Thanks a million fillmoreb, works perfectly in-game as well. For some reason I needed to do do `new Phaser.Rectangle(-t.w/2, 0, t.w, t.h)` to get the position right, but it's working now :-) (perhaps it was because I used `t.anchor.setTo(0.5)`, but if that's the case I don't know why I don't need to center on the Y axis...)