Pushing rectangle into array and call it by name

[milkAwhat]

I'm stuck trying to get each grid square's properties through an array. My goal is to give each grid square a name location and call it by a name, but stuck at just at trying to call each grid through an array.

I thought I could push rectangle into an array and use a for loop to call each grid by this. Then, start to mess with other properties.

Calling the rectangle with an array does not work, but calling the rectangle graphic does. Having trouble troubleshooting this.

Below is my gridSetUp function.

	function gridSetUp(){
	var row;
	var col;
	var rowArr;
	var colArr;
	var fullGridRowArr = [];
	var fullGridColArr = [];
	var rowLength = 5;
	var colLength = 5;
	
		for(row = 0; row < rowLength; row++){
			for(col = 0; col < colLength; col++){
				var fullGridRect = new PIXI.Graphics();
				fullGridRect.beginFill(0xffffff, 0.25);
				fullGridRect.lineStyle(0.5, 0xFF0000, 1);
				fullGridRect.interactive = true; // new
				fullGridRect.hitArea = new PIXI.Rectangle(0, 0, 30, 30);
				fullGridRect.drawRect(0, 0, 30, 30);
				fullGridRect.endFill();
				fullGridRect.x = (fullGridRect.width + fullGridRect.x) * col;
				fullGridRect.y = (fullGridRect.height + fullGridRect.y) * row;
				fullGridRect.alpha = 0.5;
				stage.addChild(fullGridRect);
				
				fullGridRowArr.push(row);
				fullGridColArr.push(col);

// Works with shape by itself, but not when shape is pushed into array.

				// Make full grid interactive
				fullGridRect.interactive = true;	
				fullGridRowArr.interactive = true;	
				
				fullGridRowArr.click = function(mouseData){
        			//console.log('ROW : MOUSE CLICK SHAPE');
        			console.log(this.fullGridRowArr[row]);
    			};
				
				/* THIS WORKS BUT NOT THE ABOVE
				fullGridRect.click = function(mouseData){
        			console.log('MOUSE CLICK SHAPE');
    			};
				*/	
			}
		}	
	 	//Start the game loop
  		gameLoop();
	}

 

[ivan.popelyshev]

fullGridRowArr.interactive = true;

fullGridRowArr is an array, not a PIXI.Container. How do you think this can work?

Make it a container, add either add all row cells to it , either specify its hitArea. And it must be in stage, otherwise PIXI has no way of knowing that it even exists.

[milkAwhat]

Thanks ivan.popelyshev. 

I'll mess around with it and if I get stumped again I'll post up.

[milkAwhat]

ivan.popelyshev, I was overthinking the problem I was trying to solve. You cleared it up and gave me more information that will be useful.

	gridSetUp();
	

// Grid setup
	function gridSetUp(){
		var fullGridRect;
		var row;
		var col;
		var rowArr;
		var colArr;
		var getCell = [];
		var rowLength = 5;
		var colLength = 5;
	
		for(row = 0; row < rowLength; row++){
			for(col = 0; col < colLength; col++){
				fullGridRect = new PIXI.Graphics();
				fullGridRect.beginFill(0xffffff, 0.5);
				fullGridRect.lineStyle(0.5, 0xFF0000, 1);
				fullGridRect.interactive = true; // new
				fullGridRect.hitArea = new PIXI.Rectangle(0, 0, 30, 30);
				fullGridRect.drawRect(0, 0, 30, 30);
				fullGridRect.endFill();
				fullGridRect.x = (fullGridRect.width + fullGridRect.x) * col;
				fullGridRect.y = (fullGridRect.height + fullGridRect.y) * row;
				fullGridRect.alpha = 0.5;
				fullGridRect.interactive = true;	
				fullGridRect.on('click', onRectClick)
				getCell = [row+1, col+1];
				//console.log(getCell);
				fullGridRect.name =getCell;	
				stage.addChild(fullGridRect);
			}
		}	
	 	//Start the game loop
  		gameLoop();
	}

	function onRectClick(){
        console.log('MOUSE CLICK SHAPE');
		this.alpha = 0;
		console.log(this.name);
	}

 

[ivan.popelyshev]

I'm happy for you. Next time place @ before use handle: @milkAwhat

Also I recommend to create only one Graphics and cache in in the texture, that way PIXI will optimize it:

var rectGraphics = new PIXI.Graphics();

//create 30x30 rectangle HERE
//...

var texture = rectGraphics.generateTexture();

for for for {
   var spr = new Sprite(texture);
   spr.interactive=true; //sprite doesnt need hitArea, it knows its size!
   spr.alpha = 0.5;
   //do what you want
   //...
}

The thing is, Texture and Graphics are "heavy" objects, while "sprite" is lightweight, and PIXI knows how to effectively draw a lot of sprites.

If you need different colors, you can create multiple textures, or just use "tint" field in sprite or I dont know, there are many possibilities.