Jump to content

Collision Maps


Recommended Posts

I know I keep polluting this forum with my dumb questions.. BUT, what would be the easiest way to do a collision map not using tiles. I have seen some that make a solid color and tell the player they can't step into that color. I don't know how to get the color data for that so I was going to draw polygons and use ContainsPoint and kick the player out if he steps in or near and I couldn't figure out how to add points to a polygon already drawn so now I am running around the map and writing down my player location where I want my polygon points to be drawn and I felt stupid. More than usual. Who can shine the light for me?

Turns out a huge polygon doesn't know when it contains a sprite's point.

Link to comment
Share on other sites

You can draw the collision map to another canvas:

context.drawImage(collisionMap, 0,0, collisionMap.width, collisionMap.height);

and then read the data with:
pixels = context.getImageData(0,0, collisionMap.width, collisionMap.height).data;

The value you get is Uint8ClampedArray where each value is one color from image in RGBA order. So for example if you would like to know the color of the first pixel it would be:
red = pixels[0];
green = pixels[1];
blue = pixels[2];
alpha = pixels[3];

In game you could just then check collision like this:
var collides = pixels[ player.x + player.y*collisionMap.width ] > 0;

I'm assuming that 0 red channel marks movable and anything else is blocker.

Another option would be to use polygons to create colliders. This is better option if your collisions are dynamic, if they are static, map works great.

[Edit] You can use for example this to check if point is inside a polygon: https://github.com/substack/point-in-polygon

Link to comment
Share on other sites

You need to create new canvas and get context from that. The pixi context is either webgl/2d and what you need is 2d only.

var canvas = document.createElement("canvas");
canvas.width = collisionImage.width;
canvas.height = collisionImage.height;
var context = canvas.getContext("2d");

Link to comment
Share on other sites

I could not get any pixel data for red. 0's across the board for some reason. Its the defined red hex code and everything. I even tried a solid red image.

Luckily green's got my back and  var collides = pixels[ (player.x + player.y*collisionMap.width) + 1 ] > 0; seems to be working on the test run.

Thanks for the help.

Link to comment
Share on other sites

Well that only worked when the entire image was green. I'm guessing  var collides = pixels[ (player.x + player.y*collisionMap.width) + 1 ] > 0;  is not how you get the green pixels. is it?


 var collides = pixels[ (Player.sprite.x * 4) + (Player.sprite.y*collision.width * 4) + 1 ] > 0;


We got it. Close this mother before I come back.

Link to comment
Share on other sites

One small thing: canvas uses pre-multiplied alpha, and that is affecting bytes that you are receiving. For example, if alpha=0 then its not guaranteed that you'll get correct red, green and blue components for that pixel. If alpha=0.5 and red=127 then you might get red=126 or red=128, there's an error+-1. I hope you wont try to store something in RGB channels ;)

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.

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.


  • Recently Browsing   0 members

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