Adding multiple actions on button generated dynamically

by djohon   Last Updated November 09, 2018 00:26 AM

I've generated buttons dynamically. I would like to add a click and onInputOver actions to this button, but only the click(chooseHero) button works:

EDIT FULL_CODE

var heroesState = {
  create: function() {
    //game.add.image(0, 0, 'board');
    backBtn = game.add.button(5, 5, 'back_btn', this.GoBack);
    choiceText = game.add.bitmapText(150, 50, 'desyrel', 'Welcome warrior, Choose your Hero', 35);

    //var heroCardStyle = { fill: "#00ff00" };

    var initWidth = 60;
    var initHeight = 150;

    var heroesFiles = ["obatala.jpg", "obba.jpg", "olokun.jpg", "orunmila.jpg", "oshun.jpg",
      "oxosi.jpg", "oya.jpg", "ozain.jpg", "shango.jpg", "yemoja.jpg"
    ];
    var heroesLength = heroesFiles.length;
    var heroCard = [];
    //4 buttons generated dynamically with a loop
    for (var i = 0; i < heroesLength / 2; i++) {
      //longueur de chaque élément dans heroes
      var ln = heroesFiles[i].length;
      heroCard = game.add.button(initWidth, initHeight, heroesFiles[i].substring(0, ln - 4), this.ChooseHero, this.over);
      heroCard.scale.setTo(0.5, 0.5);
      heroCard.alpha = 0.4;
      initWidth = initWidth + 150;
    };

    var initWidth = 60;
    var initHeight = 350;
    //4 buttons generated dynamically with a loop
    for (var i = heroesLength / 2; i < heroesLength; i++) {
      //longueur de chaque élément dans heroes
      var ln = heroesFiles[i].length;
      heroCard = game.add.button(initWidth, initHeight, heroesFiles[i].substring(0, ln - 4), this.ChooseHero, this.over);
      heroCard.scale.setTo(0.5, 0.5);
      heroCard.alpha = 0.4;
      initWidth = initWidth + 150;

    };
    //heroCard.onInputOver.add(over, this); 

  },
  //functions associated to button events(chooseChero works fine but over doesn't work)
  GoBack: function() {
    game.state.start("menu");
  },

  over: function() {
    heroCard.tint = 0xffffff;
  },

  ChooseHero: function() {
    //game.state.start("menu");
    chosenHero = this.key;
    alert(this.key);
    game.state.start("play", true, false, chosenHero);
  }
};

I receive this error : Cannot read property 'onInputOver' of undefined.



Answers 1


From the additional code I can see the following issues:

  1. game.add.button() has a different signature. From the official docs we can see that it's:

new Button(game [, x] [, y] [, key] [, callback] [, callbackContext] [, overFrame] [, outFrame] [, downFrame] [, upFrame])

overFrame, outFrame, downFrame, and upFrame are all looking for the frame to use on the graphic being used, not for a function to call.

  1. var heroCard = []; is being used to initialize the variable, but then you're setting this to an actual button. I might recommend changing this to heroCards and then create a new heroCard in a for loop, defining it's properties there before adding it to your heroCards array.

  2. heroCard.onInputOver.add(over, this); should be within your for loop. If you console.log(arguments); you can see that you get two arguments back, which lets you use the first one to just modify the button they hover over:

    over: function(heroCard) {
        heroCard.tint = 0xffffff;
    }
    
James Skemp
James Skemp
November 09, 2018 00:25 AM

Related Questions


Updated July 08, 2018 22:26 PM

Updated March 20, 2017 16:26 PM

Updated June 30, 2018 12:26 PM

Updated August 05, 2018 14:26 PM

Updated October 01, 2017 12:26 PM