Forums » Help » TwoPointFive Pointer Entity Collisions

I'm using TwoPointFive and I'd like to detect when my pointer entity is over my enemy entities.

I have a Pointer entity that is bound to mouse.x and mouse.y and is drawn onto the HUD. What I'm stuck on is how to detect collisions or checks between my pointer entity and my enemy entities. I'm guessing I need to convert the input.mouse.x and y into the maps 3D space or my enemy entities pos.x and y into 2d space. Any tips where to start or how to do the conversion please?

If I understand correctly, your player should be moving around a 2D top-down level (behind the scenes). Maybe you could do a trace from the players position (point A) outward at whatever angle he is facing, to find the position of the nearest solid wall in front of him (point B). Points A and B together make a line. Enemy collision boxes are also made up of lines (4 of them: the top, right, bottom, and left). Now you can loop through all of the enemies and check if any of the sides intersect with the players line of sight. You may need to lookup how to find if two lines intersect.

Edit 1: Oops. Sorry, I just realized I read your question wrong. Not sure how to do what you are asking, off the top of my head...

Edit 2: Actually, I suppose my original response could work if you knew the FOV (Field of View) being used. For example, if the camera is showing 90 degrees, then you could modify the trace as follows:

Mouse on far left of screen:
trace from player outward at (player.angle - 45 degrees)
...
Mouse in middle of screen:
trace from player outward at (player.angle + 0 degrees)
...
Mouse on far right of screen:
trace from player outward at (player.angle + 45 degrees)

Thanks for your response Joncom!

At it&039;s core, I'm looking for a way to take a set of co-ordinates from the 2D viewport (so mouse x,y) to find out the corresponding co-ordinates in 3D space. This is so I can potentially trigger a #check by hovering over an entity with the mouse.

I think this is called unprojection (2D->3D) as it's the opposite of how projection works (3D->2D).
I found an [explanation]https://github.com/bringhurst/webgl-unproject.

I'll give it a shot but I have no idea if I'll be able to achieve this. I wanted to know if there's a simpler approach I can take utilising API already provided with the TwoPointFive plugin.

I thought about shooting an invisible entity out from the camera that spawns from a position based on the mouse co-ordinates, but I still need to translate those 2D co-ordinates to 3D space (pos.x, pos.y).

OK "hopefully" I'm making progress. I've included a JS port of `gluUnProject()` from here: https://github.com/bringhurst/webgl-unproject in my project and then I created a function that returns coordinates in 3D space for a near point (x,y,z) and far point (x,y,x) based on passed in 2D viewport coordinates (say mouse x,y). The idea being I can derive a line from the two endpoints (near to far) and check which entity intersects that line. I'm currently trying to figure out the intersection part of this now. Here's the function that gives me two endpoints in 3D space:

    viewPortToWorldCoordinates: function(x, y) {
       
        var viewportOriginX = 0.0;
        var viewportOriginY = 0.0;
        var viewportWidth   = this.canvas.width;
        var viewportHeight  = this.canvas.height;

       var viewportArray = [viewportOriginX, viewportOriginY, viewportWidth, viewportHeight];
        
        // The results of the operations will be stored in these arrays
        var nearPointResults = [];
        var farPointResults = [];

        var nearPoint = 0.0;
        var farPoint  = 1.0;
        
        var success = GLU.unProject(
        x, y, nearPoint, this.camera.view(), this.camera.projection(), viewportArray, nearPointResults);
        
        success = GLU.unProject(
        x, y, farPoint, this.camera.view(), this.camera.projection(), viewportArray, farPointResults);
        
        var res = {
			nearPoint: {x: nearPointResults[0], y: nearPointResults[1], z: nearPointResults[2]},
			farPoint: {x: farPointResults[0], y: farPointResults[1], z: farPointResults[2]},
            success: success,
		}
        return res;
    },