laya的skeleton骨骼动画事件响应问题
创建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骨骼动画事件响应问题的更多相关文章
- cocos creator 动画编辑器以及骨骼动画的使用
一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与 ...
- Android设备 cocos2dx 骨骼动画注册事件播放音效,退到后台再返回黑屏问题
最近遇到一个cocos2dx 骨骼动画注册事件播放音效,在骨骼动画播放的时候,按HOME键退到桌面,再次打开游戏的时候,会黑屏. 解决办法如下,可能不是太完美,至少解决了大部分问题. 1.在org.c ...
- Spine Skeleton Animation(2D骨骼动画)
骨骼动画 首先我们来看到底什么是骨骼动画: 在早期的机器上,渲染本身已经占用了很多CPU资源,因此,对于渲染,往往采取的是一种空间换时间的策略,以避免在模型的渲染中继续加重CPU的负担.帧动画模型在这 ...
- DragonBones龙骨骨骼中的自定义事件(另有声音、动画事件)
参考: DragonBones骨骼动画事件系统详解 一.在DragonBones中添加自定义事件帧 动画制作时 时间轴拉到最下面有一个事件层,添加一个事件帧 左边属性面板定义自定义事件 二.Egret ...
- Skeleton with Assimp 骨骼动画解析
Skeleton with Assimp 骨骼动画解析 骨骼动画是图形学中十分常见应用很广泛的一个技术,也是比较基础的内容,作为图形学的工程师需要将这一部分内容梳理清晰,主要关键在于几点:第一,分清楚 ...
- 基于babylon3D模型研究3D骨骼动画(1)
3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...
- 基于Babylon.js编写简单的骨骼动画生成器
使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...
- spine骨骼动画组件使用详解
1. spine骨骼动画工具 骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画spine是一个非常流行的2D骨骼动画制作工具spine 动画美术人员导出3个文件: (1) .png文 ...
- cocos2dx骨骼动画Armature源码分析(二)
flash中数据与xml中数据关系 上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义). sk ...
随机推荐
- tmux基本操作
安装和移除: // 安装 sudo apt-get install tmux // 移除 sudo apt-get remove tmux 常用命令: tmux [new -s 会话名 -n 窗口名] ...
- 【WEB基础】HTML & CSS 基础入门(6)超链接
超链接--文字链接 超链接[hyperlink]是网页中最为常见的元素之一,我们几乎可以在所有的网站页面中找到超链接.每个网站都不止一个页面,这些页面就是利用超链接进行串接.超链接帮我们实现了网页与网 ...
- luogu P1704 寻找最优美做题曲线
题目背景 nodgd是一个喜欢写程序的同学,前不久(好像还是有点久了)洛谷OJ横空出世,nodgd同学当然第一时间来到洛谷OJ刷题.于是发生了一系列有趣的事情,他就打算用这些事情来出题恶心大家-- 题 ...
- MySQL的内存表(转)
说明:MySQL内存表可以提升一些临时业务的查询,比如做Session的共享,一些类似缓存的数据等. “内存表”顾名思义创建在内存中的表,真是这样吗?其实不然,MySQL的内存表,表结构创建在磁盘上, ...
- 【Linux】在虚拟机上安装ubuntu
虚拟机安装步骤 参考:http://www.cnblogs.com/sxdcgaq8080/p/7466529.html 在安装ubuntu系统之前,当然是下载一个ubuntu的iso镜像在本地啦. ...
- pycharm、idea插件代理设置,插件安装
pycharm和idea都是intellij的,所以插件安装是设置代理方法相似, 以pycharm举例: 1.已经安装的插件列表: 2.查找要安装的插件,没有,会给出下载插件的链接地址: 3.打开链接 ...
- 【Todo】Java学习笔记 100==100 & Reflection API & Optional类详解 & DIP、IoC、DI & token/cookie/session管理会话方式
为什么1000 == 1000返回为False,而100 == 100会返回为True? Link Java Reflection API:Link Java8 Optional 类深度解析: L ...
- iOS 获取appstore 版本
项目上线以后一般都涉及到升级.那么iOS 怎样从appstore获取到版本 事实上非常easy NSString *url = [[NSString alloc] initWithFormat:@&q ...
- SolidEdge如何自动标注尺寸
1 工具-尺寸-关系助手(必须在编辑草图轮廓状态下,如果你的草图不可编辑,则没有这些选项) 2 框选要自动标注尺寸的东西,这些东西立即变为黄色,然后打对勾 3 选择横纵坐标尺寸原点(其实就是为 ...
- CSS 的导入方式 (link or import ?)
前言 最常看见的CSS的使用方式有三种 1. 在span, div 等标签上直接使用 style 属性定义CSS <span style="color:blue">Th ...