81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
class Sprite{
|
|
constructor({position,skin, imageSrc,frames = 1,center,atPosition,sprites={up:'',down:'',left:'',right:''}}){
|
|
this.position = position
|
|
this.atPosition = atPosition
|
|
this.center = center
|
|
this.image = new Image()
|
|
this.image.onload = () => {
|
|
this.loaded = true
|
|
this.width = this.image.width / this.frames
|
|
this.height = this.image.height
|
|
}
|
|
this.image.src = imageSrc
|
|
this.loaded = false
|
|
this.frames = frames
|
|
this.currentFrame = 0
|
|
this.elapsedFrames = 0
|
|
this.frameBuffer = 7
|
|
this.sprites = sprites
|
|
this.skin = skin
|
|
this.Up = new Image()
|
|
this.Down = new Image()
|
|
this.Left = new Image()
|
|
this.Right = new Image()
|
|
this.Up.src = sprites.up
|
|
this.Down.src = sprites.down
|
|
this.Left.src = sprites.left
|
|
this.Right.src = sprites.right
|
|
}
|
|
draw(){
|
|
if(!this.loaded) return
|
|
const cropbox = {
|
|
position: {
|
|
x: this.width * this.currentFrame,
|
|
y:0
|
|
},
|
|
width:this.width,
|
|
height:this.height
|
|
}
|
|
if(this.center){
|
|
ctx.drawImage(
|
|
this.image,
|
|
cropbox.position.x,
|
|
cropbox.position.y,
|
|
cropbox.width,
|
|
cropbox.height,
|
|
this.position.x-cropbox.width/2,
|
|
this.position.y-cropbox.height,
|
|
this.width,
|
|
this.height
|
|
)
|
|
}else{
|
|
ctx.drawImage(
|
|
this.image,
|
|
cropbox.position.x,
|
|
cropbox.position.y,
|
|
cropbox.width,
|
|
cropbox.height,
|
|
this.position.x,
|
|
this.position.y,
|
|
this.width,
|
|
this.height
|
|
)
|
|
}
|
|
|
|
if(!this.atPosition) {this.updateFrames()}else{this.currentFrame=0}
|
|
}
|
|
updateFrames(){
|
|
this.elapsedFrames++
|
|
// this.currentFrame++
|
|
// console.log(this.currentFrame);
|
|
if((this.elapsedFrames % this.frameBuffer === 0) && this.frames>1){
|
|
|
|
if(this.currentFrame < this.frames-1){
|
|
this.currentFrame++
|
|
}
|
|
else{
|
|
this.currentFrame=1
|
|
}
|
|
}
|
|
}
|
|
}
|