I'm trying to implement an animation following the tutorial at the following address: https://docs.rpgjs.dev/classes/spritesheet.html
I have created the file ShieldAnimations.ts in the folder spritesheets/animations/ with the following code:
import { Spritesheet } from '@rpgjs/client'
const to = () => {
const array: any = []
let k = 0
const durationFrame = 5
for (let i=0 ; i < 4 ; i++) {
for (let j=0 ; j < 5 ; j++) {
array.push({ time: k * durationFrame, frameX: j, frameY: i })
k++
}
}
// This last beat allows the last frame to be played, otherwise the animation ends abruptly at the last frame. This can be considered as the total animation time.
array.push({ time: k * durationFrame })
return array
}
@Spritesheet({
id: 'shield',
image: require('./animation.png'),
framesWidth: 5,
framesHeight: 4,
width: 960,
height: 768,
opacity: 1,
anchor: [0.5],
textures: {
default: {
/*
animations: [
[
{ time: 0, frameX: 0, frameY: 0 },
{ time: 5, frameX: 1, frameY: 0 } ,
{ time: 10, frameX: 2, frameY: 0 } ,
{ time: 15, frameX: 3, frameY: 0 }
// etc...
]
]
*/
animations: [ to() ]
}
}
})
export default class ShieldAnimations {}
witch is the same code of the tutorial page (I've added default into the export to prevents errors).
Inside the spritesheets folder there's the animation.png file
To test the animation, I tried adding the server-side animation (because I didn't understand how to make it work client-side) to the following NPC.
import { RpgEvent, EventData, RpgPlayer } from '@rpgjs/server'
import { PlayerType } from '@rpgjs/types'
@EventData({
name: 'EV-2',
hitbox: {
width: 32,
height: 16
}
})
export default class HealerEvent extends RpgEvent {
onInit() {
this.setGraphic('female')
}
async onAction(player: RpgPlayer) {
// player.useItem('96ab6ba0-3c7b-11ee-be56-0242ac120002')
player.showAnimation('shield', 'default')
// player.callShop([Pozione, Granpozione])
}
}
But when I try to talk to the NPC, I get the following error:
Uncaught (in promise) Error: [RPGJS] - Impossible to find the shield spritesheet. Did you put the right name or create the spritesheet?
What am I missing?