casey Posted February 2, 2018 Share Posted February 2, 2018 I've got a series of buttons, each of which have an off/off (toggle) state which is handled by a function where they also update an array with their state (1 = on, 0 = off). Sometimes the buttons require two clicks to activate, and other times they only require one click to change the tint and update the array! I'm confused!! Is there something I'm missing? preload: function(){ this.game.load.image('one', 'phone/phone1.png'); this.game.load.image('two', 'phone/phone2.png'); this.game.load.image('three', 'phone/phone3.png'); this.game.load.image('enter', 'images/enter.png'); }, create: function(){ this.one = this.game.add.button(100,100, 'one', this.pressedOne, this); this.two = this.game.add.button(200, 100, 'two', this.pressedTwo, this); this.three = this.game.add.button(300, 100, 'three', this.pressedThree, this); this.arr = [0,0,0]; }, pressedOne: function(){ //if it's already pressed then unpress it if(this.pressed){ this.one.tint = 0xFFFFFF; this.arr[0] = 0; this.pressed = false; } else{ this.pressed = true; this.one.tint = 0xE6E2F4; this.arr[0] = 1; } return; }, pressedTwo: function(){ if(this.pressed){ this.pressed = false; this.two.tint = 0xFFFFFF; this.arr[1] = 0; } else{ this.pressed = true; this.arr[1] = 1; this.two.tint = 0xE6E2F4; } }, pressedThree: function(){ if(this.pressed){ this.pressed = false; this.three.tint = 0xFFFFFF; this.arr[2] = 0; } else{ this.pressed = true; this.arr[2] = 1; this.three.tint = 0xE6E2F4; } }, EnterBtn: function(){ console.log(this.arr); } Link to comment Share on other sites More sharing options...
3man7 Posted February 2, 2018 Share Posted February 2, 2018 Hey, I think the problem is merely the code ordering + omitting specifying default proprieties + confusion.. ? Here's how I'd do it: Main.Game = function (game) {}; var pressedOne_bool = false; var pressedTwo_bool = false; var pressedThree_bool = false; var arr; Main.Game.prototype = { preload: function () { this.game.load.image('one', 'phone/phone1.png'); this.game.load.image('two', 'phone/phone2.png'); this.game.load.image('three', 'phone/phone3.png'); this.game.load.image('enter', 'images/enter.png'); }, create: function () { this.one = this.game.add.button(100, 100, 'one', this.pressedOne, this); this.one.tint = 0xFFFFFF; this.two = this.game.add.button(200, 100, 'two', this.pressedTwo, this); this.two.tint = 0xFFFFFF; this.three = this.game.add.button(300, 100, 'three', this.pressedThree, this); this.three.tint = 0xFFFFFF; this.arr = [0, 0, 0]; }, pressedOne: function () { switch (pressedOne_bool) { case false: pressedOne_bool = true; this.one.tint = 0xE6E2F4; this.arr[0] = 1; break; case true: pressedOne_bool = false; this.one.tint = 0xFFFFFF; this.arr[0] = 0; break; } }, pressedTwo: function () { switch (pressedTwo_bool) { case false: pressedTwo_bool = true; this.two.tint = 0xE6E2F4; this.arr[1] = 1; break; case true: pressedTwo_bool = false; this.two.tint = 0xFFFFFF; this.arr[1] = 0; break; } }, pressedThree: function () { switch (pressedThree_bool) { case false: pressedThree_bool = true; this.three.tint = 0xE6E2F4; this.arr[2] = 1; break; case true: pressedThree_bool = false; this.three.tint = 0xFFFFFF; this.arr[2] = 0; break; } }, EnterBtn: function () { console.log(this.arr); }, render: function () { game.debug.text("pressedOne_bool: " + pressedOne_bool, 32, 40); game.debug.text("pressedTwo_bool: " + pressedTwo_bool, 32, 60); game.debug.text("pressedThree_bool: " + pressedThree_bool, 32, 80); game.debug.text("arr: " + this.arr, 32, 120); } } The render function will make you see things better - although it has an impact on fps so be sure to remove it whenever you try to get the best out of your project/game. Good luck! samme and casey 2 Link to comment Share on other sites More sharing options...
casey Posted February 3, 2018 Author Share Posted February 3, 2018 Thank you, that's helpful. 3man7 1 Link to comment Share on other sites More sharing options...
Recommended Posts