With the given directory configuration:
Where skills is the module imported in rpg.toml and animations is spritesheet directory with subdirectories.
There is an issue with the sourcing configuration for the sprite image.
fire-superslash.png and moving-ball.png are the same animation sprites but with different colors:
but fire-superslash.ts and moving-ball.ts have different configurations.
fire-superslash should take this:
and moving-ball should take this:
However, for both animations is taken configuration from fire-superslash.ts.
which results (see video): https://imgur.com/RD3gKLL (magician should throw the ball instead of smash)
I checked multiple times if I properly set the graphic.
the player uses setGraphic('fire-superslash')
and mob attack event uses setGraphic('moving-ball')
fire-superslash.ts
import { Animation, Direction, Spritesheet } from '@rpgjs/client'
import { FrameOptions } from '@rpgjs/client/lib/Sprite/Spritesheet';
const getAnchor = (direction: Direction) => {
switch (direction) {
case Direction.Down:
return [-0.34, 0.435];
case Direction.Up:
return [0, 0.435];
case Direction.Left:
return [0, 0.57];
case Direction.Right:
return [-0.34, 0.57];
}
}
const getRotation = (direction: Direction) => {
switch (direction) {
case Direction.Down:
return -90;
case Direction.Up:
return 90;
case Direction.Left:
return 180;
case Direction.Right:
return 0;
}
}
const attackAnimations = (direction: Direction): FrameOptions[][] => {
const frames: FrameOptions[][] = [];
for (let i = 0; i < 4; i++) {
const animation: FrameOptions = {
time: (4 * i),
frameX: i,
frameY: 0,
anchor: getAnchor(direction),
angle: getRotation(direction),
skew: [0, 0],
}
if (direction == Direction.Down) {
animation.skew = [0, Math.PI];
}
if (direction == Direction.Up) {
animation.skew = [Math.PI, Math.PI];
}
if (direction == Direction.Left) {
animation.skew = [0, 0];
}
if (direction == Direction.Right) {
animation.skew = [Math.PI, 0];
}
frames.push([animation]);
}
return frames;
}
@Spritesheet({
id: 'fire-superslash',
image: require('./fire-superslash.png'),
textures: {
[Animation.Attack]: {
offset: {
x: 64,
y: 144,
},
rectHeight: 80,
rectWidth: 32,
framesWidth: 3,
framesHeight: 1,
scale: [3, 3],
animations: direction => attackAnimations(direction),
}
}
})
export default class FireSuperslash {}
moving-ball.ts
import { Animation, Spritesheet } from '@rpgjs/client'
import { getAnimations } from './../../../../shared/utils/SpritesheetPresets'
@Spritesheet({
id: 'moving-ball',
image: require('./moving-ball.png'),
rectHeight: 32,
rectWidth: 32,
framesWidth: 4,
framesHeight: 2,
offset: {
x: 512,
y: 32,
},
textures: {
[Animation.Stand]: {
animations: [[{ time: 0, frameX: 0, frameY: 0 }]],
},
[Animation.Walk]: {
animations: direction => [getAnimations(direction, 0, 4)],
},
[Animation.Attack]: {
animations: direction => [getAnimations(direction, 1, 4)],
}
}
})
export default class MovingBall {}
If you want to reproduce here is branch in my repo: purple-magician-skill (magicians are on the second map, you have to go right, C - for simple attack, J - for fire-superslash skill)