japanese-drum-game/public/src/js/canvasasset.js

101 lines
2.3 KiB
JavaScript
Raw Normal View History

2018-09-14 06:55:23 +08:00
class CanvasAsset{
2018-09-20 07:20:26 +08:00
constructor(view, layer, position){
2018-09-14 06:55:23 +08:00
this.ctx = view.ctx
this.controller = view.controller
this.position = position
this.animationFrames = {}
this.speed = 1000 / 60
this.animationStart = 0
2018-09-20 07:20:26 +08:00
this.layer = layer
this.beatInterval = 468.75
2018-09-14 06:55:23 +08:00
}
draw(){
if(this.animation){
2018-09-20 07:20:26 +08:00
var u = (a, b) => typeof a === "undefined" ? b : a
var frame = 0
2018-10-03 17:48:18 +08:00
var ms = this.controller.getElapsedTime()
2018-09-14 06:55:23 +08:00
if(this.animationEnd){
if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * this.beatInterval){
2018-09-14 06:55:23 +08:00
this.animationEnd.callback()
this.animationEnd = false
2018-09-14 06:55:23 +08:00
return this.draw()
}
}
var index = Math.floor((ms - this.animationStart) / (this.speed * this.beatInterval))
2018-09-14 06:55:23 +08:00
if(Array.isArray(this.animation)){
frame = this.animation[this.mod(this.animation.length, index)]
2018-09-14 06:55:23 +08:00
}else{
frame = this.mod(this.animation, index)
2018-09-14 06:55:23 +08:00
}
2018-10-25 22:18:41 +08:00
this.ctx.save()
2018-09-20 07:20:26 +08:00
var pos = this.position(frame)
if(this.image){
this.ctx.drawImage(this.image,
u(pos.sx, pos.x), u(pos.sy, pos.y),
u(pos.sw, pos.w), u(pos.sh, pos.h),
pos.x, pos.y, pos.w, pos.h
)
}
2018-10-25 22:18:41 +08:00
this.ctx.restore()
2018-09-14 06:55:23 +08:00
}
}
mod(length, index){
return ((index % length) + length) % length
2018-09-14 06:55:23 +08:00
}
addFrames(name, frames, image){
var framesObj = {
frames: frames
}
if(image){
framesObj.image = assets.image[image]
}
this.animationFrames[name] = framesObj
}
setAnimation(name){
var framesObj = this.animationFrames[name]
this.animationName = name
2018-09-20 07:20:26 +08:00
if(framesObj){
this.animation = framesObj.frames
if(framesObj.image){
this.image = framesObj.image
}
}else{
this.animation = false
2018-09-14 06:55:23 +08:00
}
}
getAnimation(){
return this.animationName
}
2018-09-20 07:20:26 +08:00
getAnimationLength(name){
var frames = this.animationFrames[name].frames
2018-09-14 06:55:23 +08:00
if(Array.isArray(frames)){
return frames.length
}else{
return frames
}
}
setUpdateSpeed(speed){
this.speed = speed
}
setAnimationStart(ms){
this.animationStart = ms
}
setAnimationEnd(frameCount, callback){
if(typeof frameCount === "undefined"){
this.animationEnd = false
2018-09-14 06:55:23 +08:00
}else{
this.animationEnd = {
frameCount: frameCount,
2018-09-14 06:55:23 +08:00
callback: callback
}
}
}
changeBeatInterval(beatMS, initial){
var ms = this.controller.getElapsedTime()
if(!initial){
this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS
}
this.beatInterval = beatMS
}
2018-09-14 06:55:23 +08:00
}