Hover over item opens menu with animation

[alarian]

Hey!

 

So here's what I've done:

foodCraftText = game.add.text(game.world.centerX, game.world.centerY-15, "MENU ITEM");foodCraftText.alpha = 0;

foodSprite.events.onInputDown.add(foodClicked, this);foodSprite.events.onInputOver.add(foodOver, this);foodSprite.events.onInputOut.add(foodOut, this);

function foodClicked () {        foodCount++;        foodText.text = "Food: " + foodCount;}function foodOver () {    game.add.tween(foodCraftText).to({x: game.world.centerX-60, y: game.world.centerY-80, alpha: 1}, 150, Phaser.Easing.Linear.None, true); }function foodOut () {    game.time.events.add(300, fadeOut, this);}function fadeOut () {    game.add.tween(foodCraftText).to({x: game.world.centerX, y: game.world.centerY, alpha: 0}, 150, Phaser.Easing.Linear.None, true);}

So, when I hover over foodSprite, the foodCraftText appears because of the tween in function foodOver ...

 

When I'm no longer hovering, foodCraftText does the opposite thing after a delay of 300 ms.

However, I don't know how to do ti so that foodCraftText stays when mouse is over it (but no longer over foodSprite)

 

 

So. I'm probably doing this all wrong? Here's what I Want to do:

 

 

Hover over foodSprite shows foodCraftText (appears with increased alpha from middle of foodSprite). When mouse is over foodCraftText, the text stays as is until...

Mouse is no longer over neither foodCraftText or foodSprite.

 

 

Help please :'(

[alarian]

function update () {    if (x0y0Land.input.pointerOver() || x0y0Tree.input.pointerOver() || foodCraftText.input.pointerOver())    {        fadeIn();    }    else    {        game.time.events.add(300, fadeOut, this);    }

So here's what I did... I added this into function update()

 

fadeIn() contains the code from foodOver() in the original post, fadeOut is the same as in the original post.

 

HOWEVER

This seems like it's a bad choice for performance.