Gyldstrand Posted January 19, 2016 Share Posted January 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
Exca Posted January 19, 2016 Share Posted January 19, 2016 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 Quote Link to comment Share on other sites More sharing options...
Gyldstrand Posted January 19, 2016 Author Share Posted January 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
Exca Posted January 19, 2016 Share Posted January 19, 2016 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"); Quote Link to comment Share on other sites More sharing options...
Gyldstrand Posted January 19, 2016 Author Share Posted January 19, 2016 failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'; whyyyyy Quote Link to comment Share on other sites More sharing options...
Gyldstrand Posted January 19, 2016 Author Share Posted January 19, 2016 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.. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 19, 2016 Share Posted January 19, 2016 Because "The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)';" . Look at your first parameter. Quote Link to comment Share on other sites More sharing options...
Gyldstrand Posted January 19, 2016 Author Share Posted January 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
Gyldstrand Posted January 19, 2016 Author Share Posted January 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 20, 2016 Share Posted January 20, 2016 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.