突然间,微博上被@了,一看原来是之前的关于介绍 spine 的文章引起的。然后就是一阵惭愧,又开了一坑,然后就木有了。虽然,一直在研究 spine,但是的确没写下来相关的内容。于是,赶紧,补了一些内容。

  官网内容转发,没啥技术含量。我自己写的运行库也完成了,虽然还需要打磨,但是比官方的更符合2dx 的风格。做了许久之后,对 spine 的理解更深了一点,然后就胡乱介绍下设计思路和为什么这么做。

概念


先来介绍下 spine 中的一些术语和概念

  • Bone 骨骼

spine 是骨骼编辑器,所以骨骼是基础。每个骨骼都会有旋转,缩放,位移的属性。然后骨骼可以有子节点,最终形成了一个树型结构。可以对应2dx 里面的 node

  • Slot 插槽

骨骼上的一个挂载点。不是所有的骨骼上都能放置东西的,因为很多骨骼其实只参与计算,真正重要的骨骼,也就是需要挂载其他东西的骨骼上必须放置插槽。slot 只是用来标记特殊的骨骼位置,本身只有一个颜色属性,也可以说,重要的骨骼节点可以称为 slot。

  • Attachment 附件

挂在插槽上的内容,可以是图片,也可以是判定区域,只要是你能想到的东西,都可以当成附件。

  • Draw order 描画顺序

骨架上插槽的一个顺序列表。用来控制描画的先后顺序。

  • Animation 动画

基于时间轴的一个骨骼状态列表。

  • Skin 皮肤

一套附件的集合,类似于换装。

  • Bounding Box 边界框

用来指定骨骼上的边界的多边形的区域。

  • atlas 图集

贴图集合,小图片合并在一起,就成了图集。

实现


上面大致介绍了一些基本概念,然后我们从实现角度上来说下为啥这么设计。

首先,假设我们需要一个骨骼系统。很酷,是的,最近的确比较火。于是,我们就设计了一个树状的骨架,每个节点就是(Bone)。

很简单啊,再想下,骨骼上要放图片啥的,于是我们就要能访问到特定的骨骼,遍历太傻了,好吧,我们给这些骨骼加个名字,这样就能访问到具体 骨骼了,那这些名字就叫 slot。

好吧,可能有些人觉得,slot 和 bone 本质上一样,为啥需要分开呢,没必要的。我只能说事情其实并不简单,来想下,我们已经有了一个完美的骨架,图片也在应该在的骨骼上了。那我们该如何显示图片么?遍历么,从根结点开始,一直到最下层的节点,不管你用啥排序,这个顺序是固定的,但是现实总是很残酷,很多时候,我们需要不停调整图片描画的顺序,也就是调整树的节点排序,啊,好麻烦。那怎么办,我们指定下骨骼描画的顺序吧(Draw order),这些特定的骨骼也就是 slot。

你看,这下完美了,也就是 bone 用来计算位置,slot 用来控制描画。

完美的骨骼系统,一定要有碰撞区域(bounding box),这和图片差不多,一个用于显示,一个用于边界判断,好吧,那就抽象成一个概念叫(p_w_upload),于是,slot 上就可以附加不同的 p_w_upload 了。

终于可以换附件了,但是一个一个换好累。于是,我们把一组附件合在一起,组成了 skin。这下简单了,一换 skin,整个世界就变样了。

啊,做着做着,就发现图片太多了,要优化啊。怎么办,简单,把小图片合在一起,每个图片对应了一个大图里面的一个区域,这就是 atlas。

啊,不早了,先说到这里吧,下次有空继续。

转载于:https://blog.51cto.com/kingzeus/1540262

【spine】原理介绍和程序实现相关推荐

  1. 双边滤波(Bilateral filter)原理介绍及matlab程序实现

    双边滤波 1.原理介绍 双边滤波由C. Tomasi在1998年提出,是一种经典的非线性空间滤波方法.在滤波器稀疏的制定上,双边滤波同时考虑到了输出像素与邻域内其它像素的欧氏距离和取值的差异,即:同时 ...

  2. heartbeat原理介绍

    heartbeat原理介绍 HeartBeat运行于备用主机上的Heartbeat可以通过以太网连接检测主服务器的运行状态,一旦其无法检测到主服务器的"心跳"则自动接管主服务器的资 ...

  3. 安检x光机原理计算机实现,安检x光机成像原理介绍

    安检x光机是我们都很熟悉的一种安检设备,但很少有人去了解安检x光机成像原理.本文将为大家介绍安检x光机成像原理. 安检x光机成像原理 安检x光机主要由X光管和X光机电源以及控制电路等组成,而X光管又由 ...

  4. Springboot中的缓存Cache和CacheManager原理介绍

    一.背景理解 什么是缓存,为什么要用缓存? 程序运行中,在内存保持一定时间不变的数据就是缓存.简单到写一个Map,里面放着一些key,value数据,就已经是个缓存了.所以缓存并不是什么高大上的技术, ...

  5. Hadoop 底层原理介绍

    1 概述 Apache Hadoop是一个软件框架,可在具有数千个节点和PB级数据的大型集群上进行分布式处理. Hadoop主要包含四个项目:Hadoop Common.Hadoop分布式文件系统(H ...

  6. kafka集群原理介绍

    kafka集群原理介绍 @(KAFKA)[kafka, 大数据] kafka集群原理介绍 一基础理论 二配置文件 一java调优 二参数说明 三错误处理 四zookeeper中的内容 1brokers ...

  7. spark之2:原理介绍

    spark之2:原理介绍 @(SPARK)[spark, 大数据] 1.spark是一个基于内存计算的开源的集群计算系统,目的是让数据分析更加快速.因此运行spark的机器应该尽量的大内存,如96G以 ...

  8. 充电原理_电动汽车充电桩如何设置?充电桩原理介绍

    随着新能源产业的蓬勃发展,电动汽车在生活中变得越来越普遍.比亚迪(BYD),宝马(BMW)和特斯拉(Tesla)等汽车制造商都已经推出了全电动汽车,而混合动力汽车则更为普遍.为了能够方便地为这些电动汽 ...

  9. LVS原理介绍及安装过程

    一.ARP技术概念介绍 为什么讲ARP技术,因为平常工作中有接触.还有就是LVS的dr模式是用到arp的技术和数据. 1.什么是ARP协议 ARP协议全程地址解析协议(AddressResolutio ...

最新文章

  1. java nio 写事件_Java NIO
  2. ORACLE学习笔记--性能优化2
  3. Java随机数中的陷阱
  4. 算法导论学习笔记 第6章 堆排序
  5. php发送验证图片,php生成图片验证码_PHP教程
  6. android cm 老罗,Android之父打造了一款全面屏旗舰 罗永浩如此评价
  7. RK3399 Mali-T860占用率
  8. ping命令使用集合
  9. Chrome 离线下载最佳方法
  10. 机器学习算法工程师领域现状
  11. 深度长文:NLP的巨人肩膀(上)
  12. Sass!默认和主题化的设计系统
  13. android画廊无限轮播,ViewPager无限循环实现画廊式banner
  14. 最大团问题【回溯法】
  15. java释放string_java – 释放stringbuilder内存的最快方法
  16. python 请假审批系统_请假审批系统
  17. 你知道几种编程思想?
  18. 【python小技巧】 批量将.png格式图片转换为.jpg格式图片
  19. 联合国发布2019年《世界人口展望》:人口老化加剧, 到本世纪末地球人口将达109亿...
  20. 使用FFmpeg将一张图片和一段音频转换成视频

热门文章

  1. python爬虫:爬取某网站视频
  2. 测试经理管理团队应注意的点
  3. 软件测试模型-敏捷模型
  4. 新建虚拟机后打开虚拟机前的设置,防止ip变动
  5. dfa matlab用法,关于使用MF-DFA方法计算广义Hurst指数的MATLAB操作问题
  6. mysql多实例和主从区别_mysql多实例的安装以及主从复制配置
  7. Python 序列基本操作
  8. 前端开发中,对图片的优化技巧有哪些?
  9. 学web前端好找工作吗?想给初学者们几点建议
  10. QT_UDP传输小结