zoukankan      html  css  js  c++  java
  • 谈谈Spine动画在产品中的应用

    笔者介绍:姜雪伟IT公司技术合伙人。IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术具体解释》电子工业出版社等。

    Spine是一个2D的骨骼动画编辑器, 由于其良好的UI设计及完整的功能而被开发人员追捧。

    Spine动画已经广泛的应用在游戏开发或者APP中。做2D开发的,曾经做动画採用的都是採用序列帧播放的,假设动画播放的效果好,须要制作的序列帧图片比較多,图片的数量多会导致包体急剧增大。对于用户体验来说很差,怎样使用好的效果而且能降低包体大小,这时就显示出Spine的优势了。Spine是专门为2D动作做的编辑器,假设须要使用正版的,要购买序列号,编辑器效果例如以下所看到的:



    Spine 能将项目中的动画导出为 JSON 或二进制格式文件。它们能在 Spine 执行时库中完美的再现。 Spine 同一时候还能够导出 GIF 动画。 PNG JPG 序列图。还有 AVI QuickTime 的视频文件。

    它开发了多款针对不同引擎和语言的库。详情查看例如以下网址:

    https://github.com/EsotericSoftware/spine-runtimes

    市面上比較火的引擎有Unity3D和Cocos2d-x,Spine都有相应的版本号开发。

    Cocos2d-x引擎开发的游戏眼下大部分都是使用Spine工具制作的,它仅仅有三个文件组成:图集png。json文件包括骨骼信息,atlas文件包括spine图集中的各部分图片的位置信息,比方UV坐标,旋转等。

    以以下信息分别表示的是图集,json文件信息,atlas信息。




    json文件信息:

    {"skeleton":{"hash":"y8la0z0sAMdMiq3cqsdvZoRIAiQ","spine":"3.4.02","width":905,"height":1142.45,"images":""},"bones":[{"name":"root"},{"name":"fadai","parent":"root"}],"slots":[{"name":"人物參考1","bone":"root"},{"name":"fadai","bone":"fadai","attachment":"2d_C001_png01"},{"name":"2d_C001发带/2d_C001_dj01","bone":"root"},{"name":"2d_C001发带/2d_C001_dj02","bone":"root"},{"name":"2d_C001发带/2d_C001_dj2","bone":"root"},{"name":"2d_C001发带/2d_C001_dj3","bone":"fadai"},{"name":"2d_C001发带/2d_C001_dj4","bone":"fadai"}],"skins":{"default":{"fadai":{"2d_C001_png01":{"x":76.71,"y":111.84,"width":905,"height":764}}}},"animations":{"animation":{}}}
    

    atlas文件信息:

    2d_C001_dj01.png
    size: 909,768
    format: RGBA8888
    filter: Linear,Linear
    repeat: none
    2d_C001_png01
      rotate: false
      xy: 2, 2
      size: 905, 764
      orig: 905, 764
      offset: 0, 0
      index: -1
    

    这是三个文件大小总计:一百多K。很小,Spine就是解释这个json文件和atlas文件。

    我们公司也开了一款人脸识别追踪的产品,使用上述文件的效果例如以下图所看到的:



    在相似相机软件中也有同样的应用,比方FaceU软件使用的就是序列帧。导致后期的包体会很大,事实上全然能够通过Spine动画对其进行改进。

    笔者在CSDN学院专门做了一款相似刀塔传奇的横版游戏使用的就是Spine动画,课程观看地址:《2D动作手游-Spine骨骼动画


  • 相关阅读:
    nginx:配置详细说明
    linux:/etc/rc.local 不能自动启动问题
    nginx:403 forbidden 二种原因
    nginx:虚拟主机配置
    linux:lnmp环境搭建
    php:mysqli扩展
    linux:磁盘的分割、检验、格式化与挂载
    webpack
    js的window.onscroll事件兼容各大浏览器
    js window事件解析(转载)
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8408730.html
Copyright © 2011-2022 走看看