游戏开发笔记 - Spine换装

前言

想给小游戏做个时装功能，在游戏中一般来说换装分为两种：

1. 整体时装

2. 局部换装

2D 游戏中一般用到的骨骼动画 Spine 和 DragonBone(龙骨)。这里主要学习一下 Spine 换装的相关实现

Spine

Spine 是一套针对 2D 骨骼动画编辑工具，最终导出的动画文件结构:

• .png 文件

  骨骼贴图集合

• atlas

  骨骼文件信息

• json

  骨骼动画信息

使用时创建 sp.Skeleton 组件，导入动画文件即可。

Spine 动画信息又分为：bone -> slot -> attach 这样的结构，其中 attach 可以和贴图画上等号。

整体时装

这种方式比较简单，2 种做法：

1. Spine 动画中创建皮肤，通过 api setSkin 来设置即可。

2. 时装独立导出动画，代码直接替换新的 sp.SkeletonData

局部时装

局部换装相比较整体时装，稍微麻烦一些，也有 2 种做法：

1. 生成挂点

Cocos 官方 spine 扩展 AttachUtil.js

/**
 * !#en Traverse all bones to generate the minimum node tree containing the given bone names, NOTE that make sure the skeleton has initialized before calling this interface.
 * !#zh 遍历所有插槽，生成包含所有给定插槽名称的最小节点树，注意，调用该接口前请确保骨骼动画已经初始化好。
 * @method generateAttachedNodes
 * @param {String} boneName
 * @return {Node[]} attached node array
 */
generateAttachedNodes (boneName) {
    let targetNodes = [];
    if (!this._inited) return targetNodes;

    let rootNode = this._prepareAttachNode();
    if (!rootNode) return targetNodes;

    let res = [];
    let bones = this._skeleton.bones;
    for (let i = 0, n = bones.length; i < n; i++) {
        let bone = bones[i];
        let boneData = bone.data;
        if (boneData.name == boneName) {
            res.push(bone);
        }
    }

    let buildBoneTree = function (bone) {
        if (!bone) return;
        let boneData = bone.data;
        let boneNode = this._getNodeByBoneIndex(boneData.index);
        if (boneNode) return boneNode;

        boneNode = this._buildBoneAttachedNode(bone, boneData.index);

        let parentBoneNode = buildBoneTree(bone.parent) || rootNode;
        boneNode.parent = parentBoneNode;

        return boneNode;
    }.bind(this);

    for (let i = 0, n = res.length; i < n; i++) {
        let targetNode = buildBoneTree(res[i]);
        targetNodes.push(targetNode);
    }

    this._sortNodeArray();
    return targetNodes;
},

使用示例

const skel: sp.Skeleton = this.skelNode.getComponent(sp.Skeleton);
skel.animation = "idle";
skel.loop = true;

// @ts-ignore
let attachUtil = skel.attachUtil;
attachUtil.generateAllAttachedNodes();

let node = new cc.Node();
cc.resources.load<cc.SpriteFrame>(`icon/icon_dayanta`, cc.SpriteFrame, (e: Error, asset: cc.SpriteFrame) => {
	if (e) {
		cc.error(e);
		return;
	}
	let sprite = node.addComponent(cc.Sprite);
	sprite.spriteFrame = asset;

	let bones = attachUtil.getAttachedNodes("jiuhu_3");
	bones[0].destroyAllChildren();
	bones[0].addChild(node);
});

2. 替换 attach

function updateRegion(attach: sp.spine.RegionAttachment | sp.spine.MeshAttachment, tex2d: cc.Texture2D) {
	// @ts-ignore
	const skeTexture = new sp.SkeletonTexture({ width: tex2d.width, height: tex2d.height } as ImageBitmap);
	skeTexture.setRealTexture(tex2d);

	const region: sp.spine.TextureAtlasRegion = attach.region as sp.spine.TextureAtlasRegion;
	region.width = tex2d.width;
	region.height = tex2d.height;
	region.originalWidth = tex2d.width;
	region.originalHeight = tex2d.height;
	region.rotate = false;
	region.u = 0;
	region.v = 0;
	region.u2 = 1;
	region.v2 = 1;
	region.texture = skeTexture;
	region.renderObject = region;

	attach.region = region;
	attach.width = tex2d.width;
	attach.height = tex2d.height;

	if (attach instanceof sp.spine.MeshAttachment) {
		attach.updateUVs();
	} else {
		attach.setRegion(region);
		attach.updateOffset();
	}
}

使用示例

function async updateAttach(skel: sp.Skeleton, slotName: string, texture2d: cc.Texture2D) {
	this.deepCopy(skel);

	const slot: sp.spine.Slot = skel!.findSlot(slotName);
	if (!slot) {
		cc.error("findSlot is null");
		return;
	}

	const attach: sp.spine.RegionAttachment | sp.spine.MeshAttachment = slot.getAttachment() as sp.spine.RegionAttachment | sp.spine.MeshAttachment;
	if (attach === null) {
		cc.error("getAttachment is null");
		return;
	}

	// @ts-ignore
	skel.updateRegion(attach, texture2d);
	skel.invalidAnimationCache();
}

替换素材及效果:

最后

Demo
spine-change-attach