Bitmap Text button background

[loranger]

Hello

 

I use a Bitmap Text as a button.

By enabling interactive property it is quite easy to handle clicks, but only on characters.

Is there a way to make the whole text area clickable ?

 

I tried to add it to a container and listen for the container click, but the result is the same : The event is triggered on a text click only. Clicking between two characters of a word does not do anything.

 

In a perfect world, I would like my BitmapText background to be transparent in order not to cover the scene background details.

Do I ask too much ?

[PixelPicoSean]

You may try to create a transparent sprite on top of the text and enable its input.

[loranger]

Thank you for the tip !

 

I tried it and it works perfectly.

I was looking for a dynamic way to make the Sprite exactly the same size as the BitmapText's one and found Stephan's panda.js fiddler page (of an inestimable value)

 

Then I rewrite my BitmapText button like this :

var txtButton = new game.BitmapText("My Label is clickable", { font: 'myAwesomeFont' });txtButton.position.set(0, 0);txtButton.hitArea = new game.PIXI.Rectangle(0, 0, txtButton.width, txtButton.height);txtButton.addTo(myContainer);

I still have some strange padding issue at the bottom, but I wrote less lines for the same results.

 

Thank again, PixelPicoSean for driving me to a good solution.

[SkyzohKey]

Hey !

 

You could make the modifications bellow :

txtButton.hitArea = new game.PIXI.Rectangle(0, 0, txtButton.width, txtButton.height);// To ->txtButton.hitArea = txtButton.getBounds(); // I think it should be work