Egret2D跑酷之龙骨换装研究

全局换装

全局换装的原理其实就是完全的替换骨骼对应的纹理集合。

//
var dragonBonesFactory:DragonBonesFactory = new DragonBonesFactory();
dragonBonesFactory.initArmatureFile(RES.getRes("role_pkd_ske_json"),
                                    RES.getRes("role_pkd_tex_png"),
                                    RES.getRes("role_pkd_tex_json"));
// 生成骨骼
this._animation = dragonBonesFactory.makeArmature("role_pkd_animation");
// 

对应的纹理集如下图所示


生成骨骼动画效果如下

我们整体改变纹理集合的颜色,来进行测试

//
this._animation.getArmature().replaceTexture(RES.getRes("role_pkd_tex_wb_png"));

效果如下图


我们如果纹理集变成这样是不可以的,需要我们使用局部换肤

运行效果如下

局部换装

我们主要通过dragonBonesFactory.getFactory().replaceSlotDisplay的接口完成。
具体参数意义如下


 * @param dragonBonesName 指定的龙骨数据名称。 - 一般自己没有设置就设置null
 * @param armatureName 指定的骨架名称。 - 替换后的骨架名称
 * @param slotName 指定的插槽名称。 - 替换后骨骼的插槽名称
 * @param displayName 指定的显示对象名称。 - 替换后插槽的Display纹理
 * @param slot 指定的插槽实例。 - 现在正在使用的Slot
 // 举例
dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "pking_body", 
    "ss_pking_body", this._animation.getArmature().getSlot("pking_body"));
dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "ss_pking_hat", "ss_pking_hat", this._animation.getArmature().getSlot("ss_pking_hat"));

效果如下:


这个时候我们看到换装效果已经OK,但是在新的换装之后,红色框记的区域,层级发生了改变,这里我们需要手动进行调整下。


dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "pking_body", 
    "ss_pking_body", this._animation.getArmature().getSlot("pking_body"));
dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "ss_pking_hat", 
    "ss_pking_hat", this._animation.getArmature().getSlot("ss_pking_hat"));
this._animation.name = "DXY";
this._animation.getArmature().display.scaleX = 2.0
this._animation.getArmature().display.scaleY = 2.0
const displayA = this._animation.getArmature().getSlot("pking_neck2").display as egret.DisplayObject;
const displayB = this._animation.getArmature().getSlot("pking_body").display as egret.DisplayObject;
const displayC = this._animation.getArmature().getSlot("ss_pking_hat").display as egret.DisplayObject;

displayA.parent.addChildAt(displayA, displayA.parent.getChildIndex(displayB) - 1);
displayC.parent.addChildAt(displayC, displayC.parent.getChildIndex(displayB) - 1);

这个可以使用的前提就是动画中没有控制过层级的顺序(ZOrder)
动画设置ZOrder了,可以多设置几个卡槽,然后程序控制显示和隐藏即可,代码如下


dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "pking_body", 
    "ss_pking_body", this._animation.getArmature().getSlot("pking_body_top"));
const display:egret.DisplayObject = this._animation.getArmature().getSlot("pking_body").display
display.visible = false
dragonBonesFactory.getFactory().replaceSlotDisplay(null, "role_pkd_animation1", "ss_pking_hat", 
    "ss_pking_hat", this._animation.getArmature().getSlot("ss_pking_hat"));
this._animation.name = "DXY";
this._animation.getArmature().display.scaleX = 2.0
this._animation.getArmature().display.scaleY = 2.0

最后效果如下视频


欢迎各位留言!

欢迎留言

avatar
  Subscribe  
Notify of