How to create collision between Player & a simple 2d image texture of a tilemap on plane?

So I was wondering how to add collision between the Player & the tilemap if the tilemap is one solid image as a texture on a plane, rotated to the X-Axis of 90.0 degrees?

If you need more information, please do let me know & I will do my best to explain. I am currently creating a test level right now to put in this post so I will get back ASAP.

May I suggest just checking the vertical position of the player for this case? If collision with a ground plane is intended. If you mean some kind of collision with features of the image, then it’s another story. You will have to be more specific on the representation and needs in that case.

I need to collide with the tiles brought in from Phaser.

With features in the tiles, or with whole tiles? You need to be more specific if we are to be able to help you.

1 Like

@EliasHasle : What do you mean, features? Can you give me an example? I will do my best to explain. :slight_smile:

:slight_smile: Do you need collision-detection that depends on the exact content of image files, or only dependent on which image file it is?

@EliasHasle : :slight_smile: What is the difference if I may ask? I’d say exact content of image files.

For example: If a tile represents either grass or stone, you could do collision detection on “tile type”, but if a tile contains grass and stone, you may need collision detection on image content, which is significantly more demanding.

@EliasHasle yes, i need detection on grass AND stone. But if not, grass OR stone. I’d just be happy with that.

Can we assume that you already know the contents of the image, as well as the position of the image and the player in the same coordinate system?

@EliasHasle: What do you mean the contents of the image? Yes, I can get three.js’ player position.

EDIT : If by contents, you mean the width & the height & frame count, of course I do! :slight_smile:

I mean the colors of the pixels, if they matter to your collision detection.

@EliasHasle Yes :slight_smile:

I am working on something a bit similar for the time being (with partial success). In my case I have a height map, represented by an array. I decide a threshold value for collision (~the draft of a ship), and generate a corresponding Quadtree from the grid. Then I consider the object axis-aligned bounding rectangle of the ship and intersect it recursively against the quadtree using the separating axis theorem, see math - How to check intersection between 2 rotated rectangles? - Stack Overflow for a bunch of different implementations.

I cannot help you with the details. Just trying to point you in the right direction. :smiley:

@EliasHasle Can you please release an example of it?

No. Not now, anyway. Just try for yourself. You will need a custom collision criterion on the pixels etc.

My Quadtree implementation is similar to my Octree implementation, that you will find somewhere else on the forum.

1 Like

…? What? This does not make sense… I ask if there’s a small collision example & you start talking science-ese. ( lol :stuck_out_tongue: )

You asked me to make a collision example. I told you how to make one yourself.

No I did not. I asked how to create & / or where to find one.


What does “release” mean then?

Anyway, just an idea: why not use underlying map of collision for each tile? Like, one half of a tile is grass, the other one is stone (a wall), then underlying map will be half white (possible to move), half black (impossible to move), so if you know position of the sprite on the tile, check the respective collision map for the tile.