cocos creator spine 换装 ( native engine )

本教程引擎源代码基于 cocos creator v2.4.10

之前的教程介绍了js engine的实现，在cocos creator v2.x 的架构中，native engine使用的是spine的c++版本，所以这就意味着js engine层面实现的spine换装，无法在native engine中复用。

在引擎渲染架构上，仍旧是基于一个大的buffer的做法，和js engine有雷同的地方，只不过是换成c++重新实现了一遍。

spnie渲染逻辑剖析

spine的渲染入口在SkeletonRenderer.cpp，同样的，阅读顺序可以根据数字标号看

MeshBuffer* MiddlewareManager::getMeshBuffer(int format)
{
    MeshBuffer* mb = _mbMap[format];
    if (!mb)
    {
        mb = new MeshBuffer(format);
        _mbMap[format] = mb;
    }
    return mb;
}
void SkeletonRenderer::render (float deltaTime) {
    auto mgr = MiddlewareManager::getInstance();
    middleware::MeshBuffer* mb = mgr->getMeshBuffer(vertexFormat);
    // 1. 这个vb就是大的buffer，getMeshBuffer和js engine的很像
    middleware::IOBuffer& vb = mb->getVB();
    middleware::IOBuffer& ib = mb->getIB();
    auto& drawOrder = _skeleton->getDrawOrder(); // 和js对应上了，很熟悉的味道
    for (size_t i = 0, n = drawOrder.size(); i < n; ++i) {
        Triangles triangles;
        TwoColorTriangles trianglesTwoColor;
        slot = drawOrder[i];
        if (slot->getAttachment()->getRTTI().isExactly(RegionAttachment::rtti)) {
            RegionAttachment* attachment = (RegionAttachment*)slot->getAttachment();
            attachmentVertices = (AttachmentVertices*)attachment->getRendererObject(); // 都是attachmentVertices
        } else if (slot->getAttachment()->getRTTI().isExactly(MeshAttachment::rtti)) {
            // 5. 同样的可以看到attachment来自slot的相关接口
            MeshAttachment* attachment = (MeshAttachment*)slot->getAttachment();
            // 4. attachmentVertices来自attachment->renderObject，这里用到了类型强制转换
            attachmentVertices = (AttachmentVertices*)attachment->getRendererObject();
            
            if (!_useTint) {
                triangles.vertCount = attachmentVertices->_triangles->vertCount;
                vbSize = triangles.vertCount * sizeof(V2F_T2F_C4B);// 计算需要的内存大小
                isFull |= vb.checkSpace(vbSize, true);// 提前申请好内存
                // 2. 将vb大的buffer，传递给了triangle.verts，指针指向的是上边新申请的内存位置
                // 也就是说指向的是共享的vb，最终渲染数据的时候也是从这里面拿数据的
                triangles.verts = (V2F_T2F_C4B*)vb.getCurBuffer();                
                // 3. 复制顶点数据到大的buffer里面，所以attachmentVertices就是数据的来源
                // triangles.verts指向的是共享的vb
                memcpy(triangles.verts, attachmentVertices->_triangles->verts, vbSize);
                
                triangles.indexCount = attachmentVertices->_triangles->indexCount;
                triangles.indices = (unsigned short*)ib.getCurBuffer();
                // 将attachmentVertices的indices数据copy到triangles.indices
                memcpy(triangles.indices, attachmentVertices->_triangles->indices, ibSize);
            }else{
                // 暂时不关心这个情况
            }
        }
        // 6. 设置纹理，换肤时，_texture必须指向新的middle::Texture2D
        // 如果attachmentV->_texture->setNativeTexture()修改纹理，会导致所有的骨骼都指向新的纹理
        texture = attachmentVertices->_texture; 
        curTextureIndex = attachmentVertices->_texture->getNativeTexture()->getHandle();
        // If texture or blendMode change,will change material.
        if (preTextureIndex != curTextureIndex || preBlendMode != slot->getData().getBlendMode() || isFull) {
            flush();
        }
    }
}

到第5步，我们就很清楚的知道顶点的数据来源是attachmentVertices->_triangles->verts，所以我们只需要在这里做手脚就行了。

在设置AttachmentVertices的时候，就同步设置了uv，至于xy，是在运行时实时计算的

static void setAttachmentVertices(MeshAttachment* attachment) {
    AtlasRegion* region = (AtlasRegion*)attachment->getRendererObject();
    AttachmentVertices* attachmentVertices = new AttachmentVertices(
        (Texture2D*)region->page->getRendererObject(),                
        attachment->getWorldVerticesLength() >> 1, // 除以2
        attachment->getTriangles().buffer(), 
        attachment->getTriangles().size()
    );
    V2F_T2F_C4B* vertices = attachmentVertices->_triangles->verts;
    for (size_t i = 0, ii = 0, nn = attachment->getWorldVerticesLength(); ii < nn; ++i, ii += 2) {
        // uv不会发生变化，只需要设置一次就好了
        vertices[i].texCoord.u = attachment->getUVs()[ii];
        vertices[i].texCoord.v = attachment->getUVs()[ii + 1];
    }
    attachment->setRendererObject(attachmentVertices, deleteAttachmentVertices);
}

换肤的本质就是在修改uv，从以上代码可以看到uv和attachment->getUVS() / attachment->_uv有关系

而attachment->_uv的更新和下边的uv有关系

this->setRegionU(0);
this->setRegionV(0);
this->setRegionU2(1);
this->setRegionV2(1);

同样，在c++换肤的时候，你也会遇到RegionAttachment/MeshAttachment，以MeshAttachment举例，当设置完毕uv信息后，updateUVs会重新计算attachment->_uvs，注意这里和regionDegress也有关系

Vector<float> _uvs;
void MeshAttachment::updateUVs() {
    if (_uvs.size() != _regionUVs.size()) {
            _uvs.setSize(_regionUVs.size(), 0);
    }

    int i = 0, n = _regionUVs.size();
    float u = _regionU, v = _regionV;
    float width = 0, height = 0;

    switch (_regionDegrees) {
        case 90: {
                float textureWidth = _regionHeight / (_regionU2 - _regionU);
                float textureHeight = _regionWidth / (_regionV2 - _regionV);
                u -= (_regionOriginalHeight - _regionOffsetY - _regionHeight) / textureWidth;
                v -= (_regionOriginalWidth - _regionOffsetX - _regionWidth) / textureHeight;
                width = _regionOriginalHeight / textureWidth;
                height = _regionOriginalWidth / textureHeight;
                for (i = 0; i < n; i += 2) {
                        _uvs[i] = u + _regionUVs[i + 1] * width;
                        _uvs[i + 1] = v + (1 - _regionUVs[i]) * height;
                }
                return;
        }
    }
}

RegionAttachment就不再赘述，这样剖析下来，逻辑已经很清晰了

多实例污染问题

因为copy的时候，rendererObject是在传递指针，也就导致了多实例污染

Attachment* MeshAttachment::copy() {
    if (_parentMesh) return newLinkedMesh();

    MeshAttachment* copy = new (__FILE__, __LINE__) MeshAttachment(getName());
    copy->setRendererObject(getRendererObject());// 反复在传递引用    
}

static void deleteAttachmentVertices (void* vertices) {
    delete (AttachmentVertices *) vertices;
}

static void setAttachmentVertices(MeshAttachment* attachment) {
    AtlasRegion* region = (AtlasRegion*)attachment->getRendererObject();
    AttachmentVertices* attachmentVertices = new AttachmentVertices(
        (Texture2D*)region->page->getRendererObject(),                
        attachment->getWorldVerticesLength() >> 1, // 除以2
        attachment->getTriangles().buffer(), 
        attachment->getTriangles().size()
    );
    V2F_T2F_C4B* vertices = attachmentVertices->_triangles->verts;
    for (size_t i = 0, ii = 0, nn = attachment->getWorldVerticesLength(); ii < nn; ++i, ii += 2) {
        vertices[i].texCoord.u = attachment->getUVs()[ii];
        vertices[i].texCoord.v = attachment->getUVs()[ii + 1];
    }
    attachment->setRendererObject(attachmentVertices, deleteAttachmentVertices);
}
void setRendererObject(void* rendererObject, DisposeRendererObject dispose = NULL) {
    if (_dispose && _rendererObject && _rendererObject != rendererObject)
        _dispose(_rendererObject);// 释放之前的renderObject，这里是delete attachmentVertices

    _rendererObject = rendererObject;
    _dispose = dispose;
}
AttachmentVertices::AttachmentVertices (middleware::Texture2D* texture, int verticesCount, unsigned short* triangles, int trianglesCount) {
    _texture = texture;
    if (_texture) _texture->retain();

    _triangles = new middleware::Triangles();
    _triangles->verts = new middleware::V2F_T2F_C4B[verticesCount];
    _triangles->vertCount = verticesCount;
    _triangles->indices = triangles;
    _triangles->indexCount = trianglesCount;
}

解决办法也只能复制一份AttachmentVertices。

旋转带来的问题

项目中是采用图集plist换肤，当更换多处插槽时，合图有一定的概率降低drawcall，而且合图的方式也有利于组织游戏资源。

plist合图时，会将图片旋转以节省空间，但是这样就导致spine的计算出现了问题。

spine内部在计算顶点的时候，有旋转角度会影响顶点坐标，spin打包的图有旋转，所以生成的顶点也是旋转的，换肤时使用plist图集，里面也是可以控制图片的旋转，所以这就让问题更加复杂了。

一种比较懒的解决办法就是要求spine打包纹理的时候不要旋转，并且plist打包时也不要旋转图片。

但是这么做只能规避，本质上是可以解决的

spine旋转和plist旋转的关系

直接说结论：

• spine里面的旋转是逆时针90°
• 合图里面的旋转是顺时针90°
• SpriteFrame里面的旋转是顺时针90°

因此，如果plist里面发生了旋转，对spine来说就是270，因为plist的旋转属性是布尔值，所以，plist的旋转相对spine来说，永远都是270

测试例

以spine内置的raptor-pro举例

RegionAttachment测试例子

情况1

情况2

rotate

rotate其实就是顺时针旋转90°，plist里面的旋转刚好和这个是一致的，当了解到这个算法后，其实可以自己根据rotate和uv进行调整，只要计算出最终合适的uv即可

多试错几次就知道了

ratation

this.rotation包含了原始的旋转数据，不能轻易改变可能会导致位置对不上

可以看到rotation的改变导致了图片的对齐出现了差异

RegionAttachment.prototype.updateOffset = function () {
    var regionScaleX = this.width / this.region.originalWidth * this.scaleX;
    var regionScaleY = this.height / this.region.originalHeight * this.scaleY;
    var localX = -this.width / 2 * this.scaleX + this.region.offsetX * regionScaleX;
    var localY = -this.height / 2 * this.scaleY + this.region.offsetY * regionScaleY;
    var localX2 = localX + this.region.width * regionScaleX;
    var localY2 = localY + this.region.height * regionScaleY;
    var radians = this.rotation * Math.PI / 180; //ratation是基于弧度，这里换算为了角度
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var localXCos = localX * cos + this.x;
    var localXSin = localX * sin;
    var localYCos = localY * cos + this.y;
    var localYSin = localY * sin;
    var localX2Cos = localX2 * cos + this.x;
    var localX2Sin = localX2 * sin;
    var localY2Cos = localY2 * cos + this.y;
    var localY2Sin = localY2 * sin;
    var offset = this.offset;
    offset[RegionAttachment.OX1] = localXCos - localYSin;
    offset[RegionAttachment.OY1] = localYCos + localXSin;
    offset[RegionAttachment.OX2] = localXCos - localY2Sin;
    offset[RegionAttachment.OY2] = localY2Cos + localXSin;
    offset[RegionAttachment.OX3] = localX2Cos - localY2Sin;
    offset[RegionAttachment.OY3] = localY2Cos + localX2Sin;
    offset[RegionAttachment.OX4] = localX2Cos - localYSin;
    offset[RegionAttachment.OY4] = localYCos + localX2Sin;
};

情况3

情况4

MeshAttachment测试例子

情况1

情况2

情况3

情况4

以上就是spine换装时，需要注意的情况，比较多，主要是需要处理顶点旋转带来的问题，还是比较麻烦的。