Detect Click on Tiles.

[Schoening]

Hey, trying out the mouse click functions of Pixi.js

 

It is great for single sprites, but what about a generated tilemap ?

 

In this example I only detect the click on tile 5,5.

Since I am going to use a Pathfinder from tile A to B, am I best of just adding event listeners for every single tile this way?

 

        // Spawn Tiles based on the Map Array:        for(var x = 0; x < map.length; x++){         for(var y = 0; y < map[x].length; y++){         map[x][y] = new PIXI.Sprite(sandTile);         // center the sprites anchor point                map[x][y].anchor.x = 0.5;                map[x][y].anchor.y = 0.5;                // move the sprite t the center of the screen                map[x][y].position.x = x * map_tile_size + map_offset_x;                map[x][y].position.y = y * map_tile_size;         stage.addChild(map[x][y]);         map[x][y].setInteractive(true);         }        }map[5][5].mousedown = function(mouseData){   console.log("MOUSE DOWN!");} 

 

 

[Schoening]

Another way I can think of is Iterating the map Array 30 times + per second and check map[x][y].mousedown

[Schoening]

But  I think that would create a lot of irritating Garbage Collection

[Schoening]

This is my current Idea:

 

(EDIT: Since the clicks are based on callbacks this does not work as I hoped)

function click_loop(){	for(var x = 0, len = map.length; x < len; x++){		for(var y = 0; y < map[x].length; y++){			map[x][y].mousedown = function(mouseData){                console.log("MOUSE DOWN!");            }		}	}	setTimeout(function(){		click_loop()	},10);}click_loop();

[floatdrop]

May be you can drop all tiles in DisplayObjectContainer and make it interactive (I have doubts about it, because I saw issue about making interactive any displayobject). If that works, you can compute index in array from coordinates. Give it a try.

[Schoening]

Hm.. but what is the point of "drop all tiles in ..." if I compute from the cordinates ?

[Schoening]

Look what I am doing! Arrrg! This is so WRONG ! xD

 

[ReinVO]

When someone clicks, you can also get the tile he was clicking on by dividing the mouse x & y coordinates with the tilesize.

 

Example:

 

If a user clicks on the screen at these coordinates: 254 x 897

We can then get the tile by doing something like this:

 

var tilesize = 20;var x = Math.floor( 254 / tilesize );var y = Math.floor( 897 / tilesize );var clicked_tile = map[ x ][ y ];

 

I hope this helps! Good luck!

[Schoening]

Yeah Thx

But that sort of defeats the point of the whole Pixi.js feature doesnt it :s

[floatdrop]

Hm.. but what is the point of "drop all tiles in ..." if I compute from the cordinates ?

 

I bet you eventually want to scroll the tiles.  

[Schoening]

Not sure what you mean!

[ReinVO]

Yeah Thx

But that sort of defeats the point of the whole Pixi.js feature doesnt it :s

 

You could catch the click on the container element where all the tiles are added to, which imo is valid use of the PIXI.js feature. As floatdrop already pointed out, you can also reposition this container for scrolling the tiles.

 

Too make it short: you don't want to add a click to the tiles one by one, neither do you want to reposition the tiles one by one. Use a container.

[Ezelia]

Yeah Thx

But that sort of defeats the point of the whole Pixi.js feature doesnt it :s

 

for me, Pixi interactive object are more for buttons or simple interactivity, if you want complexe interactivity that'll imply lot of Pixi interactive objects, it's better to use ReinVO solution, you'll get better performances.

[Schoening]

I see.

Hm.. Is there any example that uses the Container?

 

 

For now I have "improved" the script, making it a lot shorter this way:

 

        for(var x = 0; x < map.length; x++){        	for(var y = 0; y < map[x].length; y++){        		if(map[x][y] === S){        		    map[x][y] = new PIXI.Sprite(sandTile);        		    // center the sprites anchor point                    map[x][y].anchor.x = 0.5;                    map[x][y].anchor.y = 0.5;                    // move the sprite t the center of the screen                    map[x][y].position.y = x * map_tile_size + map_offset;                    map[x][y].position.x = y * map_tile_size + map_offset;        		    stage.addChild(map[x][y]);        		    map[x][y].setInteractive(true);        		    map[x][y].mousedown = function(mouseData){    	                console.log("Hi");                    }        		}        	}        }

 

But I would like to learn how to do the Container Solution now