Sign in to follow this  
casey

buttons: weird behaviour

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

 

Share this post


Link to post
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! ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.