Jump to content

Encode Every Pixel into Array Quickly


ItsYaBoiWesley
 Share

Recommended Posts

Hi!

I'm making a maze game which uses color based collision detection, for the sake of using image mazes easily. My player detects if there is black in front of it, if there is not it can walk in that direction, if there is it will be stopped.

Now I'm coding the enemy, using "easystarjs" for pathfinding. They require an array of walkable (white in my game) and non-walkable (black in my game) information. So, I thought of making a 2D array, which has a slot for every pixel. Using for loops, I would encode every pixel into its proper position on the array using either 1 (wall/black pixel) or 0 (not-wall/white pixel)

I come from a C++ background, so I didn't think how slooowwww this would be in JavaScript. Is there any faster way I can do what I'm trying to do? It's likely this will need to run in the game LOOP, because the player moves.

Link to comment
Share on other sites

https://www.w3schools.com/tags/canvas_getimagedata.asp

Running a map to turn that ImageData (per pixel) into a boolean array is pretty fast with modern js.  You probably only need to do it once on init?  When the Player moves that's unlikely needed in the pathfinding array (just the start position changes)?  If it is needed then make only the difference change(s).  But running pathfinding every loop is probably a bad idea anyway - do it less often - e.g. when the circumstances change.

Link to comment
Share on other sites

2 hours ago, b10b said:

https://www.w3schools.com/tags/canvas_getimagedata.asp

Running a map to turn that ImageData (per pixel) into a boolean array is pretty fast with modern js.  You probably only need to do it once on init?  When the Player moves that's unlikely needed in the pathfinding array (just the start position changes)?  If it is needed then make only the difference change(s).  But running pathfinding every loop is probably a bad idea anyway - do it less often - e.g. when the circumstances change.

Ok, cool! But how do I map the data from getImageData into an array?

Link to comment
Share on other sites

Oh, so I got down the pixel color thing. As in, I can get the pixel color of an X, Y, coordinate. But I need to get it into this format for the pathfinding library.

 

var grid = [[0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,0,0,0]];

 

That's what's giving me trouble. I've tried some iteration stuff but I'm confused. (Obviously this will be a much bigger array than the example)

Link to comment
Share on other sites

Sounds like a fun programming exercise ... translating a 1D array into a 2D array based on a fixed length row.  Keywords might be "array", "slice", "splice", "chunk".  Many ways to do it.

Or, given that it is a Boolean array, string expressions could be leveraged:

var _1d = [0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0];
var _2d = _1d.join('').match( /.{1,5}/g ).map( p_s => p_s.split('').map( Number ) );

This assumes a row width of 5.

But probably tidier to do directly from the ImageMapData where you already know the width.  Map!

Link to comment
Share on other sites

Using an array element for every single pixel may be an unnecessary inefficiency. Internally, I would divide the maze into cubes of pixels instead. Choose the largest cube size that guarantees all pixels within any given cube will have the same color. Feed a cube array to the pathfinder lib instead of a pixel array. A cube array will be WAY faster to build from ImageData (i.e., you only need to sample one ImageData pixel per cube), and the cube array will chew up WAY less RAM.

Link to comment
Share on other sites

Well, sorry guys! I've changed my entire system ? 

No longer doing color based collision detection, I am rather doing a more conventional system with a genuine tilemap, which is then translated into canvas visual output.

Thanks for all of the support, though! I hope someone in the future finds this helpful!

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...