nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CanvasAsset: Change animation speed with bpm changes

Browse Source
This commit is contained in:
LoveEevee 2018-10-11 23:24:18 +03:00
parent 4ff567d5d7
commit 9c175231bf
7 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/src/js/canvasasset.js
View File

@ -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
}
}

1
public/src/js/circle.js
View File

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

13
public/src/js/game.js
View File

@ -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

21
public/src/js/parseosu.js
View File

@ -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{

3
public/src/js/parsetja.js
View File

@ -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

14
public/src/js/view.js
View File

@ -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){

17
public/src/js/viewassets.js
View File

@ -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)
})
}
}