diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..96e5d4b Binary files /dev/null and b/images/background.png differ diff --git a/images/black_layer.png b/images/black_layer.png new file mode 100644 index 0000000..7407ef0 Binary files /dev/null and b/images/black_layer.png differ diff --git a/images/light-mask.png b/images/light-mask.png new file mode 100644 index 0000000..d1311a9 Binary files /dev/null and b/images/light-mask.png differ diff --git a/js/main.js b/js/main.js index 354b4eb..1b8747b 100644 --- a/js/main.js +++ b/js/main.js @@ -16,7 +16,7 @@ window.onload = () => { physics: { default: 'arcade', arcade: { - debug: true + debug: false } }, scene: [SceneMain] diff --git a/js/sceneMain.js b/js/sceneMain.js index 3bbbf40..1b0ebf6 100644 --- a/js/sceneMain.js +++ b/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() + } + }) + } + } } diff --git a/sound_effects/light_switch.mp3 b/sound_effects/light_switch.mp3 new file mode 100644 index 0000000..914dcb3 Binary files /dev/null and b/sound_effects/light_switch.mp3 differ