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 版本的