Phaser: show text when sprites overlap

问题

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 an 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 tried including the text in the collision function itself but I suppose this way I am rendering the text multiple times (the fps drops 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?

回答1:

In your 'create' function:

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;
pick_message.visible = false;

Then:

function collisionHandler(dude,the_sword) {
pick_message.visible = true;
pickObject.onDown.add(function () {
    the_sword.kill();
    pick_message.visible = false;
}, this);
}

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

Something like that should work. If you want to perform other action, like opening the door, you can use:

pick_message.setText("Click 'Q' to open the door!");

You don't have to create new text evertime, you can use one for different purposes.

来源：https://stackoverflow.com/questions/39336100/phaser-show-text-when-sprites-overlap

标签

phaser-framework