tizzle

changing frames of sprites in group

Recommended Posts

this is my first post so i apologize if i'm posting incorrectly. 

i'm trying to have a button change its frame and some of the others in the group.  the buttons display fine initially and i can successfully change the properties but i cannot visually get them to change frames when one is clicked.  on the other hand, if i want to change only one button that works (you can see that i left the code commented out for that).  i left the changing button frames line blank because i've tried so many things and nothing seems to work.  

var GameState = { 

	preload: function(){
		this.game.load.spritesheet('btnSht', "tFassets/btnSprtSht.png", 100, 100, 4);
	},

	create: function(){

		btnArray = [
		{x: 50, y: 200, id: 1, frm: 0},
		{x: 150, y: 200, id: 2, frm: 0},
		{x: 250, y: 200, id: 3, frm: 0},
		{x: 350, y: 200, id: 4, frm: 0},
		{x: 450, y: 200, id: 5, frm: 0},
		{x: 50, y: 300, id: 6, frm: 0},
		{x: 150, y: 300, id: 7, frm: 0},
		{x: 250, y: 300, id: 8, frm: 0},
		{x: 350, y: 300, id: 9, frm: 0},
		{x: 450, y: 300, id: 10, frm: 0},
		];
		
		this.btns = this.game.add.group();
		var self = this;

		count = 0;
		btnArray.forEach(function (element){
			btn = self.btns.create(element.x, element.y,'btnSht');
			btn.idNum = element.id;
			btn.frame = element.frm;
			btn.inputEnabled = true;
			btn.events.onInputDown.add(self.btnFunc, this);
		});
	},

	btnFunc: function (sprite, event) {

		//console.log(sprite.idNum);

		/* this  works to change the one clicked
		if (sprite.frame == 0) {
			sprite.frame = 1;
			count++;
		} else {
			sprite.frame = 0;
			count--;
		};
		*/

		btnArray.forEach(function (element){
			//resets all back to zero before 
			element.frm = 0;
			//assigns new frame value to appropriate btns
			for (var i = 0; i < sprite.idNum; i++){
				this.btnArray[i].frm = 1;
			};
			//check to make sure values are changed and they are
		 	console.log(btnArray);
		 	//change btn frames visually

		});	
	},

	update: function(){

	},
},

game = new Phaser.Game(600, 400, Phaser.AUTO);

game.state.add('GameState', GameState);
game.state.start('GameState');

 

tF.js

btnSprtSht.png

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

  • Recently Browsing   0 members

    No registered users viewing this page.