- 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;
}
实际效果可以微信搜素 快打世界
或者扫描下方二维码