Sign in to follow this  
Schoening

Detect Click on Tiles.

Recommended Posts

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

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.