Phaser: show text when overlap sprites

Question

I am trying to work out a way to add a text to the top left corner of the viewport when two of my sprites overlap. One of them is a item and the other is my character. I can already detect for overlap and even "pick" the item (kill the sprite) when I click a key. However I would like that a text saying something like "Click "E" to pick the sword!" appeared while the collision function is active and when I kill the sprite by picking it up the text would vanish.

I tryed including the text in the collision function itself but I suppose this way I am rendering the text multiple times ( the fps drop a lot) and I just want to create it once and remove it according to my purposes. My code:

function collisionHandler(dude,the_sword) {
pickObject.onDown.add(function () {
        the_sword.kill();
    }, this);
 }

game.physics.isoArcade.overlap(dude, the_sword, collisionHandler, null, this);

 // message saying to pick // Where to put this?
var style = { font: "30px Arial", fill: "#ff0044"};
var pick_message = this.game.add.text(0,20,"Click 'E' to pick up the sword!",style);
pick_message.fixedToCamera = true;

Any idea on how to do this? Thank you.

Answer 1

The simplest way would be to create the text beforehand but have it hidden. Then your overlap handler will show the text, and if there is no overlap, hide it again. Something like:

mytext.alpha = 0;
game.physics.isoArcade.overlap(...); // mytext.alpha = 1;

You can turn the text on and off using alpha, or directly changing the text. See this phaser example: http://phaser.io/examples/v2/text/update-text