创建skeleton节点并绑定MOUSE_DOWN事件后,却始终无法响应。经测试发现如下:

skeleton节点在load结束后,其bounds反映了总体的宽高,但是width与height却为0,而sprite(skeleton继承自sprite)却是以width与height来作为事件响应区域的。而单纯的sprite结点是没有这个问题的。因此将bounds.width与bounds.height重新赋值给skeleton节点,但是又出现了新的问题。

调用nodeSkeleton.graphics.drawRect(0, 0, bounds.width, bounds.height, "#ff00ee"),绘制显示区域可以看到,Rect的左上角位置为(bounds.width/2, bounds.height),即在人物脚下中心线的位置。打开dragonbones编辑器,载入对应的动画,发现人物的root节点正是在脚下中心线的位置。也就是说,skeleton节点的动画区域是按照动画编辑器来设定的,与其Laya中的响应区域有很大的偏移。

为了解决这个问题,创建了一个父节点proxy来响应事件:

var node = new Laya.Skeleton();
var proxy = new Laya.Sprite();
proxy.addChild(node);
node.load(SkeletonConfigs["NuTao"], Laya.Handler.create(this, function() {
var bound = node.getBounds(); // 加载完毕之后才能拿到有效的bounds
var W = bound.width, H = bound.height;
node.width = W; // 若不设置的话, node.width与node.height均为0
node.height = H;
node.pos(W/2, H); // 骨骼节点偏移(W/2,H),使动画区域的左上角与proxy节点的位置(左上角)重合 proxy.width = W;
proxy.height = H;
proxy.graphics.drawRect(0, 0, proxy.width, proxy.height, "#ff00ffee");
proxy.on(Laya.Event.MOUSE_DOWN, this, function() {
console.log("MouseDown Event");
});
}));

laya的skeleton骨骼动画事件响应问题的更多相关文章

  1. cocos creator 动画编辑器以及骨骼动画的使用

    一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与 ...

  2. Android设备 cocos2dx 骨骼动画注册事件播放音效,退到后台再返回黑屏问题

    最近遇到一个cocos2dx 骨骼动画注册事件播放音效,在骨骼动画播放的时候,按HOME键退到桌面,再次打开游戏的时候,会黑屏. 解决办法如下,可能不是太完美,至少解决了大部分问题. 1.在org.c ...

  3. Spine Skeleton Animation(2D骨骼动画)

    骨骼动画 首先我们来看到底什么是骨骼动画: 在早期的机器上,渲染本身已经占用了很多CPU资源,因此,对于渲染,往往采取的是一种空间换时间的策略,以避免在模型的渲染中继续加重CPU的负担.帧动画模型在这 ...

  4. DragonBones龙骨骨骼中的自定义事件(另有声音、动画事件)

    参考: DragonBones骨骼动画事件系统详解 一.在DragonBones中添加自定义事件帧 动画制作时 时间轴拉到最下面有一个事件层,添加一个事件帧 左边属性面板定义自定义事件 二.Egret ...

  5. Skeleton with Assimp 骨骼动画解析

    Skeleton with Assimp 骨骼动画解析 骨骼动画是图形学中十分常见应用很广泛的一个技术,也是比较基础的内容,作为图形学的工程师需要将这一部分内容梳理清晰,主要关键在于几点:第一,分清楚 ...

  6. 基于babylon3D模型研究3D骨骼动画(1)

    3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...

  7. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  8. spine骨骼动画组件使用详解

    1. spine骨骼动画工具 骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画spine是一个非常流行的2D骨骼动画制作工具spine 动画美术人员导出3个文件:    (1) .png文 ...

  9. cocos2dx骨骼动画Armature源码分析(二)

    flash中数据与xml中数据关系 上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义). sk ...

随机推荐

  1. 很好的linux下GPIO驱动详解文章

    原文地址  http://blog.csdn.net/llxmedici/article/details/6282372 打算跟着友善之臂的<mini2440 linux移植开发指南>来做 ...

  2. centos7 搭建hadoop

    参考文档:http://blog.csdn.net/xiaoxiangzi222/article/details/52757168 https://waylau.com/centos-7-instal ...

  3. hdu 2686 费用流 / 双线程DP

    题意:给一个方阵,求从左上角出到右下角(并返回到起点),经过每个点一次不重复,求最大获益(走到某处获得改点数值),下来时每次只能向右或向下,反之向上或向左. 俩种解法: 1  费用流法:思路转化:从左 ...

  4. BZOJ——1626: [Usaco2007 Dec]Building Roads 修建道路

    http://www.lydsy.com/JudgeOnline/problem.php?id=1626 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1 ...

  5. mysql explain 的type解释

    原文:http://blog.csdn.net/github_26672553/article/details/52058782 Explain命令 用于分析sql语句的执行情况和成本预估 今天我们重 ...

  6. Nuxt.js使用lazyload

    Vue的使用方式: 1. 安装插件: npm install vue-lazyload --save-dev 2. main.js引入插件: import VueLazyLoad from 'vue- ...

  7. win10中显示wpcap.dll丢失的处理方式

    win10中显示wpcap.dll丢失的处理方式 学习了:https://jingyan.baidu.com/article/4f34706e30e673e387b56dd8.html 直接安装Win ...

  8. CS 和 BS 的区别和优缺点(转)

    转自:http://www.cnblogs.com/scnuyz/p/5808808.html bs是浏览器(browser)和服务器(server) cs是静态客户端程序(client)和服务器(s ...

  9. ScrollView白边问题

    在Android开发所使用的ScrollView中..兼容比較低的版本号的时候(比方14)会出现难看的白边.这时假设使用的是xml布局文件话设置ScrollView的android:fadingEdg ...

  10. 深入理解JVM:HotSpot虚拟机对象探秘

    对象的创建 java是一门面向对象的语言.在Java程序执行过程中无时无刻有Java对象被创建出来.在语言层面上,创建对象(克隆.反序列化)一般是一个newkeyword而已,而在虚拟机中,对象的创建 ...