From 1ba3bd1492e08fadeee34c852922d703f276d9b0 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Sat, 13 Oct 2018 09:41:37 -0700 Subject: [PATCH] initial wall sound effect --- package-lock.json | 5 +++++ package.json | 1 + src/components/song.js | 36 ++++++++++++++++++++++++++---------- src/components/wall.js | 6 ++++-- src/index.html | 11 ++++++++++- src/index.js | 1 + src/state/index.js | 1 + 7 files changed, 48 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fa4453..abf7a0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,6 +91,11 @@ "webvr-polyfill": "^0.10.5" } }, + "aframe-aabb-collider-component": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/aframe-aabb-collider-component/-/aframe-aabb-collider-component-2.2.1.tgz", + "integrity": "sha512-DejvmaP+1Em660oMEPU8C4SYmiRkn7bpq0ttBwqw/N3In8/QODI2S1RYuJHEkZWde6XCfAiSuBpOBcRTnbSn/w==" + }, "aframe-atlas-uvs-component": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.0.0.tgz", diff --git a/package.json b/package.json index 0546447..12009b8 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000" }, "dependencies": { + "aframe-aabb-collider-component": "^2.2.1", "aframe-atlas-uvs-component": "^2.0.0", "aframe-audioanalyser-component": "^5.1.0-beta", "aframe-event-decorators": "^1.0.2", diff --git a/src/components/song.js b/src/components/song.js index c00a9c4..a769ca5 100644 --- a/src/components/song.js +++ b/src/components/song.js @@ -1,6 +1,6 @@ const utils = require('../utils'); -var once = {once: true}; +var ONCE = {once: true}; var BASE_VOLUME = 0.75; /** @@ -27,14 +27,9 @@ AFRAME.registerComponent('song', { this.audioAnalyser.gainNode.gain.value = BASE_VOLUME; // Restart, get new buffer source node and play. - this.el.addEventListener('pausemenurestart', () => { - this.source.disconnect(); - this.data.analyserEl.addEventListener('audioanalyserbuffersource', evt => { - this.source = evt.detail; - if (this.data.isBeatsPreloaded) { this.source.start(); } - }, once); - this.audioAnalyser.refreshSource(); - }); + this.el.addEventListener('pausemenurestart', this.onRestart.bind(this)); + this.el.addEventListener('wallhitstart', this.onWallHitStart.bind(this)); + this.el.addEventListener('wallhitend', this.onWallHitEnd.bind(this)); }, update: function (oldData) { @@ -94,7 +89,7 @@ AFRAME.registerComponent('song', { this.source = evt.detail; this.source.onended = this.victory; resolve(this.source); - }, once); + }, ONCE); this.analyserSetter.src = utils.getS3FileUrl(data.challengeId, 'song.ogg'); data.analyserEl.setAttribute('audioanalyser', this.analyserSetter); this.audioAnalyser.xhr.addEventListener('progress', evt => { @@ -122,5 +117,26 @@ AFRAME.registerComponent('song', { const progress = evt.loaded / evt.total; this.songLoadingIndicator.setAttribute( 'geometry', 'thetaLength', progress * 360); + }, + + onRestart: function () { + if (this.source) { this.source.disconnect(); } + this.data.analyserEl.addEventListener('audioanalyserbuffersource', evt => { + this.source = evt.detail; + if (this.data.isBeatsPreloaded) { this.source.start(); } + }, ONCE); + this.audioAnalyser.refreshSource(); + }, + + onWallHitStart: function () { + const gain = this.audioAnalyser.gainNode.gain; + gain.linearRampToValueAtTime(0.2, this.context.currentTime + 0.1); + this.source.detune.linearRampToValueAtTime(-1000, this.context.currentTime + 0.1); + }, + + onWallHitEnd: function () { + const gain = this.audioAnalyser.gainNode.gain; + gain.linearRampToValueAtTime(BASE_VOLUME, this.context.currentTime + 0.2); + this.source.detune.linearRampToValueAtTime(0, this.context.currentTime + 0.2); } }); diff --git a/src/components/wall.js b/src/components/wall.js index 7d644b7..1fd58db 100644 --- a/src/components/wall.js +++ b/src/components/wall.js @@ -9,21 +9,23 @@ AFRAME.registerComponent('wall', { pause: function () { this.el.object3D.visible = false; + this.el.removeAttribute('collidable'); }, play: function () { this.el.object3D.visible = true; + this.el.setAttribute('collidable', ''); }, tock: function (time, delta) { this.el.object3D.position.z += this.data.speed * (delta / 1000); - this.returnToPool(); + if (this.el.object3D.position.z > this.maxZ) { this.returnToPool(); } }, returnToPool: function () { - if (this.el.object3D.position.z < this.maxZ) { return; } this.el.sceneEl.components.pool__wall.returnEntity(this.el); this.el.object3D.position.z = 9999; this.el.pause(); + this.el.removeAttribute('collidable'); }, }); diff --git a/src/index.html b/src/index.html index eb64277..741dfe6 100644 --- a/src/index.html +++ b/src/index.html @@ -143,7 +143,16 @@ material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false" sub-object="from: #cursorLaser; name: glow"> - + + + {% macro saber (hand, otherHand, bladeColor, beamColor) %}