Room lighting sort of working

js/main.js

@@ -16,7 +16,7 @@ window.onload = () => {
         physics: {
             default: 'arcade',
             arcade: {
-                debug: true
+                debug: false
             }
         },
         scene: [SceneMain]

js/sceneMain.js

@@ -3,29 +3,30 @@ class SceneMain extends Phaser.Scene {
     constructor() {
         super('SceneMain');
     }
-
     preload() {
+        // Images
         this.load.image('hero', 'images/hero.png');
-        this.load.image('door', 'images/door.png');
+        this.load.image('star', 'images/star.png')
+        this.load.image('background', 'images/background.png')
+        this.load.image('foreground', 'images/black_layer.png')
+        this.load.image('mask', 'images/light-mask.png')
+		this.load.image('door', 'images/door.png');
         this.load.image('light', 'images/light.png');
         this.load.image('wall', 'images/wall.png');
 
+        // Sound effects
+        this.load.audio('lightSwitch', 'sound_effects/light_switch.mp3')
     }
 
     create() {
+        var background = this.add.image(0, 0, 'background')
+        background.scaleX = this.game.config.width / background.scaleX 
+        background.scaleY = this.game.config.height / background.scaleY 
+
         // vars to set obj in the center of the game screen
         this.centerX = this.game.config.width/2;
         this.centerY = this.game.config.height/2;
 
-        // placing light 'switch' on screen
-        this.lightswitch = this.physics.add.sprite(50, 50, 'star');
-
-
-        //CREATE ALL ASSETS ABOVE THIS LINE
-
-        // Darkness rectangle
-
-
         // placing sprites in the center of the screen
         this.hero = this.physics.add.sprite(this.centerX, this.centerY, 'hero');
         this.door = this.physics.add.sprite(this.centerX, this.centerY, 'door');
@@ -78,14 +79,41 @@ class SceneMain extends Phaser.Scene {
                 count++;
             })
         })
+
+        //CREATE ALL ASSETS ABOVE THIS LINE
+
+        // Darkness rectangle
+        this.foreground = this.add.image(0, 0, 'foreground')
+        this.foreground.scaleX = this.game.config.width / this.foreground.scaleX
+        this.foreground.scaleY = this.game.config.height / this.foreground.scaleY
+
+        this.spotlight = this.make.sprite({
+            x: 300,
+            y: 300,
+            key: 'mask',
+            add: false
+        });
+        this.spotlight.alpha = 0
+
+        this.foreground.mask = new Phaser.Display.Masks.BitmapMask(this, this.spotlight)
+        this.foreground.mask.invertAlpha = true
+        this.foreground.mask.bitmapMask.scale = 3
+
         // Attention future people - do this for a dynamic group of sprites with collision
         this.physics.add.collider(this.wallGroup, this.hero)
 
+        // placing light 'switch' on screen
+        this.lightswitch = this.physics.add.sprite(50, 50, 'star');
+
         // Lightswitch scale and initial alpha
         this.lightswitch.setScale(2);
-        this.setLightToAlpha(this.distanceFromHero(this.lightswitch), 250)
+        this.setLightToAlpha(this.distanceFromHero(this.lightswitch), 200)
 
 
+        this.physics.add.overlap(this.hero, this.lightswitch, () => this.turnOnLight(), null, this);
+        this.pressedLightSwitch = false
+
+        this.lightSwitchSound = this.sound.add('lightSwitch')
     }
 
     update() {
@@ -107,15 +135,20 @@ class SceneMain extends Phaser.Scene {
 
         // If moving diagonally, limit the speed to the same as if you were moving along only one axis
         if(this.hero.body.velocity.x && this.hero.body.velocity.y) {
-
-
             this.hero.body.velocity.x *= Math.SQRT1_2
             this.hero.body.velocity.y *= Math.SQRT1_2
         }
 
         // If hero is moving in any direction
         if (this.hero.body.velocity.x || this.hero.body.velocity.y) {
-            this.setLightToAlpha(this.distanceFromHero(this.lightswitch), 250)
+            let distance = this.distanceFromHero(this.lightswitch)
+            this.setLightToAlpha(distance, 200)
+            this.foreground.mask.bitmapMask.x = this.hero.x
+            this.foreground.mask.bitmapMask.y = this.hero.y
+            if (this.pressedLightSwitch && distance > 65) {
+                // this.pressedLightSwitch = false
+                this.turnOffLight({onDuration: 10000})
+            }
         }
     }
 
@@ -124,7 +157,7 @@ class SceneMain extends Phaser.Scene {
         let xCoord = Math.abs(el.body.x - this.hero.body.x)
         let yCoord = Math.abs(el.body.y - this.hero.body.y)
 
-        return xCoord + yCoord
+        return Math.sqrt(xCoord**2 + yCoord**2)
     }
 
     setLightToAlpha(distance, scale) {
@@ -135,4 +168,39 @@ class SceneMain extends Phaser.Scene {
         this.lightswitch.alpha = alpha
     }
 
+    turnOnLight(options = {}) {
+        let onDuration = 10000
+        if ('onDuration' in options) {
+            onDuration = options.onDuration
+        }
+        if (!this.pressedLightSwitch) {
+            this.lightSwitchSound.play()
+            this.tweens.add({
+                targets: this.spotlight,
+                alpha: 1,
+                duration: 500,
+                ease: 'Sine.easeIn'
+            });
+            this.pressedLightSwitch = true
+        }
+    }
+
+    turnOffLight(options = {}) {
+        let onDuration = 10000
+        if ('onDuration' in options) {
+            onDuration = options.onDuration
+        }
+        if (!this.pressingLightSwitch) {
+            this.tweens.add({
+                targets: this.spotlight,
+                alpha: 0,
+                duration: onDuration,
+                ease: 'Quart.easeIn',
+                onComplete: () => {
+                    this.pressedLightSwitch = false
+                    this.lightSwitchSound.play()
+                }
+            })
+        }
+    }
 }