Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

buttons: weird behaviour


casey
 Share

Recommended Posts

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

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...