Mask over sprites

Phaser 3
1

Hey all, I’m trying to do raycasting to setup a torch effect which I have gotten working but for the life of me I cannot figure out how to get my sprites to not be visable over the mask… Admittedly I’m not entirely sure how everything works… This is my first project. Could anyone give me some pointers?

Screenshot

import Phaser from "phaser";

const config = {

  type: Phaser.WEBGL,

  parent: "phaser-example",

  width: 800,

  height: 600,

  physics:{

    default: "arcade",

    arcade: {

      debug: false

    }

  },

  scene: {

    preload: preload,

    create: create,

    update: update

  }

};

var game = new Phaser.Game(config);

const lightAngle = Math.PI/2.4;

const numberOfRays = 70;

const rayLength = 150;

const line = new Phaser.Geom.Line();

function preload() {

  this.load.image("floor","assets/floor.png");

  this.load.image("wall","assets/walls.png");

  this.load.image("cover","assets/cover.png");

  this.load.image("spotlight","assets/spotlight.png");

  this.load.setPath('assets/');

  this.load.multiatlas('spp','sprites.json');

  this.load.tilemapTiledJSON('map', 'level1.json');

}

function create() {

  const map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });

  const tileset = map.addTilesetImage('walls', 'wall');

  this.platforms = map.createStaticLayer('Platforms', tileset, 0, 0);

  this.platforms.setCollisionByExclusion(-1,true);

  this.reveal = this.add.image(800, 600,'floor');

  this.player = this.physics.add.sprite(100,50,'spp','OfficeGirl1_front_0.png');

  this.player.setCollideWorldBounds(true);

  this.physics.add.collider(this.player, this.platforms);

  this.zombie = this.physics.add.sprite(350,350,'spp','OfficeZom1_front_0.png');

  this.zombie.setCollideWorldBounds(true);

  this.physics.add.collider(this.zombie, this.platforms);

  this.cover = this.add.image(800, 600, 'cover').setOrigin(0, 0);  

  const width = this.cover.width

  const height = this.cover.height

  const x = 400;

  const y = 300;

  const rt = this.make.renderTexture({

    width,

    height,

    add: false

  })

  const maskImage = this.make.image({

    x,

    y,

    key: rt.texture.key,

    add: false

  })

  this.reveal.mask = new Phaser.Display.Masks.BitmapMask(this, maskImage)

  this.cover.mask = new Phaser.Display.Masks.BitmapMask(this, maskImage);

  this.cover.mask.invertAlpha = true;

  this.maskGraphics = this.add.graphics();

  this.maskGraphics.visible = false;

  this.cursors = this.input.keyboard.createCursorKeys();

  this.input = this.input;

  this.renderTexture = rt

}

function update() {

  this.player.setVelocityX(0);

  this.player.setVelocityY(0);

  if (this.cursors.left.isDown) {

    this.player.setVelocityX(-200);

  }

  if (this.cursors.right.isDown) {

    this.player.setVelocityX(200);

  }

  if (this.cursors.up.isDown) {

    this.player.setVelocityY(-200);

  }

  if (this.cursors.down.isDown) {

    this.player.setVelocityY(200);

  }

  

  this.maskGraphics.clear();

  this.maskGraphics.beginPath();

  this.maskGraphics.lineStyle(10, 0xFFFFFF, 1);

  this.maskGraphics.moveTo(this.player.x,this.player.y);  

  let lastX,lastY;

  let mouseAngle = Phaser.Math.Angle.Between(this.input.x,this.input.y,this.player.x,this.player.y)

  

  for(var i = 0; i<=numberOfRays; i++){ 

    var rayAngle = mouseAngle-(lightAngle/2)+(lightAngle/numberOfRays)*i

    for(var j= 1; j<=rayLength;j+=1){

      var landingX = Math.round(this.player.x-(2*j)*Math.cos(rayAngle))

      var landingY = Math.round(this.player.y-(2*j)*Math.sin(rayAngle))

      line.setTo(this.player.x,this.player.y,landingX, landingY)

      var tiles = this.platforms.hasTileAtWorldXY(landingX-1,landingY-1)

      if(!tiles){

        lastX = landingX

        lastY = landingY  

      }else{

        break;

      }

      this.maskGraphics.lineTo(lastX,lastY)

    }

  }

  this.maskGraphics.lineTo(this.player.x,this.player.y); 

  this.maskGraphics.closePath();

  this.maskGraphics.strokePath();

  

  this.reveal.alpha = 0.3+Math.random()*0.4;

  this.renderTexture.clear()

  this.renderTexture.draw(this.maskGraphics,0, 0)

}