# How to create walls and rooms with Pixi

I'm a JS dev but pretty new to Pixi and 2D developemnt so please bear with me as I explain this.

I want to write a simulator for short path finding (for evacuation purposes). I decided to use Pixi.js for this since it seems capable of doing everything I need to do. I followed this tutorial to try to learn how Pixi works and if its right for this.

The tutorial didn't seem to answer many questions I have and I still have some confusion. Before I dive into writing the code, I want to know how wall detection in Pixi acheived.

Take the below map for example: It is a 800 x 800 png file (where everything but the blue is transparent[no grid lines]) that i can load into Pixi as a Sprite. I created it in Tiled editor. So it can be exported as a tilemap, JSON, CSV etc. When I export it as JSON, here is the file contents: https://pastebin.com/zGh1XmR7

The blue boxes represent walls. I want to load in other various sprite objects so that it will look like this:

The people in the simulations cannot cross the blue walls and they cannot cross the pink circles (they represent danger zones). I intend to use easystar.js to find the shortest path to exits for the people sprites in the map.

So my question is this, how does Pixi recognise the blue walls? Is it something I have to do when creating the tileset png? Like something defined in the JSON file for the tileset atlas? Maybe SVG? Or is there a pixi function to do this? Is this the best approach to doing this and is Pixi even the best way to do this?

I'm looking for a tried and tested solution or a pointer in the right direction.

• PIXI does not provide collision detection is exactly what i needed to know. Thanks for a clear statement. Oct 7 '18 at 0:10