buttons: weird behaviour

[casey]

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

 

[3man7]

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! 

[casey]

Thank you, that's helpful.