2018-09-20 07:20:26 +08:00
|
|
|
class ViewAssets{
|
|
|
|
constructor(view){
|
|
|
|
this.view = view
|
|
|
|
this.controller = this.view.controller
|
|
|
|
this.allAssets = []
|
|
|
|
this.ctx = this.view.ctx
|
|
|
|
|
|
|
|
this.don = this.createAsset("background", frame => {
|
|
|
|
var imgw = 360
|
|
|
|
var imgh = 184
|
|
|
|
var scale = 165
|
2018-10-25 22:18:41 +08:00
|
|
|
var w = imgw
|
|
|
|
var h = imgh
|
2018-09-20 07:20:26 +08:00
|
|
|
return {
|
|
|
|
sx: Math.floor(frame / 10) * imgw,
|
2018-10-25 22:18:41 +08:00
|
|
|
sy: (frame % 10) * imgh + 1,
|
2018-09-20 07:20:26 +08:00
|
|
|
sw: imgw,
|
2018-10-25 22:18:41 +08:00
|
|
|
sh: imgh - 1,
|
|
|
|
x: view.portrait ? -60 : 0,
|
|
|
|
y: view.portrait ? (view.multiplayer === 2 ? 560 : 35) : (view.multiplayer === 2 ? 360 : 2),
|
2018-09-20 07:20:26 +08:00
|
|
|
w: w,
|
2018-10-25 22:18:41 +08:00
|
|
|
h: h - 1
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
this.don.addFrames("normal", [
|
|
|
|
0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,4 ,3 ,2 ,1 ,
|
|
|
|
0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,4 ,3 ,2 ,1 ,
|
|
|
|
0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,7 ,8 ,9 ,10,
|
|
|
|
11,11,11,11,10,9 ,8 ,7 ,13,12,12,13,14,15,16,17
|
|
|
|
], "don_anim_normal")
|
|
|
|
this.don.addFrames("10combo", 22, "don_anim_10combo")
|
2018-09-20 21:11:19 +08:00
|
|
|
this.don.addFrames("gogo", [
|
|
|
|
42,43,43,44,45,46,47,48,49,50,51,52,53,54,
|
|
|
|
55,0 ,1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,11,12,13,
|
|
|
|
14,14,15,16,17,18,19,20,21,22,23,24,25,26,
|
|
|
|
27,28,29,30,31,32,33,34,35,36,37,38,39,40,41
|
|
|
|
], "don_anim_gogo")
|
2018-09-20 07:20:26 +08:00
|
|
|
this.don.addFrames("gogostart", 27, "don_anim_gogostart")
|
2018-09-20 21:11:19 +08:00
|
|
|
this.don.normalAnimation = () => {
|
|
|
|
if(this.view.gogoTime){
|
|
|
|
var length = this.don.getAnimationLength("gogo")
|
2018-10-12 04:24:18 +08:00
|
|
|
this.don.setUpdateSpeed(4 / length)
|
2018-09-20 21:11:19 +08:00
|
|
|
this.don.setAnimation("gogo")
|
2018-10-25 22:18:41 +08:00
|
|
|
}else if(Math.round(this.controller.getGlobalScore().gauge / 2) - 1 >= 25){
|
2018-09-26 08:26:42 +08:00
|
|
|
this.don.setAnimationStart(0)
|
|
|
|
var length = this.don.getAnimationLength("clear")
|
2018-10-12 04:24:18 +08:00
|
|
|
this.don.setUpdateSpeed(2 / length)
|
2018-09-26 08:26:42 +08:00
|
|
|
this.don.setAnimation("clear")
|
2018-09-20 21:11:19 +08:00
|
|
|
}else{
|
|
|
|
this.don.setAnimationStart(0)
|
2018-09-26 08:26:42 +08:00
|
|
|
var length = this.don.getAnimationLength("normal")
|
2018-10-12 04:24:18 +08:00
|
|
|
this.don.setUpdateSpeed(4 / length)
|
2018-09-20 21:11:19 +08:00
|
|
|
this.don.setAnimation("normal")
|
|
|
|
}
|
|
|
|
}
|
2018-09-26 08:26:42 +08:00
|
|
|
this.don.addFrames("clear", 30, "don_anim_clear")
|
2018-09-20 21:11:19 +08:00
|
|
|
this.don.normalAnimation()
|
2018-09-20 07:20:26 +08:00
|
|
|
this.fire = this.createAsset("bar", frame => {
|
|
|
|
var imgw = 360
|
|
|
|
var imgh = 370
|
2018-10-25 22:18:41 +08:00
|
|
|
var scale = 130
|
|
|
|
var ms = this.view.getMS()
|
2018-09-21 01:04:22 +08:00
|
|
|
var elapsed = ms - this.view.gogoTimeStarted
|
2018-10-25 22:18:41 +08:00
|
|
|
|
|
|
|
var mul = this.view.slotPos.size / 106
|
|
|
|
var barH = 130 * mul
|
|
|
|
|
2018-09-21 01:04:22 +08:00
|
|
|
if(this.view.gogoTime){
|
|
|
|
var grow = 3 - Math.min(200, elapsed) / 100
|
|
|
|
this.ctx.globalAlpha = Math.min(200, elapsed) / 200
|
|
|
|
}else{
|
|
|
|
var grow = 1 - Math.min(100, elapsed) / 100
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|
2018-10-25 22:18:41 +08:00
|
|
|
var w = (barH * imgw) / scale * grow
|
|
|
|
var h = (barH * imgh) / scale * grow
|
2018-09-20 07:20:26 +08:00
|
|
|
this.ctx.globalCompositeOperation = "lighter"
|
|
|
|
return {
|
|
|
|
sx: frame * imgw,
|
|
|
|
sy: 0,
|
|
|
|
sw: imgw,
|
|
|
|
sh: imgh,
|
2018-10-25 22:18:41 +08:00
|
|
|
x: this.view.slotPos.x - w / 2,
|
|
|
|
y: this.view.slotPos.y - h / 2,
|
2018-09-20 07:20:26 +08:00
|
|
|
w: w,
|
2018-10-25 22:18:41 +08:00
|
|
|
h: h
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
this.fire.addFrames("normal", 7, "fire_anim")
|
2018-10-12 04:24:18 +08:00
|
|
|
this.fire.setUpdateSpeed(1 / 8)
|
2018-09-20 07:20:26 +08:00
|
|
|
this.fireworks = []
|
|
|
|
for(let i = 0; i < 5 ; i++){
|
|
|
|
var fireworksAsset = this.createAsset("foreground", frame => {
|
|
|
|
var imgw = 230
|
|
|
|
var imgh = 460
|
|
|
|
var scale = 165
|
2018-10-25 22:18:41 +08:00
|
|
|
var w = imgw
|
|
|
|
var h = imgh
|
|
|
|
var winW = this.view.winW / this.view.ratio
|
|
|
|
var winH = this.view.winH / this.view.ratio
|
2018-09-20 07:20:26 +08:00
|
|
|
return {
|
|
|
|
sx: Math.floor(frame / 4) * imgw,
|
|
|
|
sy: (frame % 4) * imgh,
|
|
|
|
sw: imgw,
|
|
|
|
sh: imgh,
|
2018-10-25 22:18:41 +08:00
|
|
|
x: winW / 4 * i - w / 2 * (i / 2),
|
|
|
|
y: winH - h,
|
2018-09-20 07:20:26 +08:00
|
|
|
w: w,
|
|
|
|
h: h
|
|
|
|
}
|
|
|
|
})
|
|
|
|
fireworksAsset.addFrames("normal", 30, "fireworks_anim")
|
2018-10-12 04:24:18 +08:00
|
|
|
fireworksAsset.setUpdateSpeed(1 / 16)
|
2018-09-20 07:20:26 +08:00
|
|
|
this.fireworks.push(fireworksAsset)
|
|
|
|
}
|
2018-10-12 04:24:18 +08:00
|
|
|
this.changeBeatInterval(this.view.beatInterval, true)
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|
|
|
|
createAsset(layer, position){
|
|
|
|
var asset = new CanvasAsset(this.view, layer, position)
|
|
|
|
this.allAssets.push(asset)
|
|
|
|
return asset
|
|
|
|
}
|
|
|
|
drawAssets(layer){
|
2018-10-25 22:18:41 +08:00
|
|
|
this.allAssets.forEach(asset => {
|
|
|
|
if(layer === asset.layer){
|
|
|
|
asset.draw()
|
|
|
|
}
|
|
|
|
})
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|
2018-10-12 04:24:18 +08:00
|
|
|
changeBeatInterval(beatMS, initial){
|
|
|
|
this.allAssets.forEach(asset => {
|
|
|
|
asset.changeBeatInterval(beatMS, initial)
|
|
|
|
})
|
|
|
|
}
|
2018-09-20 07:20:26 +08:00
|
|
|
}
|