版本2.3.4
参考:
一 cocos2.3版本只支持spine3.8导出的二进制
官方版本说明:2.3更新说明
我用2.3.4版本,美术用spine3.6导出二进制,我导入到cocos中,显示不出来。
论坛水友的提问:creator 2.3 2进制spine显示不出来
二 使用Spine动画
将spine的二进制文件拖动到项目assets文件夹下
拖拽骨骼动画(龙骨头图标)到舞台,即可生成骨骼动画
代码中播放 (raptor为骨骼动画的节点)
let sk:sp.Skeleton = this.raptor.getComponent(sp.Skeleton); //播放行走动画 sk.setAnimation(0, "walk",true);
三 外部图片进行局部换装
比如要把枪替换掉
把枪替换成这个外部图片
换装代码如下 (sp.SkeletonTexture会报错,但是能正常运行)
大致是自己使用外部图片来创建一个region,替换骨骼动画的region。
start() { // init logic this.label.string = this.text; let sk:sp.Skeleton = this.raptor.getComponent(sp.Skeleton); //播放行走动画 sk.setAnimation(0, "walk",true); //换装 this.changeSlot(sk, "gun", cc.loader.getRes("icon/t_job1.png")); } /** * 用外部图片局部换装 * @param sk 骨骼动画 * @param slotName 需要替换的插槽名称 * @param texture 外部图片 */ public changeSlot(sk:sp.Skeleton, slotName:string, texture:cc.Texture2D) { //获取插槽 let slot = sk.findSlot(slotName); //获取挂件 let att = slot.attachment; //创建region 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 = texture.width page.height = texture.height let region = new sp.spine.TextureAtlasRegion() region.page = page region.width = texture.width region.height = texture.height region.originalWidth = texture.width region.originalHeight = texture.height region.rotate = false region.u = 0 region.v = 0 region.u2 = 1 region.v2 = 1 region.texture = skeletonTexture //替换region att.region = region att.setRegion(region) att.updateOffset(); }
替换效果
四 两个骨骼动画之间替换挂件
通过更换部位的名字,找到骨骼动画对应的Slot,然后将挂件Attachment进行替换。
let sk1:sp.Skeleton; let sk2:sp.Skeleton; let parts = ["left-arm", "left-hand", "left-shoulder"]; for (let i = 0; i < parts.length; i++) { let slot1 = sk1.findSlot(parts[i]); let slot2 = sk2.findSlot(parts[i]); let attachment = slot2.getAttachment(); slot1.setAttachment(attachment); }