2018-09-14 06:55:23 +08:00
|
|
|
class CanvasAsset{
|
2022-02-11 22:28:22 +08:00
|
|
|
constructor(...args){
|
|
|
|
this.init(...args)
|
|
|
|
}
|
|
|
|
init(view, layer, position){
|
2018-09-14 06:55:23 +08:00
|
|
|
this.ctx = view.ctx
|
2019-01-16 20:33:42 +08:00
|
|
|
this.view = view
|
2018-09-14 06:55:23 +08:00
|
|
|
this.position = position
|
|
|
|
this.animationFrames = {}
|
|
|
|
this.speed = 1000 / 60
|
|
|
|
this.animationStart = 0
|
2018-09-20 07:20:26 +08:00
|
|
|
this.layer = layer
|
2018-10-12 04:24:18 +08:00
|
|
|
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
|
2019-01-16 20:33:42 +08:00
|
|
|
var ms = this.view.getMS()
|
2018-11-15 16:42:22 +08:00
|
|
|
var beatInterval = this.frameSpeed ? 1000 / 60 : this.beatInterval
|
|
|
|
|
2018-09-14 06:55:23 +08:00
|
|
|
if(this.animationEnd){
|
2018-11-15 16:42:22 +08:00
|
|
|
if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * beatInterval){
|
2018-09-14 06:55:23 +08:00
|
|
|
this.animationEnd.callback()
|
2018-10-12 04:24:18 +08:00
|
|
|
this.animationEnd = false
|
2018-09-14 06:55:23 +08:00
|
|
|
return this.draw()
|
|
|
|
}
|
|
|
|
}
|
2018-11-15 16:42:22 +08:00
|
|
|
var index = Math.floor((ms - this.animationStart) / (this.speed * beatInterval))
|
2018-09-14 06:55:23 +08:00
|
|
|
if(Array.isArray(this.animation)){
|
2018-09-18 21:59:40 +08:00
|
|
|
frame = this.animation[this.mod(this.animation.length, index)]
|
2018-09-14 06:55:23 +08:00
|
|
|
}else{
|
2018-09-18 21:59:40 +08:00
|
|
|
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
|
|
|
}
|
|
|
|
}
|
2018-09-18 21:59:40 +08:00
|
|
|
mod(length, index){
|
|
|
|
return ((index % length) + length) % length
|
2018-09-14 06:55:23 +08:00
|
|
|
}
|
2020-04-04 21:48:58 +08:00
|
|
|
addFrames(name, frames, image, don){
|
2018-09-14 06:55:23 +08:00
|
|
|
var framesObj = {
|
2020-04-04 21:48:58 +08:00
|
|
|
frames: frames,
|
|
|
|
don: don
|
2018-09-14 06:55:23 +08:00
|
|
|
}
|
2020-04-04 21:48:58 +08:00
|
|
|
if(don){
|
|
|
|
var img = assets.image[image + "_a"]
|
|
|
|
var cache1 = new CanvasCache()
|
|
|
|
var cache2 = new CanvasCache()
|
|
|
|
var w = img.width
|
|
|
|
var h = img.height
|
|
|
|
cache1.resize(w, h, 1)
|
|
|
|
cache2.resize(w, h, 1)
|
|
|
|
cache1.set({
|
|
|
|
w: w, h: h, id: "1"
|
|
|
|
}, ctx => {
|
|
|
|
ctx.drawImage(assets.image[image + "_b1"], 0, 0)
|
|
|
|
ctx.globalCompositeOperation = "source-atop"
|
|
|
|
ctx.fillStyle = don.body_fill
|
|
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
|
})
|
|
|
|
cache2.set({
|
|
|
|
w: w, h: h, id: "2"
|
|
|
|
}, ctx => {
|
|
|
|
ctx.drawImage(assets.image[image + "_b2"], 0, 0)
|
|
|
|
ctx.globalCompositeOperation = "source-atop"
|
|
|
|
ctx.fillStyle = don.face_fill
|
|
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
|
|
|
|
|
ctx.globalCompositeOperation = "source-over"
|
|
|
|
cache1.get({
|
|
|
|
ctx: ctx,
|
|
|
|
x: 0, y: 0, w: w, h: h,
|
|
|
|
id: "1"
|
|
|
|
})
|
|
|
|
ctx.drawImage(img, 0, 0)
|
|
|
|
})
|
|
|
|
cache1.clean()
|
|
|
|
framesObj.cache = cache2
|
|
|
|
framesObj.image = cache2.canvas
|
|
|
|
}else if(image){
|
2018-09-14 06:55:23 +08:00
|
|
|
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
|
|
|
|
}
|
2020-04-04 21:48:58 +08:00
|
|
|
this.don = framesObj.don
|
2018-09-20 07:20:26 +08:00
|
|
|
}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
|
|
|
|
}
|
|
|
|
}
|
2018-11-15 16:42:22 +08:00
|
|
|
setUpdateSpeed(speed, frameSpeed){
|
2018-09-14 06:55:23 +08:00
|
|
|
this.speed = speed
|
2018-11-15 16:42:22 +08:00
|
|
|
this.frameSpeed = frameSpeed
|
2018-09-14 06:55:23 +08:00
|
|
|
}
|
|
|
|
setAnimationStart(ms){
|
|
|
|
this.animationStart = ms
|
|
|
|
}
|
2018-10-12 04:24:18 +08:00
|
|
|
setAnimationEnd(frameCount, callback){
|
|
|
|
if(typeof frameCount === "undefined"){
|
|
|
|
this.animationEnd = false
|
2018-09-14 06:55:23 +08:00
|
|
|
}else{
|
|
|
|
this.animationEnd = {
|
2018-10-12 04:24:18 +08:00
|
|
|
frameCount: frameCount,
|
2018-09-14 06:55:23 +08:00
|
|
|
callback: callback
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-10-12 04:24:18 +08:00
|
|
|
changeBeatInterval(beatMS, initial){
|
2018-11-15 16:42:22 +08:00
|
|
|
if(!initial && !this.frameSpeed){
|
2019-01-16 20:33:42 +08:00
|
|
|
var ms = this.view.getMS()
|
2018-10-12 04:24:18 +08:00
|
|
|
this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS
|
|
|
|
}
|
|
|
|
this.beatInterval = beatMS
|
|
|
|
}
|
2020-04-04 21:48:58 +08:00
|
|
|
clean(){
|
|
|
|
for(var i in this.animationFrames){
|
|
|
|
var frame = this.animationFrames[i]
|
|
|
|
if(frame.cache){
|
|
|
|
frame.cache.clean()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-09-14 06:55:23 +08:00
|
|
|
}
|