Merge pull request #54 from LoveEevee/canvasasset-variable-speed

CanvasAsset: Change animation speed with bpm changes
This commit is contained in:
Bui 2018-10-11 22:15:48 +01:00 committed by GitHub
commit 6ccdc18ec6
7 changed files with 62 additions and 29 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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