Jump to content

Adding Geometry to Groups


eZanmoto
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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