Pass local variable in for-loop to onComplete callback

[BdR]

I'm working on a level select screen and I want to add a fancy tween animation to each individual icon, so it will reveal the icons in a fan-like pattern. My level select screen contains 4 x 5 icons, so 20 in total but there are 60 levels. When the player presses a Next or Previous button it should update all icons to reveal the next or previous set of levels (so +20 or -20) using the following steps.

 

First, in a for-loop each icon will get a tween that will "fold" it vertically in half by tweening the scale.x to 0.0. Then I add a function to the onComplete of each tween, which should call a function to update the levelnr (i.e. +20) and then add another tween to "reveal" it again, by tweening the scale.x back to 1.0.

 

The problem is that I don't know how to determine which levelicon called the callback function. I mean when the parameters of the callback are object and tween  (i.e. the tween and the levelicon.scale) then I don't know how to determine which of the 20 levelicons it was that called the updateLevelIcon function.

 

Here is the code I've got

mygame.LevelSelect.prototype = {    create: function(){        // .. initialising stuff        // reveal all level icons        this.updateAllLevelIcons();    },    updateAllLevelIcons: function() {        // reveal all levelicons on screen        for (var i=0; i < this._levelicons.length; i++) {            // .. do some stuff            var levelicon = this._levelicons[i];            // tween animation to hide icon, fold in halve            levelicon.scale.x = 1.0;            var tween = this.game.add.tween(levelicon.scale)                .to({ x: 0.0 }, 1000, Phaser.Easing.Linear.None, true, startdelay); // easing, autoStart=true, startdelay=ms delay before starting            // tween animation to show icon            tween.onComplete.add(this.updateLevelIcon, this);        };    },    updateLevelIcon: function(obj, tween) {        // retrieve the levelnr and icongroup, how?        var IconGroup = ???        var index = ???    },

So I tried the following, but then the parameter passed to the callback function is always the same. I know this is a scope problem because each callback points to the the same "var i" instance. 

        for (var i=0; i < this._levelicons.length; i++) {            // ..            tween.onComplete.add(function(){this.updateLevelIcon(i);}, this);         };    },    updateLevelIcon: function(index) {        // PROBLEM: at this point index is ALWAYS the same value, 20 ( = _levelicons.length+1 )    },

 

And I also tried

            tween.onComplete.add(function(){var index=i; this.updateLevelIcon(i);}(i), this); // function now gets called even before the preloader..?

So I know what is causing it, but I don't know how to solve it.   Any ideas on how to handle this?

[tips4design]

Well, if you want to do it this way, you can use this to save the scope of the variable:

(function(idx){ return function(){ this.updateLevelIcon(idx);} })(i)

This is not very efficient as it creates a new anonymous function for each callback.

[georgejfrick]

I would consider making each icon an object containing its own data. Instead of having an update that loops through them attempting to pass in data, have them own their data.

 

Bit of a quick hack might be to just make the index a property on the tween:

var tween = this.game.add.tween(levelicon.scale)                .to({ x: 0.0 }, 1000, Phaser.Easing.Linear.None, true, startdelay); // easing, autoStart=true, startdelay=ms delay before startingtween.index = i; // now you can access it laterupdateLevelIcon: function(obj, tween) {        // retrieve the levelnr and icongroup, how?        var IconGroup = ???        var index = tween.index;    },

[BdR]

Bit of a quick hack might be to just make the index a property on the tween:

 

Thanks I had also come to that "quick hack" method, so attaching a new variable on the tweenanimation and putting the value there.