Phaser: A simple way to tween a property between two specific values?

Created on 26 Apr 2019  路  4Comments  路  Source: photonstorm/phaser

I've tried to work out if there's a way to define a tween property with both the start and end values without needing to define onStart function or use another separate line of code, and unless I'm missing something, it doesn't seem like there is. What I mean is if I could simply say something like this to tween alpha between 0 and 1:

javascript this.tweens.add({ targets: sprite, duration: 150, alpha: { from: 0, to: 1 } })

Instead of having to set sprite.alpha = 0 somewhere else that's not "part of" the tween.

This is probably just me being silly, but sometimes it seems cleaner - especially when you know the start and end - to be able to bundle the values together like this.

Maybe it's just me. :)

馃挅 Feature Request

Most helpful comment

Here is how to use the new format:

// Will alpha from 0 to 1 -after- the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        from: 0,
        to: 1
    },
    delay: 2000,
    duration: 6000
});

//  Will set alpha to 0 immediately, then alpha to 1 after the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        start: 0,
        to: 1
    },
    delay: 2000,
    duration: 6000
});

//  Will set alpha to 0.1 immediately, then alpha from 1 to 0.1 after the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        start: 0.1,
        from: 1,
        to: 0.1
    },
    delay: 2000,
    duration: 2000
});

All 4 comments

good request.. I usually use

onStart: () => this.alpha = 0,
alpha: 1

this way.

Thank you for submitting this feature request. We have implemented this and the feature has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

Here is how to use the new format:

// Will alpha from 0 to 1 -after- the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        from: 0,
        to: 1
    },
    delay: 2000,
    duration: 6000
});

//  Will set alpha to 0 immediately, then alpha to 1 after the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        start: 0,
        to: 1
    },
    delay: 2000,
    duration: 6000
});

//  Will set alpha to 0.1 immediately, then alpha from 1 to 0.1 after the delay expires
tween = this.tweens.add({
    targets: image,
    alpha: {
        start: 0.1,
        from: 1,
        to: 0.1
    },
    delay: 2000,
    duration: 2000
});

fantastic!

Was this page helpful?
0 / 5 - 0 ratings