Collision Maps

[Gyldstrand]

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.

[Exca]

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

[Gyldstrand]

Every time I try to use / find the context, I get errors. I think it's a myth.

Tried renderPIXI.context.drawImage(collisionMap, 0,0, collisionMap.width, collisionMap.height); but the drawImage property is undefined. 

[Exca]

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

[Gyldstrand]

failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)';  

whyyyyy

[Gyldstrand]

Alright, I got to the  Uint8ClampedArray and everything worked but I think I was looking at a blank canvas. I used var img = new Image(); and then img.src = 'images/collisionMap.png'

Is that img.src right?

Tomorrow we'll be victorious. I can almost taste...Zzzzz..

[ivan.popelyshev]

Because "The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)';" . Look at your first parameter.

[Gyldstrand]

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.

[Gyldstrand]

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.

[ivan.popelyshev]

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