• Help
  • Spritesheet configuration leak to other directory

With the given directory configuration:
Img
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:
Img 1
Img 2
but fire-superslash.ts and moving-ball.ts have different configurations.
fire-superslash should take this:
Img 3
and moving-ball should take this:
Img 4

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)

  • In fact, there must be one .ts per folder. Well, I can understand that this detail can be annoying, but the idea is to bring together all the common .

    In your case:

    either put in rpg.toml

    spritesheetDirectories = [
       # ...
        'animations/mobs/moving-ball',
        'animations/warrior/fire-superslash',
    ]
5 days later
4 days later

In fact, there must be one .ts per folder. Well, I can understand that this detail can be annoying, but the idea is to bring together all the common .

In your case:

either put in rpg.toml

spritesheetDirectories = [
   # ...
    'animations/mobs/moving-ball',
    'animations/warrior/fire-superslash',
]

    Samarium

    Sure, it is not a big deal to have more configuration. I just had no idea it's possible after last changes to spritesheets and I had this:

    spritesheetDirectories = [
       # ...
        'animation-moving-ball',
        'animation-fire-superslash',
    ]

    your example is way better, so Thank you 😄