Using tween to change alpha on a graphics object

[denisb]

In the code below I create a graphics object with an alpha of 0. I then create a tween object using the graphics object as the target. In the update function I change the alpha value of the graphics object from 0 to 1 using the tween. This does not work. However, when I create the graphics object using an alpha value of 1 and change the value from 1 to 0, using the tween, it does work. Can someone explain this to me?

var MyGame={};

MyGame.Test=function(){
    this.rectangle;
    this.tweenRectangle;
    this.switch=true;
};

MyGame.Test.prototype={
    
    create:function(){
    
        this.rectangle=this.add.graphics();
        this.rectangle.lineStyle(0);
        this.rectangle.beginFill(0x992d2d,0);
        this.rectangle.drawRect(0,0,600,600);
        this.rectangle.endFill();
        
        this.tweenRectangle=this.add.tween(this.rectangle);
    },
      update:function(){
        
        if(this.switch){
            this.tweenRectangle.to({alpha:1},5000,"Linear",true);
             this.switch=false;
        }
    }
};

 

[Batzi]

Try this

function create() {
var box = game.add.graphics(200,200);
box.beginFill(0xff0000);
box.drawRect(0,0,100,100);

box.alpha = 0;

setTimeout(function(){
    game.add.tween(box).to({alpha:1},300,Phaser.Easing.None,true);
},2000);

}

 

[in mono]

Just to clarify what @Batzi wrote - a tween you create doesn't need to be updated manually in the update() loop - it manages itself once you create and start it. What happens with your code is that a tween is created for each consecutive frame while the switch is true. If you need to check the state of the switch, you can do it once in a button callback or somewhere else (depends on what it's called from).

[Batzi]

5 hours ago, in mono said:

Just to clarify what @Batzi wrote - a tween you create doesn't need to be updated manually in the update() loop - it manages itself once you create and start it. What happens with your code is that a tween is created for each consecutive frame while the switch is true. If you need to check the state of the switch, you can do it once in a button callback or somewhere else (depends on what it's called from).

You're right. I forgot to mention the update part.

[denisb]

Thanks for the help. I thought the tween needed to run in the update function. Thanks for clearing that up for me. Also, do you have any clue why the alpha can change from 1 to 0 but not 0 to 1. The setTimeout works but I'm just curious. If I can figure it out I'll post the answer.

[Batzi]

6 minutes ago, denisb said:

Thanks for the help. I thought the tween needed to run in the update function. Thanks for clearing that up for me. Also, do you have any clue why the alpha can change from 1 to 0 but not 0 to 1. The setTimeout works but I'm just curious. If I can figure it out I'll post the answer.

By default a sprite's alpha is 1 so when you did the tween going from 1 to 0 it worked. In your code, you never set the sprite's alpha to be 0 in the first place. Try to set the rectangle's alpha to 0 somewhere after creating it and see what happens.

[denisb]

Ah, you're brilliant Mr. Batzi! Thanks a million.