Sign in to follow this  
BdR

Pass local variable in for-loop to onComplete callback

Recommended Posts

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.  :unsure: Any ideas on how to handle this?

Share this post


Link to post
Share on other sites

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;    },

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.