硬核引擎魔改！实现 Graphics 2D&3D 带纹理绘制

Cocos Creator 自带的 Graphics 组件给我们提供了一系列绘画接口，不过有时候想实现一些特殊需求，难免就需要自己想办法。今天就和大家分享一下自己继承 graphics 后魔改的一些简单功能。魔改之后将实现：

• 2D 带纹理画出各种路径等效果；

• 3D 可用程序高自由度绘画出各种路径、图形等效果；

• 具体可应用在：游戏中实时绘制角色路径线、魔法画笔可以用特殊纹理画画、3D 游戏中实时生成玩家想要的 3D 物体/根据游戏玩法高自由度生成 3D 物体等等。

2D 效果预览

3D 效果预览

本次所用引擎版本为 Cocos Creator 3.4.1，以下是我的魔改思路，同样的思路也可以用在魔改其它组件上。

一、2D 带纹理

引擎源码虽然简洁整齐但看着依然云里雾里，咋办呢？没有捷径，努力啃下来吧，万一成了呢！而当我顺着文件夹分门别类地看下来后，还真没有想象中的困难（因为以前看过一个超高耦合度项目代码，简直是地狱级阅读难度，后来再复杂的代码逻辑都觉得不太吃力了）。

阅读引擎源码可以知道 graphics 的绘制原理：

• 在 graphics.ts 中实现绘制组件，通过各种接口收集绘制信息；

• 在 graphics-assembler.ts 中实现顶点渲染数据组装器；

• 在 impl.ts 中实现绘制路径点的存储和加工。

那么，该如何进行魔改呢？我想到了继承+重载 graphics 组件的方法：

• graphics 组件的 _flushAssembler 方法是获得顶点渲染数据组装器的地方，因此可以在这个方法里实现对顶点数据渲染组装器的重写。

• 想加纹理，则在 shader 里需要线的长度，线长和线宽两个数据即可组成 uv 坐标来获取纹理的像素点。

• 在 onLoad 方法里，将路径点存储加工器 impl.ts 替换为自己实现的路径点存储加工器。

思路有了，开工！

首先继承 graphics 组件，然后对照着源码重载 _flushAssembler 方法。考虑到 v3.x 版本的