Spreetsheet timeline

dominx99

Hello,
I have few more question about spritesheets 😅

I have something like this:

import { Animation, Ease, Spritesheet, Timeline } 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: new Timeline()
                .add(40, ({ scale }) => [{
                    frameX: 0,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1,
                        to: 1.3,
                    }
                })
                .add(40, ({ scale }) => [{
                    frameX: 1,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.5,
                    }
                })
                .add(40, ({ scale }) => [{
                    frameX: 3,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.5,
                        to: 1.3,
                    }
                })
                .add(40, ({ scale }) => [{
                    frameX: 2,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.2,
                    }
                })
                .create(),
        }
    }
})
export default class MovingBall { }

I put the duration for each transform 40 as per documentation it should take 40 seconds
https://docs.rpgjs.dev/api/Timeline.html#add-animation-in-timeline

For a duration of 30 seconds

I doubt that it is 40 seconds nor 400 milliseconds nor 40 miliseconds.

How duration is calculated? How much time it takes if I define it to 40?

My first two transform options should increase scale and the last two should decrease scale.

However it seems that every frame increases scale (check video)
In the first frame scale is set from 1 and in the third frame scale is set from 1.5 and in the result in the third frame it is smaller than the first frame, why?
First two frames are rendered in the right bottom anchor and the last two frames are rendered in the left top anchor even though I did not define any anchor, why?

Video: https://imgur.com/iY9mh3N

Note that it is intended that order of frame X are: 0, 1, 3 , 2

Samarium

How duration is calculated? How much time it takes if I define it to 40?

It's not in second gear, it's a mistake.

The first parameter of each .add() method is the duration in frames, allowing you to specify the duration of each animation step. If the timeline respects a specific frame rate, e.g. 60 frames per second, 40 frames correspond to an animation duration of 2/3 of a second for each step.

dominx99

Samarium Cool, I will test it with this information noted, but I think the rest points are still valid

Samarium

Hello,

The problem has been solved on the latest version. You can update RPGJS

Check that the problem has been solved

dominx99

Samarium

It seems that issue with anchor and position of animation was fixed,
but I have one more question about the speed of animation.
I have something like this:

            animations: new Timeline()
                .add(1, ({ scale }) => [{
                    frameX: 0,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1,
                        to: 1.3,
                    }
                })
                .add(2, ({ scale }) => [{
                    frameX: 1,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.5,
                    }
                })
                .add(3, ({ scale }) => [{
                    frameX: 3,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.5,
                        to: 1.3,
                    }
                })
                .add(4, ({ scale }) => [{
                    frameX: 2,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.2,
                    }
                })
                .create(),

And it looks like this: https://imgur.com/qS1cwGo

But I would want to speed up this animation, so I tried to decrease a duration like this:

            animations: new Timeline()
                .add(.5, ({ scale }) => [{
                    frameX: 0,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1,
                        to: 1.3,
                    }
                })
                .add(1, ({ scale }) => [{
                    frameX: 1,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.5,
                    }
                })
                .add(1.5, ({ scale }) => [{
                    frameX: 3,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.5,
                        to: 1.3,
                    }
                })
                .add(2, ({ scale }) => [{
                    frameX: 2,
                    frameY: 1,
                    scale: [scale],
                }], {
                    scale: {
                        from: 1.3,
                        to: 1.2,
                    }
                })
                .create(),

but speed is the same no matter how I decrease duration.

Edit: I also tried to increase keyframes