From 869857d33c6db128d64418bcc88c09401435099b Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 7 Oct 2018 21:58:42 +0300 Subject: [PATCH] Fallback to wav if ogg is not supported, fix circles animation --- public/src/js/assets.js | 1 + public/src/js/circle.js | 9 +-- public/src/js/game.js | 5 +- public/src/js/loader.js | 127 ++++++++++++++++++++++------------------ public/src/js/view.js | 21 +++---- 5 files changed, 86 insertions(+), 77 deletions(-) diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 1b8e7e4..fb5fded 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -112,6 +112,7 @@ var assets = { "bgm_result.ogg", "bgm_setsume.ogg" ], + "audioOgg": "note_ka.ogg", "fonts": [ "Kozuka", "TnT" diff --git a/public/src/js/circle.js b/public/src/js/circle.js index 4ca8b9b..5ce4901 100644 --- a/public/src/js/circle.js +++ b/public/src/js/circle.js @@ -31,11 +31,9 @@ class Circle{ getLastFrame(){ return this.lastFrame } - incFrame(){ - this.lastFrame += 20 - } - animate(){ + animate(ms){ this.animating = true + this.animT = ms } isAnimated(){ return this.animating @@ -43,9 +41,6 @@ class Circle{ getAnimT(){ return this.animT } - incAnimT(){ - this.animT += 0.05 - } getPlayed(){ return this.isPlayed } diff --git a/public/src/js/game.js b/public/src/js/game.js index b06ddd5..17475d3 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -241,6 +241,7 @@ class Game{ this.globalScore.points += score } checkDrumroll(circle){ + var ms = this.elapsedTime var dai = circle.getType() === "daiDrumroll" var score = 100 circle.hit() @@ -252,14 +253,14 @@ class Game{ } var circleAnim = new Circle({ id: 0, - start: this.elapsedTime, + start: ms, type: sound, txt: "", speed: circle.speed, gogoTime: circle.gogoTime }) circleAnim.played(score, dai) - circleAnim.animate() + circleAnim.animate(ms) this.controller.view.drumroll.push(circleAnim) this.globalScore.drumroll++ this.globalScore.points += score * (dai ? 2 : 1) diff --git a/public/src/js/loader.js b/public/src/js/loader.js index 3da5613..f023177 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -11,29 +11,7 @@ class Loader{ this.screen.innerHTML = page this.loaderPercentage = document.querySelector("#loader .percentage") this.loaderProgress = document.querySelector("#loader .progress") - - assets.fonts.forEach(name => { - var font = document.createElement("h1") - font.style.fontFamily = name - font.appendChild(document.createTextNode("I am a font")) - this.assetsDiv.appendChild(font) - this.promises.push(new Promise((resolve, reject) => { - FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000}) - })) - }) - var fontDetectDiv = document.getElementById("fontdetectHelper") - fontDetectDiv.parentNode.removeChild(fontDetectDiv) - - assets.img.forEach(name => { - var id = this.getFilename(name) - var image = document.createElement("img") - this.promises.push(pageEvents.load(image)) - image.id = name - image.src = "/assets/img/" + name - this.assetsDiv.appendChild(image) - assets.image[id] = image - }) - + snd.buffer = new SoundBuffer() snd.musicGain = snd.buffer.createGain() snd.sfxGain = snd.buffer.createGain() @@ -48,46 +26,79 @@ class Loader{ ) snd.sfxLoudGain.setVolume(1.2) - assets.audioSfx.forEach(name => { - this.promises.push(this.loadSound(name, snd.sfxGain)) - }) - assets.audioMusic.forEach(name => { - this.promises.push(this.loadSound(name, snd.musicGain)) - }) - assets.audioSfxLR.forEach(name => { - this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => { + snd.buffer.load("/assets/audio/" + assets.audioOgg).then(() => { + this.oggNotSupported = false + }, () => { + this.oggNotSupported = true + }).then(() => { + + assets.fonts.forEach(name => { + var font = document.createElement("h1") + font.style.fontFamily = name + font.appendChild(document.createTextNode("I am a font")) + this.assetsDiv.appendChild(font) + this.promises.push(new Promise((resolve, reject) => { + FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000}) + })) + }) + var fontDetectDiv = document.getElementById("fontdetectHelper") + fontDetectDiv.parentNode.removeChild(fontDetectDiv) + + assets.img.forEach(name => { var id = this.getFilename(name) - assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL) - assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR) + var image = document.createElement("img") + this.promises.push(pageEvents.load(image)) + image.id = name + image.src = "/assets/img/" + name + this.assetsDiv.appendChild(image) + assets.image[id] = image + }) + + assets.audioSfx.forEach(name => { + this.promises.push(this.loadSound(name, snd.sfxGain)) + }) + assets.audioMusic.forEach(name => { + this.promises.push(this.loadSound(name, snd.musicGain)) + }) + assets.audioSfxLR.forEach(name => { + this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => { + var id = this.getFilename(name) + assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL) + assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR) + })) + }) + assets.audioSfxLoud.forEach(name => { + this.promises.push(this.loadSound(name, snd.sfxLoudGain)) + }) + + p2 = new P2Connection() + + this.promises.push(this.ajax("/api/songs").then(songs => { + assets.songs = JSON.parse(songs) })) + + assets.views.forEach(name => { + var id = this.getFilename(name) + this.promises.push(this.ajax("src/views/" + name).then(page => { + assets.pages[id] = page + })) + }) + + this.promises.forEach(promise => { + promise.then(this.assetLoaded.bind(this)) + }) + + Promise.all(this.promises).then(() => { + this.clean() + this.callback() + }, this.errorMsg.bind(this)) + }) - assets.audioSfxLoud.forEach(name => { - this.promises.push(this.loadSound(name, snd.sfxLoudGain)) - }) - - p2 = new P2Connection() - - this.promises.push(this.ajax("/api/songs").then(songs => { - assets.songs = JSON.parse(songs) - })) - - assets.views.forEach(name => { - var id = this.getFilename(name) - this.promises.push(this.ajax("src/views/" + name).then(page => { - assets.pages[id] = page - })) - }) - - this.promises.forEach(promise => { - promise.then(this.assetLoaded.bind(this)) - }) - - Promise.all(this.promises).then(() => { - this.clean() - this.callback() - }, this.errorMsg.bind(this)) } loadSound(name, gain){ + if(this.oggNotSupported && name.endsWith(".ogg")){ + name = name.slice(0, -4) + ".wav" + } var id = this.getFilename(name) return gain.load("/assets/audio/" + name).then(sound => { assets.sounds[id] = sound diff --git a/public/src/js/view.js b/public/src/js/view.js index 1a60f6f..e60a3f0 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -498,7 +498,7 @@ class View{ } }else if(!circle.isAnimated()){ // Start animation to HP bar - circle.animate() + circle.animate(ms) } if(ms >= circle.ms && !circle.gogoChecked){ if(this.gogoTime != circle.gogoTime){ @@ -507,10 +507,12 @@ class View{ circle.gogoChecked = true } if(circle.isAnimated()){ - var animationDuration = 470 - if(ms <= finishTime + animationDuration){ - var curveDistance = this.HPBarX + this.HPBarW - this.slotX - var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{ + var animT = circle.getAnimT() + var animationDuration = 400 + if(ms <= animT + animationDuration){ + var curveDistance = this.HPBarX + this.HPBarW - this.slotX - this.HPBarColH / 2 + var animPoint = (ms - animT) / animationDuration + var bezierPoint = this.calcBezierPoint(this.easeOut(animPoint), [{ x: this.slotX + this.circleSize * 0.4, y: this.circleY - this.circleSize * 0.8 }, { @@ -521,13 +523,9 @@ class View{ y: 0 }, { x: this.slotX + curveDistance, - y: this.HPbarColY + y: this.HPbarColY + this.HPBarColH / 2 }]) this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y}) - - // Update animation frame - circle.incAnimT() - circle.incFrame() } else{ circle.endAnimation() @@ -548,6 +546,9 @@ class View{ } return data[0] } + easeOut(pos){ + return Math.sin(Math.PI / 2 * pos) + } drawCircle(circle, circlePos){ var z = this.canvas.scale var fill, size, faceID