Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Tweens inside of classes


Yora
 Share

Recommended Posts

I'm starting to try utilizing classes, with my initial goal to have a type of sprite that will be looping a tween.  The problem I'm having is after the first tween completes, the next one triggered by .onComplete ends up throwing me this error: Cannot call method 'tween' of undefined If the function is instead in the main game file, it works fine. I also may not be using tweens correctly, this is just what I came up with that gave me the desired effect.  

Bee = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'bee');};Bee.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);Bee.prototype.constructor = Bee;Bee.prototype.beeAnim1 = function (bee, pos, delay) {    this.game.add.tween(bee).to({        y: pos + 50    }, delay, Phaser.Easing.Sinusoidal.Out, true, 0, false).onComplete.add(function () {        this.game.add.tween(bee).to({            y: pos        }, delay, Phaser.Easing.Quadratic.In, true, 0, false).onComplete.add(function () {            this.game.add.tween(bee).to({                y: pos - 50            }, delay, Phaser.Easing.Sinusoidal.Out, true, 0, false).onComplete.add(function () {                this.game.add.tween(bee).to({                    y: pos                }, delay, Phaser.Easing.Quadratic.In, true, 0, false).onComplete.add(function () {                    beeAnim1(bee, pos, delay);                });            });        });    });}

Additionally I've been having a problem with any tween I'm using behaving strangely when I switch tabs in my browser then switch back.  They'll kinda jump around, stop where they are, or continue to animate while the rest of the game is paused.  When pausing normally (like clicking outside the browser) they pause and resume fine.

Link to comment
Share on other sites

I don't know enough yet about Phaser yet to be sure, but I'll offer something up that might give a nudge in the right direction.  Your description of the first problem smells like a "this" problem.

Yeah, that's the feeling I was getting.  The first tween's this.game will work as intended, but upon the onComplete call the next this.game is apparently undefined and I'm not sure why.  Though I hardly know my way around javascript.   :lol:

Link to comment
Share on other sites

You should chain the tweens together rather than nest your functions so deeply like that, as you're losing scope beyond the first one. It will also make your code a lot cleaner. Basically you can create a whole bunch of tweens and use tween.chain() to link them together. Something like:

var tween1 = game.add.tween(blah);var tween2 = game.add.tween(part2 of the effect);var tween3 = game.add.tween(part3 of the effect);tween1.chain(tween2);tween2.chain(tween3);tween1.start();
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...