'pingpong' does not work when 'loop=false' & playing anim do some thing when keyframe

[tangbobo]

const _ = kaboom({ global: false, debug: true })
    // _.debug.inspect = true
    _.loadSprite('hero', '/sprite-sheet-161x106.png', {
        sliceX: 6,
        sliceY: 6,
        anims: {
            'idle': { from: 0, to: 5, speed: 12, loop: true },
            // 'pingpong' does not work when 'loop=false'
            'attack': { from: 6, to: 12, speed: 16, loop: false, pingpong: true },
            'skill': { from: 13, to: 30, speed: 16, loop: false },
            'hit': { from: 31, to: 35, speed: 16, loop: false }
        }
    })
    function Sprite(x, y, t) {
        return _.add([
            _.sprite(t, {
                anim:'idle'
            }),
            _.pos(x, y),
            _.area({}),
            _.anchor('center')
        ])
    }
    function Character(x, y) {
        const sprite = Sprite(x, y, 'hero')
        sprite.onAnimEnd(() => {
            sprite.play('idle')
        })
        sprite.SKill = (target) => {
            sprite.play('skill',{
                // I want to add this callback
                onFrameChange:()=>{

                }
            })
            //I need to know when to keyframe
            target.play('hit')
            _.addKaboom(target.pos, { scale: 1.2, speed: 1 })
        }
        sprite.Attack = (target) => {
            sprite.play('attack')
            target.play('hit')
            _.addKaboom(target.pos, { scale: 0.5, speed: 1.5 })
        }
        return sprite
    }
    const enmy = Character(200, 400, 'hero')
    enmy.flipX = true
    const maga = Character(400, 400, 'hero')
    _.onMousePress(() => {
        if (Math.random() < 0.5) {
            maga.Attack(enmy)
        } else {
            maga.SKill(enmy)
        }
    })

my code

1: 'pingpong' does not work when 'loop=false'

2: I need to know when to keyframe

[advayc]

1. 'pingpong' not working when 'loop=false'

To make 'pingpong' work even when 'loop' is set to false, you can update your animation definitions. Use the following modified 'attack' and 'skill' animations:

'anims': {
    'idle': { from: 0, to: 5, speed: 12, loop: true },
    'attack': { from: 6, to: 12, speed: 16, loop: false, pingpong: true },
    'skill': { from: 13, to: 30, speed: 16, loop: false, pingpong: true },
    'hit': { from: 31, to: 35, speed: 16, loop: false }
}

2. Adding a callback for onFrameChange during the 'skill' animation

To add a callback for the 'onFrameChange' event during the 'skill' animation, you can modify your sprite.SKill function like this:

sprite.SKill = (target) => {
    sprite.play('skill', {
        onFrameChange: (frame) => {
            // Your callback logic here, based on the current frame
            console.log(`Frame changed to: ${frame}`);
        }
    });

    // I need to know when to keyframe
    target.play('hit');
    _.addKaboom(target.pos, { scale: 1.2, speed: 1 });
}

Now, when the 'skill' animation is playing, the callback will be triggered on each frame change, allowing you to add your custom logic.

Hope this helps!!

[lajbel]

onFrameChange even exists?