[spine] 关于 setAnimation() 和 addAnimation() 的 若干问题和建议 .

[finscn]

Cocos Creator version

3.8.6

System information

all

Issue description

本帖只讨论 spine 3.8 的问题. 4.2 还没有测试.

我在项目中 遇到了奇怪的问题, 先看下面两段代码:

片段 A :

        this.spine.clearTrack(trackIndex);
        const trackEntry = this.spine.setAnimation(trackIndex, animName, loop);
        trackEntry.animationStart = 2;
        trackEntry.animationEnd = 6;
        trackEntry.trackTime = 0 ;

片段 B :

        this.spine.clearTrack(trackIndex);
        const trackEntry = this.spine.addAnimation(trackIndex, animName, loop);
        trackEntry.animationStart = 2;
        trackEntry.animationEnd = 6;
        trackEntry.trackTime = 0 ;

因为 我第一行都执行了 clearTrack, 按照 spine 官方的说法 片段A 和 片段B 的运行效果应该是一样的 .

但是实际运行效果不一致. 而且 jsb模式 和 wasm模式遇到的问题还不一样.

---

jsb 模式下的问题

jsb 模式下, 片段B (使用 addAnimation ) 更符合预期, 片段A 始终会显示一下动画的第一帧 ,从而导致动画闪烁.

问题1 : 关于 update(0)

经过阅读源码, 发现了一个问题.

jsb 环境下, setAnimation() 方法内会强制调用一个 update(0) 方法. 而 addAnimation() 并不会.
我又查阅了一下 其他的 spine 参考资料, 因为spine 设计的"缺陷" , 这个 update(0) 有时候确实是需要被执行的.

但是 它不是一定要在 setAnimation() 后立刻被执行. 比如我这里的这个例子, 它就应该在 设置完 trackEntry 之后再调用: 比如这样:

        this.spine.clearTrack(trackIndex);
        const trackEntry = this.spine.setAnimation(trackIndex, animName, loop);
        trackEntry.animationStart = 2;
        trackEntry.animationEnd = 6;
        trackEntry.trackTime = 0 ;
        // 此时再调用  update(0)
        this.spine.update(0);

因为update() 方法中 会用到 trackEntry 上的一些关于时间的属性, 所以 如果这些属性变化了, 必须重新 update(0).
在 setAnimation() 中直接 update(0) 是不对的.

所以 spine 官方的做法 其实是把 update(0) 这个方法暴露出来, 让开发者自己决定什么时候调用.
更多的参考可以去 https://github.com/EsotericSoftware/spine-runtimes 里用关键字 update(0) 进行搜索.

所以此处有两个修改建议:

1. 一个方案是像官方一样, 暴露 update(), 让开发者自己决定什么时候 调用update(). 这个方案可能会对现有项目产生影响, 并且增加一点点学习成本. 除非非常了解 spine, 否则什么时候调用 update(0) 是一个比较迷惑的行为.

2. 另一个方案则是 把 update(0) 从 jsb的 setAnimation() 方法里移除, 改为设置一个标志位, 然后在游戏的 update, lateUpdate 阶段之后再去执行, 比如在 spine 的 render(), postUpdate() 一类的方法里 去执行 update(0).
   我看 spine 官方提供的 2dx runtime 里 就是用的类似思路.

问题2 : 关于 markForUpdateRenderData()

其他模式的 updateAnimation 方法中, 会调用 markForUpdateRenderData() 方法.
但是 jsb-spine-skeleton.js 文件中的的 updateAnimation() 却没有.

如果 不添加 markForUpdateRenderData() , 某些情况下会出现 spine 更新不及时的问题.
所以建议添加, 从而保证所有模式 行为一致.

    skeleton.updateAnimation = function (dt) {
        const nativeSkeleton = this._nativeSkeleton;
        if (!nativeSkeleton) return;

        const node = this.node;
        if (!node) return;

        // 建议此处添加
        this.markForUpdateRenderData();

        // ......
    }

---

wasm 模式下的问题

wasm 模式下, 片段A (使用 setAnimation ) 更符合预期, 片段A 始终会闪烁一下.
(和 jsb模式相反)

问题1 : 关于 _animState->apply(*_skeleton) (更新)

setAnimation() 调用的是 spine-skeleton-instance.cpp 中的 TrackEntry *SpineSkeletonInstance::setAnimation() 方法.

addAnimation() 调用的是 3.8/spine/AnimationState.cpp 中的 TrackEntry *AnimationState::addAnimation() 方法.

前者(SpineSkeletonInstance) 最后其实调用的也是 AnimationState::setAnimation() , 但是 前者会在调用完 AnimationState::setAnimation() 后, 再去执行一下 _animState->apply(*_skeleton) 方法.

经过验证 _animState->apply(*_skeleton) 是问题的关键.

修改建议:

在 spine-skeleton-instance.cpp 中封装一个 addAnimation() 方法, 此方法 在调用 AnimationState::addAnimation() 后, 也执行一次 _animState->apply(*_skeleton) , 抹平 setAnimation() 和 addAnimation() 的差异

问题2 : 多余的 updateWorldTransform() (更新)

spine-skeleton-instance.cpp 中的 TrackEntry *SpineSkeletonInstance::setAnimation() 方法里会调用

#ifdef CC_SPINE_VERSION_3_8
    _skeleton->updateWorldTransform();
#else
    _skeleton->updateWorldTransform(Physics::Physics_Update);
#endif

经过验证, 此处调用 updateWorldTransform() 是多余的, 因为后面 updateRenderData() 方法中会再次调用, 而updateRenderData() 方法每帧都会被执行.

问题3: 多余的 clearTracks()

在 spine-skeleton-instance.cpp 的 setAnimation() 方法是这样的:

TrackEntry *SpineSkeletonInstance::setAnimation(float trackIndex, const spine::String &name, bool loop) {
    if (!_skeleton) return nullptr;
    spine::Animation *animation = _skeleton->getData()->findAnimation(name);
    if (!animation) {
        _animState->clearTracks();
        _skeleton->setToSetupPose();
        return nullptr;
    }
    auto *trackEntry = _animState->setAnimation(trackIndex, animation, loop);
    _animState->apply(*_skeleton);
#ifdef CC_SPINE_VERSION_3_8
    _skeleton->updateWorldTransform();
#else
    _skeleton->updateWorldTransform(Physics::Physics_Update);
#endif
    return trackEntry;
}

没找到 animation 时, 直接返回就可以了 . 不应该 清空 所有的 track状态 重置整个动画.

这种做法有问题的. 目前没有暴露出问题, 是因为在 ts里 提前做了判断 , 所以不会走到这段逻辑.
但是并不意味着这段逻辑是正确的. 为了安全起见, 建议删除 clearTracks() 和 setToSetupPose() 这两行.

问题4: 关于 setAnimation() 中多余的 markForUpdateRenderData()

因为 updateAnimation() 方法中 会调用 markForUpdateRenderData() .
所以 setAnimation() 中的 markForUpdateRenderData() 建议删除.

问题5: 关于 findAnimation()

目前 spine-skeleton-instance.cpp 中暴露的方法 setAnimation() 方法 参数是 animName:string.

但是阅读代码 不难发现, 其实 在 js 端 已经 通过 findAnimation(animName) 找出了 animation对象.

如果 使用字符串传递给 wasm环境, 在wasm 中 还要再 findAnimation() 一次, 有一些性能损耗.
此处 可以参考 AnimationState中的 setAnimationWith 和 addAnimationWith 方法, 直接传入 已经找到 animation对象, 从而优化一点性能.

---

总结

提出本 issue 的最终目的是为了确保 前面提到的 片段A 和 片段B , 在web jsb wasm 环境下, 都能有一样的行为, 且行为正确.

因为spine 的设计过于诡异, 以及我本人对 cpp wasm 并不擅长, 所以这里的很多建议 都是我自己xjb试 以及 参考各种其他平台的实现 整理总结的. 并不排除有隐藏的问题和风险.
不过有一点可以保证, 这些并不是纯脑洞, 我已经在我的自定义引擎里实践了.

希望官方可以考虑下.

---

[finscn]

@bofeng-song
又发现了一个 bug.
native/cocos/editor-support/spine-creator-support/SkeletonAnimation.cpp 文件中的 setAnimation() 方法有误.
不应该调用 _state->apply(*_skeleton) . 此调用也会引起在执行 setAnimation() 时出现一帧的闪烁.

这个也是导致 片段A 和 片段B 效果不一致的原因之一.

可参考这两个文件

3.8版
https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-cocos2dx/src/spine/SkeletonAnimation.cpp

4.2版
https://github.com/EsotericSoftware/spine-runtimes/blob/4.2/spine-cocos2dx/spine-cocos2dx/src/spine/SkeletonAnimation.cpp

无论哪个版本 setAnimation() 中都没有调用 _state->apply(*_skeleton) .

我在我自己的自定义引擎中, 删除了 apply() , 测试下来没什么问题.
而且确实解决了 闪烁一帧的 bug.

重现闪烁一下的 bug 很简单 :

setInterval(()=>{
   const track = spine.setAnimation(.....) 
  // 设置 spine 进度到 1.5秒
   track.trackTime =  1.5

}, 1000)

前提是 这个 spine动画的第一帧和 进度 1.5秒 时有明显差异 .

注意 : wasm 版本的 spine-skeleton-instance.cpp 里的 setAnimation() 和 addAnimation 方法反而需要_state->apply(*_skeleton) , 没有会闪烁. 不知道为什么...

---

另外再补充个问题:
在 spine 官方的定义中, 如果当前 trackEntry 为空时, 那么 addAnimation 等价于 setAnimation .
所以 如果 setAnimation 时 要调用 update(0), addAnimation() 是否也应该调用?

---

** 更新 **
前面提到的 _state->apply(*_skeleton) 在某些情况下还不能去掉, 去掉会有新bug, 比如

const trackA = spine.setAnimation(0, 'ABC')
trackA.animationStart = 2;
trackA.animationEnd = 6;
trackA.trackTime = 0;

const trackB = spine.setAnimation(0, 'ABC')

// 此时  理论上 新的 trackB 应该覆盖之前的 trackA , 正常从0开始播放 ABC.
// 但 如果去掉了 apply() ,  trackB会延续 trackA 的某些状态 ,  导致无法正常播放.
// 如果 保留 apply(), 则符合预期.

但是为什么 spine官方的代码里是 不调用 apply() 的呢? 难道还有其他地方有 bug ?

[bofeng-song]

@finscn 感谢反馈，相关问题尽量在387处理

[finscn]

@bofeng-song 经过进一步验证, 可以得出结论 : 那个 update() 方法 , 最好还是暴露给开发者, 让开发者自行调用.

因为有这样一种场景, 把 update(0) 自动放在帧后执行也不行 (原生平台).

        spine.clearTracks()
        spine.setToSetupPose()

        const trackEntry = this.spine.setAnimation(trackIndex, animName, loop);
        trackEntry.animationStart = 2;  // 从第2秒开始播放
        trackEntry.animationEnd = 6;
        trackEntry.trackTime = 0 ;

当 动画的 第2秒, 和动画的第0秒(第1帧) 差异很大时, 动画还是会闪一下 (显示一下第一帧)

要解决这个问题, 有两个方式:

1. 在 setToSetupPose() 后调用 update(0)
2. 在 trackEntry.trackTime = 0 后调用 update(0) .
   事实上, trackEntry 的 trackTime 或者 animationStart 每次被修改后 都要调用.
   所以 在setAnimation()后调用 是不行的.
3. 在 updateAnimation() 开始处调用 update(0)

在 render() 方法里也不行的.

所以,目前 方案3 比较合适.

---

spine 官方的代码里 很多地方 update(0) 也都会配合 setToSetupPose() 一起使用:

如果简单粗暴的 在 setToSetupPose , setAnimaiton, addAnimation 中强制执行 updae(0) .
会带来一点性能问题. 那个 update方法要做的工作还是挺多的.

如果玩家的代码类似这种:

        spine.clearTracks()
        spine.setToSetupPose()
        spine.setAnimtion( 0, .....)
        spine.setAnimtion( 1, .....)
        spine.setAnimtion( 2, .....)
        spine.setAnimtion( 3, .....)
        spine.setAnimtion( 4, .....)
        // ... ...

很多个 track 每次都调用 update(0) , 会对性能有影响.
我们游戏里 动画的播放是随着玩家手指的移动而动态进行的 , 每帧都要更新, 那么性能问题会更明显.

所以目前 最好的方案是以下两种:

1. 暴露 update(deltaTIme) 方法 , 但是名字要改一个, 否则和 组件自己的 updte() 冲突了.
2. 在 setToSetupPose , setAnimaiton, addAnimation 中设置标志位, 然后在 updateAnimation() 中通过标志位来判断, 统一执行一次update(0).

下面三张图 是我目前的实现方式:

再配合这两个修改:

• [spine] 原生代码 SkeletonAnimation.cpp 文件中, 存在错误的 setToSetupPose() 调用. #18596
• 删除 setAnimation() 方法中多余的 _state->apply(*_skeleton)

基本解决了闪烁的问题.

.

[bofeng-song]

@finscn 请参考这个 PR 修改

[finscn]

@finscn 请参考这个 PR 修改

去掉 setAniamtion 和 addAnimation 方法里的 state->apply(*_skeleton) 会导致在 wasm环境下, 动画出现一帧的闪烁 (消失一帧才会再次出现)
复现这个问题的 伪代码如下:

 spine.setAniamtion('A动画') 
 spine.setCompleteListener(()=>{
     spine.setAniamtion('B动画') 
 })

在播放 B动画之前 会出现一帧的闪烁.

引起这个问题可能有更根本的原因, 但是至少目前我试下来, 加上 apply 就不闪, 不加就闪, 为什么我也不知道.

官方的原生代码并似乎没有考虑 wasm 环境. 所以也不能什么都按照官方那个来.

[bofeng-song]

@finscn 请参考这个 PR 修改

去掉 setAniamtion 和 addAnimation 方法里的 state->apply(*_skeleton) 会导致在 wasm环境下, 动画出现一帧的闪烁 (消失一帧才会再次出现) 复现这个问题的 伪代码如下:

spine.setAniamtion('A动画')
spine.setCompleteListener(()=>{
spine.setAniamtion('B动画')
})
在播放 B动画之前 会出现一帧的闪烁.

引起这个问题可能有更根本的原因, 但是至少目前我试下来, 加上 apply 就不闪, 不加就闪, 为什么我也不知道.

官方的原生代码并似乎没有考虑 wasm 环境. 所以也不能什么都按照官方那个来.

我用spineBoy测试例，从walk 切到 run 动画是不闪烁的，用387论坛版加上 上面的PR。方便上传你的Demo吗？

[finscn]

@bofeng-song 我贴个完整的重现 bug 的代码 你看下:

export class TestSpineBug extends cc.Component {

    @property(cc.sp.Skeleton)
    spineA: cc.sp.Skeleton = null

    start() {
        cc.profiler.showStats();

        this.spineA.setCompleteListener(this.handleCompleteFlipEvent.bind(this));
        this.spineA.paused = true;

        this.scheduleOnce(() => {
            this.spineA.node.active = true
            this.spineA.paused = false;
            this.playSpine('Falling', false)
        }, 0.1)
    }

    playSpine(animName: string, loop: boolean) {
        this.spineA.clearAnimation(0);

        // 没有 state->apply() 后, 执行 setToSetupPose() 会引起闪烁
        // 不执行 setToSetupPose() 不会有问题, 但是有些动画, 不执行 setToSetupPose 会有其他问题.
        // 如果在原生代码里 添加  state->apply() , 则一切正常 都没有问题.
        // 也许bug 出现在 setToSetupPose 中 ???
        this.spineA.setToSetupPose();

        this.spineA.setAnimation(0, animName, loop)
    }

    handleCompleteFlipEvent(trackEntry: cc.sp.spine.TrackEntry): void {
        console.log('HandleCompleteFlipEvent : ', trackEntry.animation.name);
        this.playSpine('Idle', true)
    }

}

你在你的 demo 里加入 setToSetupPose , 看看会不会有问题.

此问题只有 wasm版本有, web 和微信小游戏 都有. 安卓原生没有问题, 可以去掉 state->apply()

[finscn]

@bofeng-song 突然想起来, 你加上 setToSetupPose() 应该也不会闪. 因为 spineBoy 的默认状态不是空白的.
我这个动画 默认状态是 空白的.
闪的一下 可能就是变成默认的空白了.

所以 问题的核心应该是:
在同一帧里连续执行

setToSetupPose()  // 恢复默认状态(空白)
setAnimation()   // 播放动画`Idle` .

setAnimation()的显示效果 应该覆盖 setToSetupPose() 的显示效果.
但是在 wasm 里 延迟了一帧.

---

更新 :
我用 spineBoy 测试 确实没闪.

进一步对比 我找到原因了. 那个 update(0) , wasm环境下 也需要执行.

    playSpine(animName: string, loop: boolean) {
        this.spineA.clearAnimation(0);
        this.spineA.setToSetupPose();
        this.spineA.setAnimation(0, animName, loop)

        this.spineA.updateAnimation(0);
    }

加上 updateAnimation(0) 就不闪了.

---

再次更新:

我觉得其实和 setToSetupPose() 关系也不大.
核心问题还是 setAnimation() 后, 更新不及时 延迟了一帧.

我这里不执行 setToSetupPose() 时, 不闪, 是因为 第一个动画的 最后一帧 和 第二个动画的第一帧 差不多.

"闪" 不是问题的关键, 问题的关键是 wasm下, setAnimation() 后 , 动画的update()延迟了一帧.

在同一帧里连续执行

setToSetupPose()  //    当前帧就生效了
setAnimation()   //    下一帧才生效.

通过在 setAnimation() 后 手动执行 state->apply() 可以解决, 通过在 setAnimation 后执行 updateAnimation(0) 也可以解决.
但是 updateAnimation(0) 更耗费性能, 做的无用操作更多.

所以目前最佳解决方案应该还是 在 setAnimation() 和 addAnimation 中 保留 state->apply()