uvtools：观察uv顶点数据的好帮手，修改游戏引擎你值得拥有

uvtools 是我自己写的一个小工具，在实际魔改引擎的过程中帮了很多忙，一般魔改引擎的过程中肯定会遇到渲染异常的bug，如果涉及到顶点数据的修改，首先肯定是要确认uv顶点是否符合预期，因此我需要一个工具，观察新的uv顶点数据，uv顶点的取值范围是[0-1]，映射到纹理上观察更直观，省心又省力。

我尝试寻找了市面上的替代软件，没有找到理想的替代品，能凑合的也不是非常好用，而且这算是我个人修改引擎过程中的一个高频需求，于是自己开发了一个，在排查渲染问题时，验证uv数据非常好用。

使用教程

1. 使用cocos dashboard安装插件，遇到问题请联系作者或者反馈论坛

2. 打开插件

3. 将uv对应的图片拖拽到左侧区域

   

4. 输入要观察的uv顶点数据，这个需要你对Engine的顶点数据整理下，比如：[0,0,1,1].join(',')，这里是以,分割每个顶点坐标。如果你对OpenGL/WebGL非常熟悉，很容易理解以下几个选项

   • step为一组顶点数据包含多少个分量

   • offset为uv顶点在一组顶点数据内的偏移量

   • count目前不允许修改，表示顶点的分量个数，很明显uv只有2个分量。

     

   上图中，只有一个uv顶点(1,1)，因为offset为2，会自动跳过每4(step)个分量的前2(offset)个分量。

   简单解释下，这里借鉴OpenGL的设计，主要还是为了灵活性，其次是engine的顶点数据也是遵从这样的设计，方便我们进行数据转换，这里有一个小细节，当我们输入顶点数据后，工具会自动根据step将顶点数据分割成行，一行代表的就是一个顶点数据。

5. 点击show uv按钮，即可在左侧纹理区域上显示对应的uv顶点位置，鼠标移动到对应的uv顶点上，会显示该顶点的一些详细信息，按照uv顶点的顺序尺寸逐渐变大，颜色由黄变绿，方便识别uv顶点的开头和结尾，在做顶点对比的时候非常有帮助。

   

6. 纹理视口区域，右下角显示的是当前纹理的尺寸，鼠标右键拖动纹理可以调整观察区域，如果我们想将观察的顶点数据在视口居中显示，点击回到中心即可。

引擎本身就是在和顶点数据打交道，纹理不正确，一眼就能通过画面看到，而顶点数据大部分都是计算出来的，特别是比较复杂的mesh，顶点数据量大，比如spine/dragon-bones，有像uv-tools这样的工具加持，能节省不少心智负担。

原文链接：https://juejin.cn/post/7343827886870708243 作者：xu__yanfeng