egret spine 对接实现

SkeletonAnimation 继承自 egret.DisplayObjectContainer
里面监听了 egret.Event.ENTER_FRAME事件
他里面有一个 SkeletonRenderer
这个是渲染用的
他会靠这个代码驱动
this.renderer.update(now - this.lastTime);

public update(dt: number) {
    
    
   this.state.update(dt);
    this.state.apply(this.skeleton);
    this.skeleton.updateWorldTransform();
    const drawOrder = this.skeleton.drawOrder;
    for (let i = 0; i < drawOrder.length; i++) {
    
    
        const index = drawOrder[i].data.index;
        const renderer = this.slotRenderers[index];
        if (renderer.zIndex !== i) {
    
    
            renderer.zIndex = i;
        }
        renderer.renderSlot(this);
    }
    this.clipper.clipEnd();
}

SkeletonRenderer

RegionAttachment里的computeWorldVertices方法
这个是计算在世界坐标系里的位置
他需要这几个参数

bone: Bone, worldVertices: ArrayLike<number>, offset: number, stride: number

看描述

/** Transforms the attachment's four vertices to world coordinates.
*
* See [World transforms](http://esotericsoftware.com/spine-runtime-skeletons#World-transforms) in the Spine
* Runtimes Guide.
* @param worldVertices The output world vertices. Must have a length >= `offset` + 8.
* @param offset The `worldVertices` index to begin writing values.
* @param stride The number of `worldVertices` entries between the value pairs written. */

worldVertices 是输出用的
offset 代表数组写入从几开始
stride 代表写入一组数据后跳过几个索引
一般来说到这里的bone 已经处理过数据了他里面的worldX 和 worldY可以直接使用了

可以看看这个
写的非常好

https://segmentfault.com/a/1190000040082417?sort=newest

其中的比较重要的基础概念

3、插槽slot：一个骨骼bone下可能有多个slot插槽，每个slot插槽下可以放置一个附件实例。插槽本身的存在有两个重要的意义，一个是灵活的控制渲染顺序，一个是分组同类附件。一个插槽可以有多个附件，但一次只能看到一个。举个简单的栗子，图中手枪所在的位置的插槽是"武器"插槽，而该插槽可以放置不同的武器附件，例如"手枪"附件或"菜刀"附件。

4、附件attachment：slot插槽内当前渲染的附件实例，即真实上屏渲染的实物素材。（可能需要对素材做旋转、偏移、缩放甚至网格化mesh处理）。

egret spine 对接实现

猜你喜欢