egret: 使用DragonBones实现简单换装

这里采用官方龙骨例子,更换衣服为例:

一、dragonBones编辑器部分

2.在资源中加入需要更换的图片

3.将添加的图片拖入到clothes槽中,此处love为添加的图片

4.选中可见

5.导出资源

二、代码部分

1.导入资源

1         let dragon_data = RES.getRes( "Dragon_test_ske_json" );
2         let texturedata = RES.getRes( "Dragon_test_tex_json" );
3         let texturepng = RES.getRes( "Dragon_test_tex_png" );
4
5         let factory:dragonBones.EgretFactory = new dragonBones.EgretFactory();
6         factory.addDragonBonesData( dragonBones.DataParser.parseDragonBonesData(dragon_data) );
7         factory.addTextureAtlasData( factory.parseTextureAtlasData(texturedata, texturepng) );

2.创建骨架

1 let armature:dragonBones.Armature = factory.buildArmature( "Dragon" );

3.对动画添加时钟支持

dragonBones.WorldClock.clock.add( armature );
egret.startTick(this.dbrun, this);
1 private dbrun( timeStamp:number ):boolean
2     {
3         dragonBones.WorldClock.clock.advanceTime( 0.01 );
4         return true;
5     }

4.play动画:walk为动画名,0无限循环播放

armature.animation.play("walk",0);

5.添加显示容器实例到舞台

1         armature.display.x = 300;
2         armature.display.y = 500;
3         this.addChild(armature.display);

6.点击舞台换装操作

public replaceSlotDisplay( dragonBonesName:string,armatureName:string ,slotName:string ,displayName:string ,slot:dragonBones.Slot ,displayIndex:number ):void

用指定资源替换插槽的显示对象。

参数

 
dragonBonesName:string — 指定的龙骨数据名称。

armatureName:string — 指定的骨架名称。

slotName:string — 指定的插槽名称。

displayName:string — 指定的显示对象名称。

slot:dragonBones.Slot — 指定的插槽实例。

displayIndex:number — 要替换的显示对象的索引,如果未设置,则替换当前正在显示的显示对象。

1 this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
2      console.log(‘111‘);
3      this.num ++;
4      if(this.num%2 == 0){
5           factory.replaceSlotDisplay(‘Dragon_test‘,‘Dragon‘,‘clothes‘,‘love‘,armature.getSlot(‘clothes‘));
6      }else{
7           factory.replaceSlotDisplay(‘Dragon_test‘,‘Dragon‘,‘clothes‘,‘parts/clothes1‘,armature.getSlot(‘clothes‘));
8      }
9 },this);

效果展示:

原文地址:https://www.cnblogs.com/WentingC/p/9301015.html

时间: 2024-10-06 08:35:07

egret: 使用DragonBones实现简单换装的相关文章

Egret之龙骨换装

需求: 找到了黄马褂的结构: 我们新建一个DragonBones项目 , 用以为上述黄马褂换肤 我们对DragonE_view进行修改 ///<reference path="./../tools/DragonBoneTools.ts" /> module app {  export class DragonE_View  extends eui.Component implements eui.UIComponent {   private com_dragon : eu

DragonBones龙骨换装(局部换装)

参考: Egret官方换装动画 换装,主要是替换任意插槽的图片,来达到局部换装的目的. 游戏中可以只制作一个人物动画,然后局部替换100套衣服.100套发型或者100种眼睛.甚至可以把人和衣服所有插槽都换了. 下图替换了衣服.       一.创建一个测试骨骼动画 public armatureDisplay:dragonBones.EgretArmatureDisplay; public createBone(){ let factory = dragonBones.EgretFactory.

Unity换装的实现

关于Unity的换装,网上有几篇文章,我之前也简单的描述过实现.不过那个时候只是粗略的试验了下.今天好好梳理了下代码. 先上代码(自己的游戏项目,不是公司的,所以放心的贴上项目代码了,部分引用到其他的功能文件,但是核心代码无影响,这里主要看一下细节和思路) using UnityEngine; using System.Collections; using System.Collections.Generic; public enum AvatarPart { helmet, chest, sh

『HTML5梦幻之旅』 - 仿Qt演示样例Drag and Drop Robot(换装机器人)

起源 在Qt的演示样例中看到了一个有趣的demo.截图例如以下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,能够把机器人四周的颜色拖动到机器人的各个部位,比方说头.臂,身躯等.然后这个部位就会变成相应的颜色.相似于换装小游戏. 上图就是经过愚下的拖动颜色使其简略换装后的样子. 当然,拖动颜色使部件变色的功能并不难实现,关键在于这个机器人是动态的,我们要研究的就恰恰是这个机器人动画是怎么做出来的. 光凭两张图片我们无法知道这个动画究竟是什么样子的,

『HTML5梦幻之旅』 - 仿Qt示例Drag and Drop Robot(换装机器人)

起源 在Qt的示例中看到了一个有趣的demo,截图如下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,可以把机器人四周的颜色拖动到机器人的各个部位,比如说头,臂,身躯等,然后这个部位就会变成相应的颜色,类似于换装小游戏. 上图就是经过愚下的拖动颜色使其简略换装后的样子. 当然,拖动颜色使部件变色的功能并不难实现,关键在于这个机器人是动态的,我们要研究的就恰恰是这个机器人动画是怎么做出来的. 光凭两张图片我们无法知道这个动画到底是什么样子的,大家可以

Unity3D游戏开发之换装方法

游戏内的角色,能够像纸娃娃换装那样子让玩家可以为自己的角色改变外观,一直是相当受欢迎的功能:一般而言,我们建好的 3D 模型,如果要将其中一个部位换成另外一个形状,最直接的就是将该物件部位的 Mesh 替换掉,那么外观就改变了,但这种方法如果运用在需要做动作的模型上,将发现被置换掉的部位不会正常动作,更糟的状况可能连模型显示的位置及方向都是错误的,所以,直接变更 Mesh 的方法只适用于静态模型物件,为此,我们必须找出更深入的方法来做换装的功能,幸好,此部份 Unity 已经有提供相关范例可以参

Unity3d 换装 之 模型动画分离

在手游中换装成了越来越不可缺的一个功能,毫无疑问各式各样的时装为游戏增添了不同的色彩. 对于2D手游,或许是更换对应的序列帧,也或许是如同3D手游一般,更换模型动画. 对于游戏中的人物,一般分为头.上身.下身.武器四大部分就可以了.所以在游戏中,我们把这四部分单独做四个模型动画,然后动态拼接为一个整体,达到换装的效果. 然后根据动画制作人员的喜好 又有两种方式来拼接: 1.每个身体部位自带动画数据 2.每个身体部位不带动画数据,动画数据单独提取出来 我们这里介绍第二种. 对于我们这种每一个动作的

换装方法

游戏内的角色,能够像纸娃娃换装那样子让玩家可以为自己的角色改变外观,一直是相当受欢迎的功能:一般而言,我们建好的 3D 模型,如果要将其中一个部位换成另外一个形状,最直接的就是将该物件部位的 Mesh 替换掉,那么外观就改变了,但这种方法如果运用在需要做动作的模型上,将发现被置换掉的部位不会正常动作,更糟的状况可能连模型显示的位置及方向都是错误的,所以,直接变更 Mesh 的方法只适用于静态模型物件,为此,我们必须找出更深入的方法来做换装的功能,幸好,此部份 Unity 官方已经有提供相关范例可

公主换装游戏 - 女孩装扮儿童游戏3-6岁

公主换装游戏:适合3-6岁儿童的女孩装扮游戏,点击发型图标,下放出现发型选项,可以变换发型,点击服装和背景图标都可以相应选择需要的服装和背景,快来装扮公主吧!