微笑教你 Creator 2.x 实现简单画板

前言

在Creator2..x之前有一个比较全面的开源项目，实现了画板的功能。大神的博客：https://www.jianshu.com/p/97bf36c9ec40怎奈Creator的1.x和2.x相差很大，RenderTexture的begin，end函数都没有。底层渲染做了很大的改动。cc.DrawNode 也不复存在。在此情形下，我实现了自己的一个简单的画板，放出来供大家参考，如果有更好的方案，希望在下方留言，共同进步。

我的实现方式Graphics + RenderTexture结合使用。

1. 使用Graphics 绘制图形。毫无疑问，绘制图形还是用Graphics的比较多。根据touchMove的轨迹绘制贝塞尔曲线，如果触摸点不够绘制一个贝塞尔曲线，就绘制圆。这样可以减少绘制次数。如果一个点就绘制一个圆，比较卡。

2. 一直绘制而不调用g.clear函数drawcall会不断增加，也会变得很卡。

3. 如果touchMove触摸到时间过长，产生的点数据太多，也会很卡。

如何改善呢？

1. 我是使用RenderTexture，在松开手的时候用RenderTexture读取到的截屏数据更新当前的画版。这样相当于画板变成了截图，可以减少DrawCall过多的情况。

2. 如果不松手一直绘制也会增加DrawCall。这个时候会判断当前触摸点的个数，如果超过一定数量，就可以做一次松手时触发的事件。也就是通过读取的数据更新画板。

如何做回退？

将每次更新画板的时候使用的数据保存，可以有个长度限制，也就是可以回退的步数。点击回退按钮的时候使用保存的数据更新画板纹理。

擦除

因为背景颜色是白色的。使用白色画笔绘制自然就擦除了。

结语

第一次做这种游戏，还好需求比较简单。这些方式操作下来足够应付需求了。本片也只是提供一种实现思路，希望对有需求的人有所帮助，更希望有过经验的人可以留言或者加我微信一起讨论！