CanvasAsset: Change animation speed with bpm changes

public/src/js/canvasasset.js

@@ -7,6 +7,7 @@ class CanvasAsset{
 		this.speed = 1000 / 60
 		this.animationStart = 0
 		this.layer = layer
+		this.beatInterval = 468.75
 	}
 	draw(){
 		if(this.animation){
@@ -14,13 +15,13 @@ class CanvasAsset{
 			var frame = 0
 			var ms = this.controller.getElapsedTime()
 			if(this.animationEnd){
-				if(ms > this.animationEnd.ms){
+				if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * this.beatInterval){
 					this.animationEnd.callback()
-					delete this.animationEnd
+					this.animationEnd = false
 					return this.draw()
 				}
 			}
-			var index = Math.floor((ms - this.animationStart) / this.speed)
+			var index = Math.floor((ms - this.animationStart) / (this.speed * this.beatInterval))
 			if(Array.isArray(this.animation)){
 				frame = this.animation[this.mod(this.animation.length, index)]
 			}else{
@@ -80,14 +81,21 @@ class CanvasAsset{
 	setAnimationStart(ms){
 		this.animationStart = ms
 	}
-	setAnimationEnd(ms, callback){
-		if(typeof ms === "undefined"){
-			delete this.animationEnd
+	setAnimationEnd(frameCount, callback){
+		if(typeof frameCount === "undefined"){
+			this.animationEnd = false
 		}else{
 			this.animationEnd = {
-				ms: ms,
+				frameCount: frameCount,
 				callback: callback
 			}
 		}
 	}
+	changeBeatInterval(beatMS, initial){
+		var ms = this.controller.getElapsedTime()
+		if(!initial){
+			this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS
+		}
+		this.beatInterval = beatMS
+	}
 }

public/src/js/circle.js

@@ -18,6 +18,7 @@ class Circle{
 		this.rendaPlayed = false
 		this.gogoTime = config.gogoTime
 		this.gogoChecked = false
+		this.beatMS = config.beatMS
 	}
 	getMS(){
 		return this.ms

public/src/js/game.js

@@ -3,7 +3,7 @@ class Game{
 		this.controller = controller
 		this.selectedSong = selectedSong
 		this.songData = songData
-		this.elapsedTime = {}
+		this.elapsedTime = 0
 		this.currentCircle = 0
 		this.combo = 0
 		this.rules = new GameRules(this)
@@ -38,6 +38,7 @@ class Game{
 	run(){
 		this.timeForDistanceCircle = 2500
 		this.initTiming()
+		this.view = this.controller.view
 	}
 	initTiming(){
 		// Date when the chrono is started (before the game begins)
@@ -75,6 +76,12 @@ class Game{
 							this.controller.playSound("renda")
 						}
 					}
+					if(!circle.beatMSCopied){
+						if(this.view.beatInterval !== circle.beatMS){
+							this.view.changeBeatInterval(circle.beatMS)
+						}
+						circle.beatMSCopied = true
+					}
 				}
 				if(ms > endTime){
 					if(!this.controller.autoPlayEnabled){
@@ -260,7 +267,7 @@ class Game{
 		})
 		circleAnim.played(score, dai)
 		circleAnim.animate(ms)
-		this.controller.view.drumroll.push(circleAnim)
+		this.view.drumroll.push(circleAnim)
 		this.globalScore.drumroll++
 		this.globalScore.points += score * (dai ? 2 : 1)
 	}
@@ -373,7 +380,7 @@ class Game{
 		if(this.combo === 50 || this.combo > 0 && this.combo % 100 === 0 && this.combo <= 1400){
 			this.controller.playSoundMeka("combo-" + this.combo)
 		}
-		this.controller.view.updateCombo(this.combo)
+		this.view.updateCombo(this.combo)
 	}
 	getCombo(){
 		return this.combo

public/src/js/parseosu.js

@@ -131,7 +131,8 @@ class ParseOsu{
 				start: start + this.offset,
 				sliderMultiplier: sliderMultiplier,
 				measure: parseInt(values[this.osu.METER]),
-				gogoTime: parseInt(values[this.osu.KIAIMODE])
+				gogoTime: parseInt(values[this.osu.KIAIMODE]),
+				beatMS: 1000 / this.difficulty.lastMultiplier
 			})
 		}
 		return timingPoints
@@ -242,6 +243,7 @@ class ParseOsu{
 			var hitSound = parseInt(values[this.osu.HITSOUND])
 			var beatLength = speed
 			var lastMultiplier = this.difficulty.lastMultiplier
+			var beatMS = this.beatInfo.beatInterval
 			if(circleID === 1 && start + this.offset < 0){
 				var offset = start + this.offset
 				this.soundOffset = offset
@@ -249,11 +251,13 @@ class ParseOsu{
 			}
 			
 			for(var j = 0; j < this.timingPoints.length; j++){
-				if(this.timingPoints[j].start - this.offset > start){
+				var timingPoint = this.timingPoints[j]
+				if(timingPoint.start - this.offset > start){
 					break
 				}
-				speed = this.timingPoints[j].sliderMultiplier
-				gogoTime = this.timingPoints[j].gogoTime
+				speed = timingPoint.sliderMultiplier
+				gogoTime = timingPoint.gogoTime
+				beatMS = timingPoint.beatMS
 			}
 			
 			if(osuType & this.osu.SPINNER){
@@ -269,7 +273,8 @@ class ParseOsu{
 					speed: speed,
 					endTime: endTime + this.offset,
 					requiredHits: requiredHits,
-					gogoTime: gogoTime
+					gogoTime: gogoTime,
+					beatMS: beatMS
 				}))
 				
 			}else if(osuType & this.osu.SLIDER){
@@ -294,7 +299,8 @@ class ParseOsu{
 					txt: txt,
 					speed: speed,
 					endTime: endTime + this.offset,
-					gogoTime: gogoTime
+					gogoTime: gogoTime,
+					beatMS: beatMS
 				}))
 				
 			}else if(osuType & this.osu.CIRCLE){
@@ -327,7 +333,8 @@ class ParseOsu{
 						type: type,
 						txt: txt,
 						speed: speed,
-						gogoTime: gogoTime
+						gogoTime: gogoTime,
+						beatMS: beatMS
 					}))
 				}
 			}else{

public/src/js/parsetja.js

@@ -174,7 +174,8 @@
 							speed: note.bpm * note.scroll / 60,
 							gogoTime: note.gogo,
 							endTime: note.endTime,
-							requiredHits: note.requiredHits
+							requiredHits: note.requiredHits,
+							beatMS: 60000 / note.bpm
 						})
 						if(lastDrumroll === note){
 							lastDrumroll = circleObj

public/src/js/view.js

@@ -804,7 +804,7 @@ class View{
 				fireworksAsset.setAnimation("normal")
 				fireworksAsset.setAnimationStart(circle.ms)
 				var length = fireworksAsset.getAnimationLength("normal")
-				fireworksAsset.setAnimationEnd(circle.ms + length * fireworksAsset.speed, () => {
+				fireworksAsset.setAnimationEnd(length, () => {
 					fireworksAsset.setAnimation(false)
 				})
 			})
@@ -812,11 +812,11 @@ class View{
 			var don = this.assets.don
 			don.setAnimation("gogostart")
 			var length = don.getAnimationLength("gogo")
-			don.setUpdateSpeed(this.beatInterval / (length / 4))
+			don.setUpdateSpeed(4 / length)
 			var start = circle.ms - (circle.ms % this.beatInterval)
 			don.setAnimationStart(start)
 			var length = don.getAnimationLength("gogostart")
-			don.setAnimationEnd(start + length * don.speed, don.normalAnimation)
+			don.setAnimationEnd(length, don.normalAnimation)
 		}
 	}
 	drawGogoTime(){
@@ -856,9 +856,9 @@ class View{
 			var ms = this.controller.getElapsedTime()
 			don.setAnimationStart(ms)
 			var length = don.getAnimationLength("normal")
-			don.setUpdateSpeed(this.beatInterval / (length / 4))
+			don.setUpdateSpeed(4 / length)
 			var length = don.getAnimationLength("10combo")
-			don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
+			don.setAnimationEnd(length, don.normalAnimation)
 		}
 	}
 	drawTouch(){
@@ -940,6 +940,10 @@ class View{
 			}
 		}
 	}
+	changeBeatInterval(beatMS){
+		this.beatInterval = beatMS
+		this.assets.changeBeatInterval(beatMS)
+	}
 	clean(){
 		pageEvents.mouseRemove(this)
 		if(this.controller.multiplayer === 2){

public/src/js/viewassets.js

@@ -3,7 +3,6 @@ class ViewAssets{
 		this.view = view
 		this.controller = this.view.controller
 		this.allAssets = []
-		this.beatInterval = this.view.beatInterval
 		this.ctx = this.view.ctx
 		
 		this.don = this.createAsset("background", frame => {
@@ -40,17 +39,17 @@ class ViewAssets{
 		this.don.normalAnimation = () => {
 			if(this.view.gogoTime){
 				var length = this.don.getAnimationLength("gogo")
-				this.don.setUpdateSpeed(this.beatInterval / (length / 4))
+				this.don.setUpdateSpeed(4 / length)
 				this.don.setAnimation("gogo")
 			}else if(this.controller.getGlobalScore().gauge >= 50){
 				this.don.setAnimationStart(0)
 				var length = this.don.getAnimationLength("clear")
-				this.don.setUpdateSpeed(this.beatInterval / (length / 2))
+				this.don.setUpdateSpeed(2 / length)
 				this.don.setAnimation("clear")
 			}else{
 				this.don.setAnimationStart(0)
 				var length = this.don.getAnimationLength("normal")
-				this.don.setUpdateSpeed(this.beatInterval / (length / 4))
+				this.don.setUpdateSpeed(4 / length)
 				this.don.setAnimation("normal")
 			}
 		}
@@ -87,7 +86,7 @@ class ViewAssets{
 			}
 		})
 		this.fire.addFrames("normal", 7, "fire_anim")
-		this.fire.setUpdateSpeed(this.beatInterval / 8)
+		this.fire.setUpdateSpeed(1 / 8)
 		this.fireworks = []
 		for(let i = 0; i < 5 ; i++){
 			var fireworksAsset = this.createAsset("foreground", frame => {
@@ -108,9 +107,10 @@ class ViewAssets{
 				}
 			})
 			fireworksAsset.addFrames("normal", 30, "fireworks_anim")
-			fireworksAsset.setUpdateSpeed(this.beatInterval / 16)
+			fireworksAsset.setUpdateSpeed(1 / 16)
 			this.fireworks.push(fireworksAsset)
 		}
+		this.changeBeatInterval(this.view.beatInterval, true)
 	}
 	createAsset(layer, position){
 		var asset = new CanvasAsset(this.view, layer, position)
@@ -126,4 +126,9 @@ class ViewAssets{
 			})
 		}
 	}
+	changeBeatInterval(beatMS, initial){
+		this.allAssets.forEach(asset => {
+			asset.changeBeatInterval(beatMS, initial)
+		})
+	}
 }