Tweening Question :)

[Ninjadoodle]

Hi @enpu / Panda People

What would be the easiest way to make a sprite flash on/off (visible/invisible), using a tween?

I'm trying to keep the code short but I can't seem to do it without easing. I'd just like it to change change alpha 0 / 100 without any easing at all.

game.Tween.add(this.sprite, {
    alpha: 0
}, 0, {
    delay: 500,
    easing: 'Linear.None',
	repeat: 3,
}).start();

Thanks in advance for any suggestions

[enpu]

I would use timer for that.

flash: function() {
    this.sprite.alpha = 0;
    game.Timer.add(100, this.show.bind(this)); // 100ms flash
},

show: function() {
    this.sprite.alpha = 1;
}

 

[Ninjadoodle]

Hi @enpu

Thanks for that, I though about using a timer.

Is there an easy way to make it repeat a certain number of times, instead of just forever?

[enpu]

Actually you can do that also with tween:

var sprite = new game.Sprite('panda.png');
sprite.addTo(this.stage);

sprite.alpha = 0;
game.Tween.add(sprite, {
    alpha: 1
}, 100, {
    onStart: function() {
        sprite.alpha = 0;
    },
    repeat: 3
}).start();

That will flash the sprite 3 times.

[Ninjadoodle]

Hi @enpu

Thanks heaps for your help! I'm having one more issue tho - I can't get my head around on how to bind the sprite to the function inside the tween (i'm calling this from a class).

game.createClass('S10Mouse', {
    
    odd: false,
    
    init: function(x, y) {
        
        this.sprite = new game.Animation.fromTextures('s10Mouse');
        
        this.sprite.addAnim('showO', [0, 1, 2, 3, 4, 5, 6]);
        this.sprite.anims.showO.speed = 60;
        this.sprite.anims.showO.loop = false;
        
        this.sprite.addAnim('hideO', [7, 8, 9, 10, 11, 12]);
        this.sprite.anims.hideO.speed = 60;
        this.sprite.anims.hideO.loop = false;
        
        this.sprite.addAnim('showX', [13, 14, 15, 16, 17, 18, 19]);
        this.sprite.anims.showX.speed = 60;
        this.sprite.anims.showX.loop = false;
        
        this.sprite.addAnim('hideX', [20, 21, 22, 23, 24, 25]);
        this.sprite.anims.hideX.speed = 60;
        this.sprite.anims.hideX.loop = false;
        
        this.sprite.position.set(x, y);
        this.sprite.anchor.set(28, 38);
        this.sprite.addTo(game.scene.mg);
        
        this.sprite.mousedown = this.mousedown.bind(this);
    },
    
    mousedown: function() {
        
        if (!game.scene.touched) {
            
            game.scene.touched = true;
        
            if (!this.odd) {
                
                game.Tween.add(this.sprite, {
                    alpha: 1
                }, 100, {
                    onStart: function() {
                        this.sprite.alpha = 0;
                    },
                    repeat: 3
                }).start();
                
            } else {
                
                this.sprite.play('hideX');
                
            }
        }
    }
});

 

[enpu]

It can be a bit hard to understand how the "this" keyword works in JavaScript. But once you get it, it's actually pretty simple.

But in this case the "this" keyword inside the onStart function refers to the instance of the Tween class that you are creating with the game.Tween.add function. And Tween class does have property called object, that is the object that's values you are tweening (first parameter in the game.Tween.add function, in this case "this.sprite"). So you can refer to that inside the onStart function with "this.object", like this:

onStart: function() {
    this.object.alpha = 0;
}

Let me know if that works

[Ninjadoodle]

Hi @enpu

Thanks heaps for this piece of info - it's really useful! I actually completely understand what you are saying, but still can't get it to work tho lol - Uncaught TypeError: Cannot set property 'alpha' of undefined (stage10:57)

Here is the code I'm using ...

game.createClass('S10Mouse', {
    
    odd: false,
    
    init: function(x, y) {
        
        this.sprite = new game.Animation.fromTextures('s10Mouse');
        
        this.sprite.addAnim('showO', [0, 1, 2, 3, 4, 5, 6]);
        this.sprite.anims.showO.speed = 60;
        this.sprite.anims.showO.loop = false;
        
        this.sprite.addAnim('hideO', [7, 8, 9, 10, 11, 12]);
        this.sprite.anims.hideO.speed = 60;
        this.sprite.anims.hideO.loop = false;
        
        this.sprite.addAnim('showX', [13, 14, 15, 16, 17, 18, 19]);
        this.sprite.anims.showX.speed = 60;
        this.sprite.anims.showX.loop = false;
        
        this.sprite.addAnim('hideX', [20, 21, 22, 23, 24, 25]);
        this.sprite.anims.hideX.speed = 60;
        this.sprite.anims.hideX.loop = false;
        
        this.sprite.position.set(x, y);
        this.sprite.anchor.set(28, 38);
        this.sprite.addTo(game.scene.mg);
        
        this.sprite.mousedown = this.mousedown.bind(this);
    },
    
    mousedown: function() {
        
        if (!game.scene.touched) {
            
            game.scene.touched = true;
            
            if (!this.odd) {
                
                this.sprite.alpha = 0;
                game.Tween.add(this.sprite, {
                    alpha: 1
                }, 100, {
                    onStart: function() {
                        this.object.alpha = 0;
                    },
                    repeat: 3
                }).start();
                
            } else {
                
                this.sprite.play('hideX');
                
            }
        }
    }
});

 

[enpu]

Ah sorry i remembered it wrong. this keyword inside onStart function refers to the object that's properties you are tweening. So instead of this.object.alpha just use this.alpha

(same thing for onUpdate, onRepeat and onComplete functions)

[Ninjadoodle]

Hi @enpu

That works, thanks heaps!

It's still easing the 'alpha fade' tho, instead of just flashing on/off - I thought about using a specific easing mode (some tween libraries have one that's called 'sawtooth').

I had a look at the Panda's tween.js file, but I can't find anything appropriate.

[enpu]

@Ninjadoodle

Sorry for the hassle. If you want to just change value after certain amount of time, then Timer is definitely the choice rather than Tween.

flash: function(count) {
    this.flashCount = count * 2;
    this._flash();
},

_flash: function() {
    this.flashCount--;
    this.sprite.alpha *= -1;
    if (this.flashCount > 0) game.Timer.add(100, this._flash.bind(this));
}

I would use something like this, and then just call the flash function with parameter on how many times i want to flash the sprite. Note that this uses same time (100ms) on how long the sprite stays off and on. If you want different times on those, then you need to modify it a bit.

[Ninjadoodle]

Hi @enpu

Please don't apologise, you're awesome - I really appreciate your help!

Thanks a lot for the code above - I will probably use the timer and save it in a useful classes file lol