下载手机 APP

如何在taptap制造中使用龙骨（骨骼）动画

修改于04/09253 浏览开发交流

先看效果：

思路很简单，用龙骨其他语言的runtime，让塔拉拉对照实现。

第一步：

对塔拉拉说：我上传了龙骨动画的相关文档DragonBones_5.0_data_format_zh...是json格式说明文档pixi_dragon.md中有基于pixi.js对龙骨动画的实现Sheep_Ani_ske.jsonSheep_Ani_tex.json这两个文件是龙骨动画导出的两个json，素材库中有对应的png图片

请你使用nanovg实现一个taptap制造的龙骨动画的单文件runtime，同时制作一个demo，展现出Sheep这个龙骨动画

这个时候塔拉拉大概率会生成一个歪七扭八的东西出来。

TapTap

但是不要慌，慢慢来。

第二步：

对塔拉拉说：请仔细阅读官方实现，然后修正或补充我们的新runtime。

这个时候塔拉拉生成出来的runtime已经初具姿态了，但是离完美还差不少。

第三步：

细节调整。因为塔拉拉会精简实现，很多参数细节并没有去实现，我们需要去观察，然后向塔拉拉指出。

比如：羊的小腿和蹄子之间有一些空隙，我看原版的龙骨动画里面没有这个空隙

塔拉拉给出的回复是：

问题原因：蹄子纹理在图集中经过了透明像素裁切（trimming），有 frameX/frameY 偏移。pivot 计算时错误地用了裁切后的 width/height，应该用原始帧的 frameWidth/frameHeight。

例如 foot_front_toe_rt：裁切后 96x51，原始帧 112x62，frameX=-9。错误 pivot 偏移了 8 像素，正好对应看到的空隙。

修复：_renderImageDisplay 中 pivot 计算从 st.width / st.height 改为 st.frameWidth / st.frameHeight，一行改动。预览看看蹄子是否贴合了。

她也的确调整好了

第四步：

功能查漏补缺。

你需要问她：你已经实现了哪些功能？

她就会告诉你她已经实现的功能，以及没有实现的功能。

TapTap

各位可以根据自身需求，实现对应的功能，在下只是抛砖引玉哈。 [表情_斜眼笑]

[表情_斜眼笑]

[表情_斜眼笑]

[表情_斜眼笑]

猜你想搜

taptap 制造dragonbones教程

TapTap 制造应用

9.8