2
\$\begingroup\$

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

enter image description here

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

enter image description here

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.

\$\endgroup\$
2
\$\begingroup\$

From my understanding, PIXI doesn't recognize the blue walls. Your blue walls are really just one big rectangle (a sprite), so you can detect collisions between your characters and the map itself, but not individual walls within the map.

A better approach would be to draw your walls using PIXI's graphics primitives (as lines). Then you'll have the coordinates and dimensions of individual walls.

For the actual collision detection, you'll need to use the coordinates and dimensions of both elements (a given character and a given wall) to see if they have "collided" and if so, prevent further movement of the character in that wall's direction.

PIXI does not provide collision detection.

\$\endgroup\$
2
  • \$\begingroup\$ Yeah I figured this out too. I ended up using PIXI.Graphics to draw walls, each block a rectangle. It's a bit memory intensive so I ended up using block sprites instead. thanks though \$\endgroup\$ Aug 17 '18 at 9:02
  • \$\begingroup\$ PIXI does not provide collision detection is exactly what i needed to know. Thanks for a clear statement. \$\endgroup\$
    – monsto
    Oct 7 '18 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.