mapping graphics to sprite when the graphics are dynamic

[ttymed]

Hello community!

I am currently writing a top-down game where I am using a phaser graphics to be a flashlight that acts as a mask for the ground.

I am rewriting the flashlight in the update function based on which direction the sprite I am using is moving in (the FLASHLIGHT...MAGIC_NUMBER is a constant that changes based on the movement direction).

this.maskGraphics.clear()
       this.maskGraphics.lineStyle(2, 0xffffff, 1)
       this.maskGraphics.beginFill(0xffff00)
       this.maskGraphics.moveTo(this.player.x,this.player.y)
        for (var i = 0; i < numberOfRays; i++) {
            var rayAngle = FLASHLIGHT_ANGLE_MAGIC_NUMBER - (lightAngle/2) + (lightAngle/numberOfRays) * i
            var lastX =this.player.x
            var lastY =this.player.y
            for (var j = 1; j <= rayLength; j++) {
                var landingX = Math.floor(this.player.x - (2 * j) * Math.cos(rayAngle))
                var landingY = Math.floor(this.player.y - (2 * j) * Math.sin(rayAngle))
            }
           this.maskGraphics.lineTo(landingX, landingY)
        }
        this.maskGraphics.endFill()

 

I'd like the flashlight to be able to have effects on other sprites in the game when it collides or overlaps them, so I created a sprite in the create function and tried to add the flashlight as a child in order to map the collision as a sprite.

        this.maskGraphics = this.game.add.graphics(0, 0)
        this.flashlight = this.game.add.sprite(0, 0)

        this.flashlight.anchor.setTo(0.5, 0.5)

        this.game.physics.enable(this.flashlight, Phaser.Physics.ARCADE)

        this.flashlight.addChild(this.maskGraphics)

 

However, I can't seem to register the collision between the two entities and the this.flashlight sprite and the graphics has a position of Phaser.Point(0, 0).  Does anyone happen to know why this is happening or how I can map the graphics to a sprite to be used for collisions in a better way?