分享一个骨骼动画局部换图的实现方案(献给有需要的同学)

  • Creator 版本: 2.3.x +

为了满足角色形象自由切换,减少骨骼动画的资源量,研究了一下骨骼动画的局部换图的实现

  • 初始骨骼动画

  • 换装后的形象

  • 换装效果

  • 换装代码

let node = new cc.Node()
node.parent = node
// 创建一个骨骼动画
let skeleton = node2.addComponent(sp.Skeleton)
skeleton.skeletonData = ResourcePool.getSkeleton(“skeleton_filename”)
skeleton.animation = “idle”
skeleton.loop = true

// 直接替换图片
const skeletonData = skeleton.skeletonData.getRuntimeData()
const skin = skeletonData.findSkin(“default_skin”)
// 找到骨骼的index
const slotindex = skeletonData.findSlotIndex(“hand”)
// 找到需要换图的插槽
const atta = skin.getAttachment(slotindex, “hand”)
// 通过图片创建插槽的region
let region = createAttachRegion(“texture_filename”)
atta.setRegion(region)
atta.updateOffset()

  • 关键代码

public createAttachRegion(texture_name: string): sp.spine.TextureAtlasRegion {
const sprite_frame = ResourcePool.getSpriteFrame(texture_name);
if (!sprite_frame) {
return null;
}
const texture = sprite_frame.getTexture();
let rect = sprite_frame.getRect()
let isrotated = sprite_frame.isRotated()
let offset = sprite_frame.getOffset();
let original_size = sprite_frame.getOriginalSize()

let skeletonTexture = new sp.SkeletonTexture();
skeletonTexture.setRealTexture(texture);
let page = new sp.spine.TextureAtlasPage();
page.name = texture.name;
page.uWrap = sp.spine.TextureWrap.ClampToEdge;
page.vWrap = sp.spine.TextureWrap.ClampToEdge;
page.texture = skeletonTexture;
page.texture.setWraps(page.uWrap, page.vWrap);
page.width = rect.width;
page.height = rect.height;
let region = new sp.spine.TextureAtlasRegion();
region.page = page;
region.rotate = isrotated;
region.x = rect.x;
region.y = rect.y;
region.offsetX = offset.x
region.offsetY = offset.y;
region.width = rect.width;
region.height = rect.height;
region.originalWidth = original_size.width;
region.originalHeight = original_size.height;
region.u = rect.x / texture.width;
region.v = (rect.y) / texture.height;
region.u2 = (rect.x + rect.width) / texture.width;
region.v2 = (rect.y + rect.height) / texture.height;
region.texture = skeletonTexture;
return region;

}

实际效果可以微信搜素 快打世界
或者扫描下方二维码

20赞

优质帖子怎么没人呢!!

mark一下

跟我之前的思路一致,直接替换插槽

1赞

大佬,我用你的代码试了一下,我这里有个spine动画attachments下有RegionAttachment和MeshAttachment两种,换RegionAttachment的时候setRegion有效,但是MeshAttachment调用setRegion报错,想问下这两种有啥区别吗

mmmmmmmmmmmmmark

mark一下

mark一下

有没有dragonBones版的呢:stuck_out_tongue_closed_eyes:

MARK.

MARK .

mark一下

mark哈哈

mark!!!

MeshAttachment是带蒙皮的插槽,这个对纹理设置了扭曲拉伸等信息,这种的插槽是不能通过这种方式换的

mark.

mark吧 有需要的时候再回来看~~~

好的,多谢大佬

直接换插槽不好嘛

换插槽也可以
只是觉得不如直接换纹理更方便