参考:

Egret官方换装动画

Egret换装三种方式 CSDN(全局换装)

egret使用DragonBones实现简单的换装

换装,主要是替换任意插槽的图片,来达到局部换装的目的。

游戏中可以只制作一个人物动画,然后局部替换100套衣服、100套发型或者100种眼睛。甚至可以把人和衣服所有插槽都换了。

下图替换了衣服。

     

一、创建一个测试骨骼动画

public armatureDisplay:dragonBones.EgretArmatureDisplay;
let factory = dragonBones.EgretFactory.factory;
factory.parseDragonBonesData(RES.getRes("test_ske_dbbin"));
factory.parseTextureAtlasData(RES.getRes("test_tex_json"), RES.getRes("test_tex_png"));
this.armatureDisplay = factory.buildArmatureDisplay(name);
this.addChild(this.armatureDisplay);}

  

二、封装的换装类

    /**
* 替换插槽
* @param slotName 插槽名称 原材料
* @param textureName 图片名 xxx_png
* @param 偏移量
*/
public setNewSlot( slotName:string, textureName:string ,offsetX:number=0, offsetY:number=0){
var slot:dragonBones.Slot = this.armatureDisplay.armature.getSlot(slotName);
var b:egret.Bitmap = new egret.Bitmap();
b.texture = RES.getRes(textureName);
b.x = slot.display.x;
b.y = slot.display.y;
b.anchorOffsetX = b.width/2 + offsetX;
b.anchorOffsetY = b.height/2 + offsetY;
slot.setDisplay( b );
}

三、换装。替换人和手的插槽。

this.setNewSlot("人", "people_png");
this.setNewSlot("手", "hand_png");

四、全局换装

全局换装主要是使用replaceTexture来进行替换纹理图。

假设有两套皮肤分别是skin1.png和skin2.png,则两张图必须配置文件和图片位置都一样才能进行全局换装

let armatureDisplay:dragonBones.EgretArmatureDisplay;
let factory = dragonBones.EgretFactory.factory;
factory.parseDragonBonesData(RES.getRes("test_ske_dbbin"));
factory.parseTextureAtlasData(RES.getRes("test_tex_json"), RES.getRes("test_tex_png"));
armatureDisplay = factory.buildArmatureDisplay(name);
this.addChild(armatureDisplay);}
armatureDisplay.armatureDisplay.armature.replaceTexture(RES.getRes("skin1_png"));  //皮肤1
armatureDisplay.armatureDisplay.armature.replaceTexture(RES.getRes("skin1_png"));  //皮肤2

  

  

 

DragonBones龙骨换装(局部换装+全局换装)的更多相关文章

  1. npm install 装本地一直安装全局问题

    想用npm安装一些模块,不管怎么装,一直装作全局. 以为是node有问题,重装了N次,却还发现这个问题. 困惑几天无果, 偶然间通过此文章发现,npm存在配置文件:https://www.sitepo ...

  2. form表单钩子,局部钩子和全局钩子

    form表单源码解析: 局部钩子: 全局钩子:

  3. JNI/NDK开发指南(十)——JNI局部引用、全局引用和弱全局引用

    转自:http://blog.csdn.net/xyang81/article/details/44657385   这篇文章比较偏理论,详细介绍了在编写本地代码时三种引用的使用场景和注意事项.可能看 ...

  4. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  5. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  6. Django学习笔记(14)——AJAX与Form组件知识补充(局部钩子和全局钩子详解)

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

  7. Django框架(十四)-- forms组件、局部钩子、全局钩子

    一.什么是forms组件 forms组件就是一个类,可以检测前端传来的数据,是否合法. 例如,前端传来的邮箱数据,判断邮件格式对不对,用户名中不能以什么开头,等等 二.forms组件的使用 1.使用语 ...

  8. Django框架(十五)—— forms组件、局部钩子、全局钩子

    目录 forms组件.局部钩子.全局钩子 一.什么是forms组件 二.forms组件的使用 1.使用语法 2.组件的参数 3.注意点 三.渲染模板 四.渲染错误信息 五.局部钩子 1.什么是局部钩子 ...

  9. js中的局部函数和全局函数的调用

    //局部函数和全局函数的特点 function fc1(){ var name ="chenhao"; function fc2(){ var age = 30; alert(na ...

随机推荐

  1. 解决:ADODB.Stream 错误 '800a0bbc' 写入文件失败

    重装更改目录为e盘后,上传文件出现问题.解决方法: 调用adodb.stream的savetofile方法时发生错误, ADODB.Stream 错误 800a0bbc 写入文件失败.(msxml3. ...

  2. Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  3. input框取消光标颜色手机端不生效

    <style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字 ...

  4. 4 云计算系列之Openstack简介与keystone安装

    preface KVM 是openstack虚拟化的基础, 再介绍了kvm虚拟化技术之后,我们介绍下openstack和如何搭建. Openstack组件 openstack架构图如下所示 那么我们就 ...

  5. windows上完美的X-server服务器软件:MobaXterm

    这个软件 太 TMD 好了 . 干净.绿色.小巧. X-server 软件.想知道如何用不,直接打开运行该软件,这样就Enough了!

  6. ubuntu-12.04.5-desktop-i386.iso:ubuntu-12.04.5-desktop-i386:安装Oracle11gR2

    ubuntu 桌面版的安装不介绍. 如何安装oracle:核心步骤和关键点. ln -sf /bin/bash /bin/sh ln -sf /usr/bin/basename /bin/basena ...

  7. spring核心之AOP学习总结二

    一:springAOP常用的注解 @Aspect:声明方面组件 @Before:声明前置通知 @After-returning:声明后置通知 @After:声明最终通知 @Around:声明环绕通知 ...

  8. JQ 使用toggle实现DIV的隐藏和显示

    $('.submenuA').toggle( function () { $(this).next('div').show(); }, function () { $(this).next('div' ...

  9. 关于 wsdl2Java 自动生成客户端调取webservice接口

    webservice地址:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl wsdl2Java 自动生成类名: 客户端调 ...

  10. Track and Follow an Object----4

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ ntroduction: 在本示例中,我们将探索包含Kinect摄像头的自主行为. 这 ...