Tween problems / onComplete

[3man7]

Hello guys,
I have 2 'simple questions' (I assume) that kinda bugs me for a while now. I wouldn't want to get too in-depth with this mainly because I'm not good at explaining stuff; but I'll try to keep it simple.

1st question:
Is 'fig 1' and 'fig 2' supposed to be the same thing?

2nd question:
I got a button that is supposed to pause the game.
'mygamepaused' is a variable that goes true/false on a click.
'mytimepass' is a 3 seconds timer that runs the tween from the first question.
'smiley_tw_pass' is a variable that goes true when the timer is finished (aka my way of telling the program that the tween just started)
'smiley_tw' is the name assigned to the tween (see question 1).

After the tween is completed (see question 1) - the sprite (this.smiley) goes to 100 on y axis and changes alpha to 0.1.

Here's where I run into problems.
1st: "smiley_tw is not defined"
     console error when trying to press the button before the timer passess (aka it cannot find the tween)
     fixed it by assigning a variable (smiley_tw_pass) right after the timer runs out.
     ...is that a good way of checking if the tween just started?...

 

2nd: "smiley_tw.pause is not a function"
     console error when using fig 1 (see question 1)
     fixed it by using fig 2 (see question 1)
     ...this bugs me because in my mind the two methods should work the same way, right?...

So that's how I solved the problem - by using a variable to detect if the tween just started AND using fig 2 instead of the first one - But WHY?

Why does the 2 methods doesn't work the same way here - AND - is declaring a variable (smiley_tw_pass) to check if a tween is running - a good thing?

I would really appreciate if someone can figure this 'mistery' and can clear my mind a little.

Full code: (480x720)

var Test = function (game) {};

var mygamepaused = false;
var smiley_tw_pass = false;

Test.prototype = {
    create: function () {
        //create button
        this.mybutton = game.add.button(this.world.centerX, 600, 'smiley', this.myfunction, this);
        this.mybutton.anchor.setTo(.5);
        this.mybutton.scale.setTo(.2);
        this.mybutton.inputEnabled = true;

        //create smiley
        this.smiley = game.add.sprite(this.world.centerX, this.world.centerY, 'smiley');
        this.smiley.anchor.setTo(.5);
        this.smiley.scale.setTo(.5);

        //create mytimepass
        mytimepass = game.time.create(false);

        mytimepass.add(3000, function () {
            if (!smiley_tw_pass)
                smiley_tw_pass = true;
            smiley_tw = game.add.tween(this.smiley).to({
                alpha: 0
            }, 1200, Phaser.Easing.Quadratic.InOut, true);

            smiley_tw.onComplete.add(function () {
                this.smiley.y = 100;
                this.smiley.alpha = 0.1;
            }, this);
        }, this);

        mytimepass.start();
    },

    myfunction: function () {
        switch (mygamepaused) {
            case false:
                mygamepaused = true;

                mytimepass.pause();

                if (smiley_tw_pass)
                    smiley_tw.pause();
                break;
            case true:
                mygamepaused = false;

                mytimepass.resume();

                if (smiley_tw_pass)
                    smiley_tw.resume();
                break;
        }
    },

    render: function () {
        game.debug.text('mygamepaused: ' + mygamepaused, 20, 20);
        game.debug.text('smiley_tw_pass: ' + smiley_tw_pass, 20, 40);

        game.debug.text('mytimepass: ' + mytimepass.duration.toFixed(0), 20, 80);
    }
};

 

[samme]

Can you explain what you want to happen? I think there's an easier way to code it, but I can't follow it yet.

[samid737]

 

q1:

they are in your case not the same. You are chaining methods here, but the assigned variable will be different. here is a reference about chaining your methods. The error in your case is because your smiley_tw becomes A signal when it is chained, not A tween. A simplified example of what is kind of happening:

//a car class
var car= function(){
    this.brand='';
    this.model='';
}
//set the brand of the car
car.prototype.setBrand=function(brand){
    this.brand=brand;
    return this;
}
//set the model of the car
car.prototype.setModel=function(model){
    this.model=model;
    return this;
}
//drive the car
car.prototype.drive=function(){
    console.log("wroom im driving my beautiful "+this.brand+" "+this.model);
    return this;
}
//this works,but here you are not chaining the methods:

var myCar=new car();
myCar.setBrand('fiat');
myCar.setModel('multipla');
myCar.drive();

//in one line via chaining:
var myCar = new car().setBrand('nissan'); 
console.log(myCar);//this object has only a brand
var myCar2 = new car().setBrand('nissan').setModel('skyline').drive();
console.log(myCar2);//this object is all inclusive.
//myCar is not the same as myCar2

 

q2:

The reason why you are getting an undefined error is because you have never defined your tween when you press pause the game initially via the button. The  smiley_tw_pass prevents resuming/pausing within the timer function. If I understand you correctly, you want to start yourtween after 3 seconds, but if the game is paused (via the button) it should pause everything, including the tween timeout. In your case you can add the tween in create() and pause it there. 

The not a function error is occuring because you are trying to  start() a signal object (the smiley_tw becomes a signal object, not a tween), see example  below to inspect properties via console logs.

You can probably find a better way to code by looking at the properties/methods of your timer .The timer for example can be paused via the paused flag:

var game = new Phaser.Game(800,600, Phaser.CANVAS, 'My CV',);

var Test = function (game) {};

var mygamepaused = false;
var smiley_tw_pass = false;

Test.prototype = {
    preload: function(){
        this.load.baseURL = "//examples.phaser.io/";
      this.load.crossOrigin = "anonymous";
      this.load.image("smiley", "assets/sprites/block.png");
    },
    create: function () {
        //create button
        this.mybutton = game.add.button(this.world.centerX, 600, 'smiley', this.myfunction, this);
        this.mybutton.anchor.setTo(.5);
        this.mybutton.scale.setTo(.2);
        this.mybutton.inputEnabled = true;

        //create smiley
        this.smiley = game.add.sprite(this.world.centerX, this.world.centerY, 'smiley');
        this.smiley.anchor.setTo(.5);
        this.smiley.scale.setTo(.5);

        //this will not work:
        //miley_tw = game.add.tween(this.smiley).to({alpha: 0},1200, "Linear", false).onComplete.add(function () {this.smiley.y = 100;this.smiley.alpha = 0.1;}, this);
        //console.log(smiley_tw);//a signal, not a tween
        //smiley_tw.start();
        //smiley_tw.pause();
        //smiley_tw.onComplete.add(function () {this.smiley.y = 100;this.smiley.alpha = 0.1;}, this);
        
        //this will  work:
        smiley_tw = game.add.tween(this.smiley).to({alpha: 0},1200, "Linear", false);
        console.log(smiley_tw);//a tween object
        smiley_tw.start();
        smiley_tw.pause();
        smiley_tw.onComplete.add(function () {this.smiley.y = 100;this.smiley.alpha = 0.1;}, this);
       
        //create mytimepass
        mytimepass = game.time.create(false);
        mytimepass.add(3000, function () {
                smiley_tw.resume();
        });
        mytimepass.start();
    },

    myfunction: function () {
        mytimepass.paused=mytimepass.paused?false:true;
    },

    render: function () {
        game.debug.text('mygamepaused: ' + mygamepaused, 20, 20);
        game.debug.text('smiley_tw_pass: ' + smiley_tw_pass, 20, 40);
        game.debug.text('mytimepass: ' + mytimepass.duration.toFixed(0), 20, 80);
    }
};

game.state.add("test",Test);
game.state.start("test");

 

[3man7]

@samme
Yeah there's definetely an easier way of coding this. Basically I needed a button to pause/resume everything at a quick click. I did get it to work but I didn't understand why my methods acted like that.

@samid737
Well that makes more sense now! I appreciate your detailed message! I'm gonna have to take a second and read your reply several times because I'm not quite familiar with method chaining in Javascript. I might've skipped some basic lessons.

Thanks both of you for the replies!